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

GitHub 主页

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

1、简介

Handtrack.js ，是基于 TensorFlow 对象检测 API 训练模型搭建的，可能实现通过摄像头实时监测手部静止，它的特点次要蕴含：

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

2、利用场景

如果你对基于手势的交互式体验感兴趣，Handtrack.js会很有用。用户不须要应用任何额定的传感器或硬件，就能够立刻取得基于手势的交互体验。

一些相干的利用场景：

  • 将鼠标挪动映射到手部挪动，达到管制的目标；
  • 当手和其余物体重叠时能够示意某些有意义的交互信号（例如触碰物体或抉择物体）；
  • 人的手部静止能够作为某些流动辨认的代理的场景（例如，主动跟踪视频或图像中下棋者的动作）， 或者简略地计算图像或视频帧中有多少集体；
  • 创立演示，任何人都能够通过起码的设置轻松运行或体验这些货色。


3、应用办法

你能够间接在 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) : 进行视频流；

4、下一步

  • 计算耗费大，这次要是因为在预测边界框时须要进行神经网络操作，这是后续须要改良和优化的一个点；
  • 跨帧跟踪ID：实现在每个对象进入一帧时为其调配 ID 并继续跟踪；
  • 增加一些离散的姿态：例如，不只是手，而是检测张开的手、拳）。

5、参考资料

  • 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 等。