Finished day 19

Author: bad6e

19 - Webcam Fun/scripts-FINISHED.js

@@ -3,3 +3,98 @@ 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 => {
+    video.src = window.URL.createObjectURL(localMediaStream);
+    video.play();
+  })
+  .catch(err => {
+    console.error(`Please allow your webcam!`, 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);
+    //take pixels out
+    let pixels = ctx.getImageData(0, 0, width, height);
+
+    //mess with them
+    //pixels = redEffect(pixels);
+    // pixels = rgbSplit(pixels);
+    pixels = greenScreen(pixels);
+
+    // ctx.globalAlpha = 0.1;
+    //put them out
+    ctx.putImageData(pixels, 0, 0);
+  }, 16);
+}
+
+function takePhoto () {
+  snap.currentTime = 0;
+  snap.play();
+
+  //take the data out of the canvas
+  const data = canvas.toDataURL('image/jpeg');
+  //this is base64 - text based representation of the photo
+  const link = document.createElement('a');
+  link.href = data;
+  link.setAttribute('download', 'handsome');
+  link.innerHTML =`<img src="${data}" alt="Hansome man" />`
+  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] * 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);