当前位置:首页 >> 网络编程

Handtrack.js库实现实时监测手部运动(推荐)

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

GitHub 主页

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

Handtrack.js库实现实时监测手部运动(推荐)

1、简介

Handtrack.js ,是基于 TensorFlow 对象检测 API 训练模型搭建的,能够实现通过摄像头实时监测手部运动,它的特点主要包含:

handtrack.js

Handtrack.js库实现实时监测手部运动(推荐)

2、应用场景

如果你对基于手势的交互式体验感兴趣, Handtrack.js 会很有用。用户不需要使用任何额外的传感器或硬件,就可以立即获得基于手势的交互体验。

Handtrack.js库实现实时监测手部运动(推荐)

一些相关的应用场景:

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

Handtrack.js库实现实时监测手部运动(推荐)

Handtrack.js库实现实时监测手部运动(推荐)

3、使用方法

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

3.1 使用script标签

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

<script src="/UploadFiles/2021-04-02/handtrack.min.js">

将上面的 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) : 在指定的画布上绘制边框(和源图像)。其中 predictionsdetect() 方法的结果数组。 canvas 是对渲染 predictionshtml 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...