DEV Community

loading...
Cover image for Detecting faces from the webcam in JavaScript

Detecting faces from the webcam in JavaScript

Chris Bongers
I write daily web development tips that help you become a more efficient developer. 👨‍💻⚡️
Originally published at daily-dev-tips.com ・3 min read

As we looked at the face detection API yesterday, let's see how we can make it like the barcode from the webcam example.

We will be doing this one a little bit differently, due to the high drawing rate, we will draw everything on the canvas, which makes it easier to draw the detection.

The end goal for today is cool face detection from a webcam input.

Detecting faces with JavaScript

Writing video input to the canvas

For the first part, let's look at how we can capture the video input, and write it to a canvas.

For our HTML we can use the following:

<canvas></canvas>
Enter fullscreen mode Exit fullscreen mode

Now let's introduce the basic onload to call an asynchronous function again.

window.onload = () => {
  detect();
};
Enter fullscreen mode Exit fullscreen mode

Inside our detect function, we can have a play with getting the canvas and writing the video stream to it.
But first, let's define all our variables.

async function detect() {
  const canvas = document.querySelector('canvas');
  const context = canvas.getContext('2d');
  const faceDetector = new FaceDetector({fastMode: true});
  const mediaStream = await navigator.mediaDevices.getUserMedia({
    video: {facingMode: 'environment'}
  });

  const video = document.createElement('video');
  video.srcObject = mediaStream;
  video.autoplay = true;
  video.onloadedmetadata = () => {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
  };
}
Enter fullscreen mode Exit fullscreen mode

However this will not write the actual video yet, this will need to be based on the loop to write every change.

So let's add the loop already.

(function renderLoop() {
  requestAnimationFrame(renderLoop);
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
})();
Enter fullscreen mode Exit fullscreen mode

That will give us the webcam output on the screen.

Webcam to canvas in JavaScript

Detecting faces from the webcam input in JavaScript

So now that we have the webcam on the canvas, let's look at how we can implement our face detection.

We will change our loop to call the render function.

(function renderLoop() {
  requestAnimationFrame(renderLoop);
  render();
})();
Enter fullscreen mode Exit fullscreen mode

This render function in return will call the face detector API.

function render() {
  faceDetector
    .detect(video)
    .then(faces => {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
    })
    .catch(console.error);
}
Enter fullscreen mode Exit fullscreen mode

Now let's draw an outline for each face we find.

context.strokeStyle = '#FFFF00';
context.lineWidth = 5;
faces.forEach(face => {
  const {top, left, width, height} = face.boundingBox;
  context.beginPath();
  context.rect(left, top, width, height);
  context.stroke();
});
Enter fullscreen mode Exit fullscreen mode

And it should give us a result like this.

Detected face in JavaScript

If you have the flag enabled in Chrome.

Open Chrome, and type the following address: chrome://flags, in there enable the #enable-experimental-web-platform-features.

You should be able to try out this Codepen as well.

Browser support

This API is unfortunately not publicly available, so browser support can't be provided at this stage.
However, is a very cool one to look out for!

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion (0)

Forem Open with the Forem app