burning-carrot · changicho · Jun 20, 2020
diff --git a/19 - Webcam Fun/changi.html b/19 - Webcam Fun/changi.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Get User Media Code Along!</title>
+    <link rel="stylesheet" href="style.css" />
+  </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_changi.js"></script>
+  </body>
+</html>
diff --git a/19 - Webcam Fun/scripts_changi.js 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 = `<img src="${data}" alt="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);