WorldDrknss/JavaScript.30
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Webcam Fun. Day 19 of 30.

Browse Source
This commit is contained in:
Charles Showalter 2023-03-10 09:30:12 -08:00
parent 3d05e09841
commit 73fd3627c4
5 changed files with 213 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
Webcam Fun [19-30]/index.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get User Media Code Along!</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="https://fav.farm/🔥" />
</head>
<body>
<div class="photobooth">
<div class="controls">
<button onClick="takePhoto()">Take Photo</button>
<!-- <div class="rgb">
<label for="rmin">Red Min:</label>
<input type="range" min=0 max=255 name="rmin">
<label for="rmax">Red Max:</label>
<input type="range" min=0 max=255 name="rmax">
<br>
<label for="gmin">Green Min:</label>
<input type="range" min=0 max=255 name="gmin">
<label for="gmax">Green Max:</label>
<input type="range" min=0 max=255 name="gmax">
<br>
<label for="bmin">Blue Min:</label>
<input type="range" min=0 max=255 name="bmin">
<label for="bmax">Blue Max:</label>
<input type="range" min=0 max=255 name="bmax">
</div> -->
</div>
<canvas class="photo"></canvas>
<video class="player"></video>
<div class="strip"></div>
</div>
<audio class="snap" src="./snap.mp3" hidden></audio>
<script src="scripts.js"></script>
</body>
</html>

14
Webcam Fun [19-30]/package.json Normal file
View File

@ -0,0 +1,14 @@
{
"name": "gum",
"version": "1.0.0",
"description": "",
"main": "scripts.js",
"scripts": {
"start": "browser-sync start --server --files \"*.css, *.html, *.js\""
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.12.5 <2.23.2"
}
}

93
Webcam Fun [19-30]/scripts.js Normal file
View File

@ -0,0 +1,93 @@
const video = document.querySelector(".player");
const canvas = document.querySelector(".photo");
const ctx = canvas.getContext("2d");
const strip = document.querySelector(".strip");
const snap = document.querySelector(".snap");
function getVideo() {
navigator.mediaDevices
.getUserMedia({ video: true, audio: false })
.then((localMediaStream) => {
// console.log(localMediaStream);
video.srcObject = localMediaStream;
video.play();
})
.catch((err) => console.log(err));
}
function paintToCanvas() {
const width = video.videoWidth;
const height = video.videoHeight;
canvas.width = width;
canvas.height = height;
return setInterval(() => {
ctx.drawImage(video, 0, 0, width, height);
let pixels = ctx.getImageData(0, 0, width, height);
// pixels = rgbSplit(pixels);
// ctx.putImageData(pixels, 0, 0);
}, 16);
}
function takePhoto() {
snap.currentTime = 0;
snap.play();
const data = canvas.toDataURL("image/png");
const link = document.createElement("a");
link.href = data;
link.setAttribute("download", "handsome");
link.innerHTML = `<img src="${data}" />`;
strip.insertBefore(link, strip.firstChild);
}
function redEffect(pixels) {
for (let i = 0; i < pixels.data.length; i += 4) {
pixels.data[i + 0] = pixels.data[i + 0] + 200; // RED
pixels.data[i + 1] = pixels.data[i + 1] - 50; // GREEN
pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // Blue
}
return pixels;
}
function rgbSplit(pixels) {
for (let i = 0; i < pixels.data.length; i += 4) {
pixels.data[i - 150] = pixels.data[i + 0]; // RED
pixels.data[i + 500] = pixels.data[i + 1]; // GREEN
pixels.data[i - 550] = pixels.data[i + 2]; // Blue
}
return pixels;
}
function greenScreen(pixels) {
const levels = {};
document.querySelectorAll(".rgb input").forEach((input) => {
levels[input.name] = input.value;
});
for (i = 0; i < pixels.data.length; i = i + 4) {
red = pixels.data[i + 0];
green = pixels.data[i + 1];
blue = pixels.data[i + 2];
alpha = pixels.data[i + 3];
if (
red >= levels.rmin &&
green >= levels.gmin &&
blue >= levels.bmin &&
red <= levels.rmax &&
green <= levels.gmax &&
blue <= levels.bmax
) {
// take it out!
pixels.data[i + 3] = 0;
}
}
return pixels;
}
getVideo();
video.addEventListener("canplay", paintToCanvas);

BIN
Webcam Fun [19-30]/snap.mp3 Normal file
View File

Binary file not shown.

60
Webcam Fun [19-30]/style.css Normal file
View File

@ -0,0 +1,60 @@
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
font-size: 10px;
background: #ffc600;
}
.photobooth {
background: white;
max-width: 150rem;
margin: 2rem auto;
border-radius: 2px;
}
/*clearfix*/
.photobooth:after {
content: '';
display: block;
clear: both;
}
.photo {
width: 100%;
float: left;
}
.player {
position: absolute;
top: 20px;
right: 20px;
width:200px;
}
/*
Strip!
*/
.strip {
padding: 2rem;
}
.strip img {
width: 100px;
overflow-x: scroll;
padding: 0.8rem 0.8rem 2.5rem 0.8rem;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
background: white;
}
.strip a:nth-child(5n+1) img { transform: rotate(10deg); }
.strip a:nth-child(5n+2) img { transform: rotate(-2deg); }
.strip a:nth-child(5n+3) img { transform: rotate(8deg); }
.strip a:nth-child(5n+4) img { transform: rotate(-11deg); }
.strip a:nth-child(5n+5) img { transform: rotate(12deg); }