JavaScript 30- Day 19 Study Notes
By: Jeffrey Amen
Tags: Learning To Code, JavaScript

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.