vue中使用Tracking.js实现人脸跟踪

介绍

tracking.js是一个开源的JavaScript库，用于在浏览器中实现计算机视觉功能。它支持多种类型的对象跟踪，包括颜色、面部、眼睛等。通过Tracking.js，我们可以在浏览器中轻松实现实时的人脸检测和跟踪功能。

1.在Vue.js中使用Tracking.js

在Vue.js项目中使用Tracking.js时，需要注意以下事项：

1. 安装和引入Tracking.js：

• • 通过npm安装Tracking.js：

npm install tracking

• • 在项目中引入Tracking.js和人脸数据模块：

require("tracking/build/tracking-min.js");
require("tracking/build/data/face-min.js");

2. 初始化跟踪器：

• • 确保在视频元素加载完毕后开始跟踪。

setupFaceTracking() {
  // 初始化一个人脸跟踪器
  const tracker = new tracking.ObjectTracker("face");
  
  // 设置识别的放大比例
  tracker.setInitialScale(4);
  
  // 设置步长
  tracker.setStepSize(2);
  
  // 设置边缘密度
  tracker.setEdgesDensity(0.1);
  
  // 开始跟踪视频中的人脸
  this.trackerTask = tracking.track("#video", tracker);
  
  // 监听track事件
  tracker.on("track", (event) => {
    // 多个目标时 过滤掉较小的目标
    event.data = event.data.filter((rect) => {
      return rect.width > 150 && rect.height > 150;
    });
    
    // 如果检测到人脸，处理检测结果
    if (event.data.length) {
      this.handleFaceDetection(event.data);
    }
  });
}

3. 处理检测结果、更新人脸信息：

• • 通过track事件监听器处理检测结果。
  • 在检测到人脸时，通过方法更新人脸框的位置和大小。

handleFaceDetection(data) {
  requestAnimationFrame(() => {
    data.forEach((rect) => {
      this.faceInfo.x = rect.x;
      this.faceInfo.y = rect.y;
      this.faceInfo.width = rect.width / 1.2;
      this.faceInfo.height = rect.height / 1.2;
    });
  }
}

4. requestAnimationFrame 的主要作用

1. 同步刷新频率：它会自动与显示器的刷新频率同步（通常为60Hz，即每秒60帧），从而保证动画的平滑度和流畅度。
2. 节能效率：相比于传统的 setTimeout 或 setInterval，requestAnimationFrame 会在页面不可见时自动暂停调用，以节省资源和电量。
3. 高效的动画帧处理：它允许浏览器在重绘前执行动画帧处理，确保动画帧的绘制不会卡顿，从而提升性能。

2.Tracking.js的常用方法

1. tracking.track(video, trackers, options)

• • 参数：

• • • video: 可以是一个 HTMLVideoElement，HTMLImageElement，HTMLCanvasElement 或者元素 ID。
    • trackers: 跟踪器实例或跟踪器实例数组。
    • options: 可选配置对象。

• • 描述：开始跟踪给定视频或图像元素中的对象。

tracking.track('#videoElement', tracker);

2. tracking.ObjectTracker

• • 参数：要跟踪的对象类型，如 'face'，'eye'，'mouth'，'nose'，'color'。
  • 描述：创建一个新的对象跟踪器实例。

var tracker = new tracking.ObjectTracker('face');

3. tracker.setInitialScale(scale)

• • 参数：

• • • scale: 设置初始图像缩放因子。

• • 描述：设置初始图像缩放因子。

tracker.setInitialScale(4);

4. tracker.setStepSize(step)

• • 参数：

• • • step: 设置每一步扫描的步长。

• • 描述：设置每一步扫描的步长。

tracker.setStepSize(2);

5. tracker.setEdgesDensity(density)

• • 参数：

• • • density: 设置图像中边缘的密度。

• • 描述：设置图像中边缘的密度。

tracker.setEdgesDensity(0.1);

6. tracker.on(event, callback)

• • 参数：

• • • event: 事件名称，通常为 'track'。
    • callback: 事件触发时执行的回调函数。

• • 描述：监听跟踪器事件。

tracker.on('track', function(event) {
  if (event.data.length === 0) {
    // No objects were detected
  } else {
    event.data.forEach(function(rect) {
      // Each rect contains x, y, height, and width
      console.log(rect.x, rect.y, rect.height, rect.width);
    });
  }
});

7. tracking.ColorTracker

• • 参数：颜色名称数组，如 ['magenta', 'cyan', 'yellow']。
  • 描述：创建一个新的颜色跟踪器实例。

var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

8. tracking.ColorTracker.registerColor(name, fn)

• • 参数：

• • • name: 颜色名称。
    • fn: 检测颜色的函数。

• • 描述：注册新的颜色检测函数。

tracking.ColorTracker.registerColor('green', function(r, g, b) {
  return r < 50 && g > 200 && b < 50;
});