diff --git a/Webcam Fun [19-30]/index.html b/Webcam Fun [19-30]/index.html new file mode 100644 index 0000000..1cacb16 --- /dev/null +++ b/Webcam Fun [19-30]/index.html @@ -0,0 +1,46 @@ + + + + + Get User Media Code Along! + + + + + +
+
+ + +
+ + + +
+
+ + + + + + + diff --git a/Webcam Fun [19-30]/package.json b/Webcam Fun [19-30]/package.json new file mode 100644 index 0000000..93bfac7 --- /dev/null +++ b/Webcam Fun [19-30]/package.json @@ -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" + } +} diff --git a/Webcam Fun [19-30]/scripts.js b/Webcam Fun [19-30]/scripts.js new file mode 100644 index 0000000..3ad89a0 --- /dev/null +++ b/Webcam Fun [19-30]/scripts.js @@ -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 = ``; + 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); diff --git a/Webcam Fun [19-30]/snap.mp3 b/Webcam Fun [19-30]/snap.mp3 new file mode 100644 index 0000000..16a2888 Binary files /dev/null and b/Webcam Fun [19-30]/snap.mp3 differ diff --git a/Webcam Fun [19-30]/style.css b/Webcam Fun [19-30]/style.css new file mode 100644 index 0000000..4a5bb62 --- /dev/null +++ b/Webcam Fun [19-30]/style.css @@ -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); }