JavaScript 30- Day 19 Study Notes

https://javascript30.com/

Day 19 of JavaScript 30 by Wes Bos involved setting up a photo booth using a webcam. The video is piped into an HTML canvas element. Still-shots can be saved. Different effects can be made by manipulating RGB, global Alpha, and green screen values. This involved quite a bit of code compared to previous projects and took a much longer time as well. And after all that, I could not get a finished product, very frustrating. I ran into several obstacles, none involved actual coding.

First of all, I didn’t have a webcam. My desktop is older and not equipped with one. So I had to purchase an add-on webcam. I went ahead and followed the coding for the project which, while long, was fairly straightforward.

Bos gave us a package.json file that allowed us to set up a local server on our computer. Also, there was a separate scripts.js file instead of inline scripts tags.

A function brought the video into the program.

function getVideo(){   navigator.mediaDevices.getUserMedia({video: true, audio: false})      .then(localMediaStream => {         video.src = window.URL.createObjectURL(localMediaStream);         video.play();       })      .catch(err => {         console.error("Oh No!", err);      });}

Once I set up my add-on webcam, I got an error message that I will elaborate on later.

A second function put the video onto HTML canvas.

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 = greenScreen(pixels);      ctx.putImageData(pixels, 0,0);   }, 16);}

The next function allowed us to take a still shot.

function takePhoto() {   snap.currentTime =0;   snap.play();   const data = canvas.toDataURL('image/jpeg');   const link = document.createElement('a');   link.href = data;   link.setAttribute('download', 'handsome');   link.innerHTML = `<img src ="${data}      " alt="Handsome Man"/>`   strip.insertBefore(link, strip.firstChild);}

Finally, three more functions allowed us to manipulate RGB, global Alpha, and green screen values to produce special effects.

function redEffect(pixels){   for(let i = 0; i < pixels.data.length; i+=4){      pixels.data[i+0] = pixels.data[i+0] + 100;//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+100]= 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) {            pixels.data[i + 3] = 0;         }     }     return pixels;}

Working with HTML canvas and image manipulation is new to me. Plus, being unable to use my webcam, I was not able to see the results of the code.

After receiving and installing an add-on webcam, I was not able to display video within this program. This is the issue that showed in the console.

“Because a cookie’s SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request…”

“…Specify SameSite=None and Secure if the cookie should be sent in cross-site requests…”

After much searching through Windows 10 security settings, I could not figure out how to do this. I should note Bos used a Mac and perhaps the settings work differently? Or perhaps the Chrome browser? If anyone can shed some light on this, please add a comment.

Follow my study notes as I progress through JavaScript 30.

Retired physician, writer, aspiring website designer and developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store