Join me on my ML Journey from novice to expert! with some nomadic meanderings along the way.

Machine Learning

Webcam face detection in the browser

Webcam face detection in the browser

Image of an imagined face.

Important: Please make sure to allow access to your webcam for this page to work. No video data will be recorded or uploaded.

Note: For mobile phones, please turn them sideways into landscape format to get better results. This demo is optimized for desktop browsers.

This demo is pretty amazing. With just a few lines of code, you can enable your webcam and start doing face detection. The program will recognize your face and then display it on the screen. This is a great demonstration of how easy it is to get started with face recognition.

The source code

Here’s all the code it took to make this happen (credit):

<div style="text-align:center">
<video id="video" autoplay style="display:none"></video>
<canvas id="canvas" width="300px" height="200px" style="margin:0 auto"></canvas>
<script src=""></script>
<script src=""></script>
let video = document.getElementById("video");
let model;
// declare a canvas variable and get its context
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

const setupCamera = () => {
      video: { width: 300, height: 200 },
      audio: false,
    .then((stream) => {
      video.srcObject = stream;

let shown = false;
const detectFaces = async () => {
  const prediction = await model.estimateFaces(video, false);

  if (shown == false) {
    // log the prediction once to the browser console
    shown = true;

  // draw the video first
  ctx.drawImage(video, 0, 0, 300, 200);

  prediction.forEach((pred) => {
    // draw the rectangle enclosing the face
    ctx.lineWidth = "5";
    ctx.strokeStyle = "white";
    // the last two arguments are width and height
    // since blazeface returned only the coordinates, 
    // we can find the width and height by subtracting them.
      pred.bottomRight[0] - pred.topLeft[0],
      pred.bottomRight[1] - pred.topLeft[1]
    // drawing small rectangles for the face landmarks
    ctx.fillStyle = "white";
    pred.landmarks.forEach((landmark) => {
      ctx.fillRect(landmark[0], landmark[1], 5, 5);

video.addEventListener("loadeddata", async () => {
  model = await blazeface.load();
  // call detect faces every 100 milliseconds or 10 times every second
  setInterval(detectFaces, 500);

View fullsize


Go to Source
Author: Steve Digital