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

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

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

一、下载js文件

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

github入口：搜索eduardolundgren/tracking.js

github入口eduardolundgren/tracking.js

官网入口：

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.开始检测

可以检测

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的官网了解更多。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/12891.html