diff --git a/19 - Webcam Fun/changi.html b/19 - Webcam Fun/changi.html new file mode 100644 index 0000000..1c84dd5 --- /dev/null +++ b/19 - Webcam Fun/changi.html @@ -0,0 +1,43 @@ + + + + + Get User Media Code Along! + + + +
+
+ +
+ + + + + +
+ + + + + + +
+ + + + + +
+
+ + + +
+
+ + + + + + diff --git a/19 - Webcam Fun/scripts_changi.js b/19 - Webcam Fun/scripts_changi.js new file mode 100644 index 0000000..627e2b2 --- /dev/null +++ b/19 - Webcam Fun/scripts_changi.js @@ -0,0 +1,104 @@ +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.error(`OH NO!!!`, 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 = redEffect(pixels); + pixels = rgbSplit(pixels); + + pixels = greenScreen(pixels); + // ctx.globalAlpha = 0.1; + ctx.putImageData(pixels, 0, 0); + }, 16); +} + +function takePhoto() { + // sound + snap.currentTime = 0; + snap.play(); + + const data = canvas.toDataURL("image/jpeg"); + const link = document.createElement("a"); + link.href = data; + link.setAttribute("download", "handsomne"); + // link.testContent = "Download Image"; + link.innerHTML = `Handsome Man`; + strip.insertBefore(link, strip.firstChild); +} + +function redEffect(pixels) { + for (let i = 0; i < pixels.data.length; i += 4) { + pixels.data[i] = pixels.data[i + 0] + 100; // R + pixels.data[i + 1] = pixels.data[i + 1] - 50; // G + pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // B + } + return pixels; +} + +function rgbSplit(pixels) { + for (let i = 0; i < pixels.data.length; i += 4) { + pixels.data[i - 150] = pixels.data[i + 0]; // R + pixels.data[i + 100] = pixels.data[i + 1]; // G + pixels.data[i - 150] = pixels.data[i + 2]; // B + } + 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);