tracking.js将不同的计算机视觉算法和技术引入到浏览器环境中。通过使用现代的HTML5规范，我们使你能够做实时的颜色跟踪，人脸检测等。

github上该项目目前已经有8.6K个Star、1.4K个Fork、192个Issues，还是比较成熟的。

下面介绍下tracking.js的使用步骤。

一、下载js文件

tracking.js官方网站和github上都提供了下载入口，下载的压缩包文件包含了所有需要的js和示例代码。

• github入口：搜索eduardolundgren/tracking.js

• 官网入口：

最终下载是一个zip的压缩包，解压后目录结构是这样的：

本文示例所需js都在build目录下。

二、跟踪器 Trackers

跟踪器包含了颜色跟踪器、对象跟踪器（人脸、眼睛、嘴巴检测）、自定义跟踪器。

跟踪器代码用法结构

1.引入公共js

<script src="../build/tracking-min.js"></script>

2.定义个跟踪器类型并传入检测内容参数

var myTracker = new tracking.Tracker(options);

例如定义一个颜色跟踪器

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

3.定义检测事件监听方法（业务处理）

myTracker.on('track', function(event) {
  if (event.data.length === 0) {
      //未检测到目标
  } else {
    event.data.forEach(function(data) {
      //描绘出检测到的对象，比如检测到人脸在人脸四周画个框
    });
  }
});

4.开始检测

可以检测<canvas>, <img>、<video> 三个html标签

var trackerTask = tracking.track('#myVideo', myTracker);

第一个参数是你的图像或视频标签选择器，对应html文档类似：

<video id="myVideo" width="400" height="300" preload autoplay loop muted></video>

第二个参数是第二步定义的跟踪器变量

5.检测过程中暂停和继续检测

如果业务需要你中途暂停检测或者再次开启检测：

trackerTask.stop(); // 停止检测
trackerTask.run(); // 再次开始检测

下面演示下几种跟踪器示例，

基本都是跟结构代码一样的,假设我们已经都引入了公共的js和video标签

<script src="../build/tracking-min.js"></script>

<video id="myVideo" width="400" height="300" preload autoplay loop muted></video>

• 颜色跟踪器示例

1.定义个颜色跟踪器

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

官方默认提供了三个颜色'magenta'、'cyan'、 'yellow'，也可以进行自定义颜色，主要限制rgb三个色值，比如以下定义一个绿色的颜色：

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

2.定义检测事件监听方法

colors.on('track', function(event) {
  if (event.data.length === 0) {
    // No colors were detected in this frame.
  } else {
    event.data.forEach(function(rect) {
      // rect.x, rect.y, rect.height, rect.width, rect.color
    });
  }
});

当检测到颜色区域时会触发该事件，事件会返回坐标点、高度、宽度和颜色值。可以通过这几个值使用css将该区域用框框画出来。类似：

function(x, y, w, h, color) {
    var rect = document.createElement('div');
    document.querySelector('.demo-container').appendChild(rect);
    rect.classList.add('rect');
    rect.style.border = '2px solid ' + color;
    rect.style.width = w + 'px';
    rect.style.height = h + 'px';
    rect.style.left = (img.offsetLeft + x) + 'px';
    rect.style.top = (img.offsetTop + y) + 'px';
};

3.开始检测

tracking.track('#myVideo', colors);

• 对象跟踪器示例（人脸、眼睛、嘴巴）

1.引入对象js

官方提供了人脸、眼睛、嘴巴三种对象的js，检测相应对象时需要引入对应的js。

<script src="../build/data/face.js"></script>
<script src="../build/data/eye.js"></script>
<script src="../build/data/mouth.js"></script>

2.定义个对象跟踪器

var objects = new tracking.ObjectTracker(['face', 'eye', 'mouth']);

3.定义检测事件监听方法

objects.on('track', function(event) {
  if (event.data.length === 0) {
    // No objects were detected in this frame.
  } else {
    event.data.forEach(function(rect) {
      // rect.x, rect.y, rect.height, rect.width
    });
  }
});

跟颜色跟踪器类似，当识别到人脸、眼睛、嘴巴时会触发事件，事件会返回坐标点、高度、宽度。可以通过这几个值使用css将该区域用框框画出来。类似：

4.开始检测

tracking.track('#myVideo', objects);

你也可以使用相机

tracking.track('#myVideo',objects, { camera: true });

• 自定义跟踪器

基于tracking.js的能力构件自定义跟踪器、 比如tracking.js提供访问相机、通过画布获取每一帧的像素矩阵的能力，你只需要继承Tracker抽象即可。

1.定义跟踪器，创建构造函数并继承tracking.Tracker

var MyTracker = function() {
  MyTracker(this, 'constructor');
}
tracking.inherits(MyTracker, tracking.Tracker);

2. 实现检测方法

您需要为您的跟踪器实现track方法。它将接收当前图像(或视频帧)的像素矩阵。当跟踪完成时，代码应该调用emit方法来通过track事件发送结果

var MyTracker = function() {
  MyTracker.prototype.track = function(pixels, width, height) {
    // 检测代码写在这

    this.emit('track', {
      //结果数据
    });
  }
}

3.使用自定义跟踪器

var myTracker = new tracking.MyTracker();

myTracker.on('track', function(event) {
  // Results are inside the event
});

tracking.track('#myVideo', myTracker);

以上就是tracking.js的全部内容了，有兴趣的可以到tracking.js的官网了解更多。

希望本文能给你提供帮助，关注我，不定期发布IT技术内容。