Question

我试图改变一些代码，这些代码使用js来检测和跟踪实时网络摄像头Feed中的面部。原始来源：https://trackingjs.com/examples/face_camera.html

一旦检测到脸部，我就会尝试添加一个会遮盖或模糊脸部区域或整个画布的滤镜，但我还没有弄清楚会做的代码片段或语法诀窍。

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

在我看来，我应该添加类似于以下任何一种的东西：

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

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

我能想到的唯一其他解决方案是在画布上绘制一个新对象，给它一个模糊和一些透明度，让它跟随跟踪器。关于如何实现这一点也处于死胡同。有什么想法吗？当前项目：https://codepen.io/eremmele/project/editor/XxBGpD/

非常感谢能够回答的任何人。

使用tracking.js进行网络摄像头人脸检测+模糊

0 个答案: