Webcam face detection + blur using tracking.js

Question

I'm trying to alter a bit of code that uses js to detect and track faces in a live webcam feed. Original source: https://trackingjs.com/examples/face_camera.html

Once the face is detected, I'm trying to add a filter that will obscure or blur either the face area or the entire canvas, but I haven't figured out the code snippet or syntax that will do the trick.

window.onload = function() {
  var video = document.getElementById('video');
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  var tracker = new tracking.ObjectTracker('face');
  tracker.setInitialScale(4);
  tracker.setStepSize(2);
  tracker.setEdgesDensity(0.1);

  tracking.track('#video', tracker, { camera: true });

  tracker.on('track', function(event) {
    context.clearRect(0, 0, canvas.width, canvas.height);

    event.data.forEach(function(rect) {
      context.strokeStyle = '#a64ceb';
      context.strokeRect(rect.x, rect.y, rect.width, rect.height);
      context.font = '11px Helvetica';
      context.fillStyle = "#fff";
      context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
      context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
    });
  });
};

It seems to me like I should add something similar to either of these:

tracking.track.blur(50px, canvas.width, canvas.height, 50px);

or context.style.webkitFilter = "blur(50px)";

The only other solution I can think of is to draw a new object on the canvas, give it a blur and some transparency, and have it follow the tracker. Also at a dead end on how to implement this. Any thoughts? Current project: https://codepen.io/eremmele/project/editor/XxBGpD/

Huge thanks to anyone who can answer.

Webcam face detection + blur using tracking.js

0 Answers0