Day19 of #100DaysOfCode

#CodeTogether Day 19/100

Hii folks 🙌

Today I have completed the 19th video of JavaScript30!

Project 19: Unreal Webcam Fun

Source: https://javascript30.com

Learnings:

Today we are going to make a live photo booth with JavaScript. And it was a really long lesson!

So, first, get the video pinned in the browser and then we’ll call video.play, which is going to play it.

We need to do a catch here, just in case we doesn’t allow to access our webcam. We need to handle that error.

Here is the complete getVideo function:

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);
    });
}
getVideo();

Now, what we want to do is to every 16 milliseconds (random choice), we are going to take an image from the webcam and put it into the canvas.

return setInterval(() => {
    ctx.drawImage(video, 0, 0, width, height);

Here is the complete paintToCanvas function:

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);
}

To automate it we’re going to listen for an event on the video element called canplay

canplay - That's an event that the video will emit.

video.addEventListener("canplay", paintToCanvas);

Now, what we want to do is let’s work on the takePhoto function. First of all, we add capture sound to it for effect.

snap.currentTime = 0;
  snap.play();

What we now need to do is take the data out of the canvas.
We can do this, const data = canvas.toDataURL.

Then, we pass it, “image/jpeg”.

The image that we currently have is in a text-based representation so we need to convert it into a link.

const link = document.createElement("a");
  link.href = data;
  link.setAttribute("download", "handsome");

We can now not only click photos but download them as well.

Now we want the photos to be visible on the screen as well:

link.innerHTML = `<img src="${data}" alt="Handsome Man" />`;
strip.insertBefore(link, strip.firstChild);

The last thing that we want to do is do some filters on them.
So the way that a filter works is that you get the pixels out of the canvas, and then we do some tweaking to them, changing the RGB values, and putting them back in.

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

and then we create a function for effect, like this:

function redEffect(pixels) {
  for (let i = 0; i < pixels.data.length; i += 4) {
    pixels.data[i + 0] = pixels.data[i + 0] + 200; // RED
    pixels.data[i + 1] = pixels.data[i + 1] - 50; // GREEN
    pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // Blue
  }
  return pixels;
}

Today I learned (T-I-L):

• Creating own live photo booth.
• Tweaking the RGBA pixel in video using JavaScript.
• Image in text format & Way to download it! 🙌

That is all for Day19 ✅

Thanks for reading, See you tomorrow!