实时监测手部运动的 JS 库，能够实现不少有趣功能

【导语】：Handtrack.js是一个能够直接在浏览器中实现实时手部动做跟踪和检测的原型库，它是通过 Tensorflow 训练产生的开源模型，不须要用户本身训练。有了它，你只须要经过几行代码就能检测图片中手部的动做。

GitHub 主页

https://github.com/victordibi...

一、简介

Handtrack.js ，是基于 TensorFlow 对象检测 API 训练模型搭建的，可以实现经过摄像头实时监测手部运动，它的特色主要包含：

• 它可让开发人员使用通过训练的手部检测模型快速建立手势交互原型；
• 它经过为用户提供有用的函数，容许用户在没有任何 ML 经验的状况下检测图像中的手，不须要本身训练模型；
• 用户无需导出任何图或已保存的模型，能够直接在 Web 应用程序中引用 handtrack.js 库，而后调用它提供的方法。

二、应用场景

若是你对基于手势的交互式体验感兴趣，Handtrack.js会颇有用。用户不须要使用任何额外的传感器或硬件，就能够当即得到基于手势的交互体验。

一些相关的应用场景：

• 将鼠标移动映射到手部移动，达到控制的目的；
• 当手和其余物体重叠时能够表示某些有意义的交互信号（例如触碰物体或选择物体）；
• 人的手部运动能够做为某些活动识别的代理的场景（例如，自动跟踪视频或图像中下棋者的动做）， 或者简单地计算图像或视频帧中有多少我的；
• 建立演示，任何人均可以经过最少的设置轻松运行或体验这些东西。

三、使用方法

你能够直接在 script 标签中包含这个库的 URL 地址，或者使用构建工具从 npm 中导入它。

3.1 使用script标签

Handtrack.js 的最小化 js 文件目前托管在 jsdelivr 上，jsdelivr 是一个免费的开源 CDN，让你能够在 Web 应用程序中包含任何的 npm包。

<script src="https://cdn.jsdelivr.net/npm/handtrackjs/dist/handtrack.min.js"> </script>

<img id="img" src="hand.jpg"/> 
<canvas id="canvas" class="border"></canvas>

将上面的 script 标签添加到 html 页面后，就能够使用 handTrack 变量引用 handtrack.js，以下所示：

<script>
  const img = document.getElementById('img'); 
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  
  // Load the model.
  handTrack.load().then(model => {
    model.detect(img).then(predictions => {
      console.log('Predictions: ', predictions); 
    });
  });
</script>

上面的代码段将打印出经过 img 标签传入的图像的预测边框，若是换了视频或经过摄像头提交图像帧，那么就能够“跟踪”在每一帧中出现的手。

3.2 使用 NPM

你能够使用如下命令将 handtrack.js 做为 npm 包来安装：

npm install --save handtrackjs

而后，你就能够在web应用程序中导入和使用它的示例：

import * as handTrack from 'handtrackjs';

const img = document.getElementById('img');

// Load the model.
handTrack.load().then(model => {
  // detect objects in the image.
  console.log("model loaded")
  model.detect(img).then(predictions => {
    console.log('Predictions: ', predictions); 
  });
});

3.3 Handtrack.js 的 API

Handtrack.js 提供了2个主要的方法， load() 方法和 detect() 方法，分别用于加载手部检测模型和获取预测结果。

load() 方法：接收一个可选的模型参数，返回一个模型对象，经过该可选模型参数来容许用户控制模型的性能：

const modelParams = {
  flipHorizontal: true,   // flip e.g for video 
  imageScaleFactor: 0.7,  // reduce input image size for gains in speed.
  maxNumBoxes: 20,        // maximum number of boxes to detect
  iouThreshold: 0.5,      // ioU threshold for non-max suppression
  scoreThreshold: 0.79,    // confidence threshold for predictions.
}

handTrack.load(modelParams).then(model => {

});

detect() 方法：接收一个输入源参数(能够是img、video或canvas对象)，返回图像中手部位置的边框预测结果：

一个带有类名和置信度的边框数组。

model.detect(img).then(predictions => { 
        
});

预测结果格式以下：

[{
  bbox: [x, y, width, height],
  class: "hand",
  score: 0.8380282521247864
}, {
  bbox: [x, y, width, height],
  class: "hand",
  score: 0.74644153267145157
}]

Handtrack.js 还提供了其余的方法：

• model.getFPS() : 获取FPS，即每秒检测次数；
• model.renderPredictions(predictions, canvas, context, mediasource): 在指定的画布上绘制边框（和源图像）。其中predictions是 detect()方法的结果数组。canvas是对渲染predictions的html canvas对象的引用，context是canvas 2D上下文对象，mediasource是对predictions中使用的输入帧(img、视频、canvas等)的引用(首先渲染它，并在其上绘制边框)。
• model.getModelParameters(): 返回模型参数；
• model.setModelParameters(modelParams): 更新模型参数；
• dispose() : 删除模型实例；
• startVideo(video) : 在给定的视频元素上启动摄像头视频流。返回一个promise，可用于验证用户是否提供了视频权限的；
• stopVideo(video) : 中止视频流；

四、下一步

• 计算消耗大，这主要是由于在预测边界框时须要进行神经网络操做，这是后续须要改进和优化的一个点；
• 跨帧跟踪ID：实如今每一个对象进入一帧时为其分配 ID 并持续跟踪；
• 添加一些离散的姿式：例如，不仅是手，而是检测张开的手、拳）。

五、参考资料

• Handtrack.js库的源代码：https://github.com/victordibi...
• 线上Demo：https://victordibia.github.io...
• Egohands数据集：http://vision.soic.indiana.ed...

开源前哨 平常分享热门、有趣和实用的开源项目。参与维护 10万+ Star 的开源技术资源库，包括：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。