js最小化浏览器_Handtrack.js 开源:3行JS代码搞定手部动作跟踪

5c57044aec6f17de04f8ded791b55031.png

作者|Victor Dibia

译者|薛命灯

近日,GitHub 上开源了一个名为 Handtrack.js 的项目,有了它,你只需要 3 行代码就能用来检测图片中手的动作。

0f2dcc600ac45d3a1e17ed9669e990a8.gif

演示地址:https://victordibia.github.io/handtrack.js/#/

运行时:22 FPS,Macbook Pro 2018(2.5 Ghz),Chrome 浏览器。13FPS,Macbook Pro 2014(2.2GHz)。

不久之前,一个使用 TensorFlow 对象检测 API 跟踪图片中手部动作的实验结果把我震惊到了。我把训练模型和源代码开放了出来:

https://github.com/victordibia/handtracking

从那时起,它就被用来开发一些非常有趣的东西,比如:

一个可以帮助孩子进行拼写练习的工具:

https://medium.com/@drewgillson/alphabot-a-screen-less-interactive-spelling-primer-powered-by-computer-vision-cc1095bce90

一个可以识别手势的插件:

https://github.com/MrEliptik/HandPose

一个乒乓球游戏:

https://github.com/alvinwan/hand-tracking-pong

有很多人想要尝试我提供的训练模型,但无法设置好 Tensorflow(安装问题、TF 版本问题、导出图表,等等)。幸运的是,Tensorflow.js 解决了其中的一些安装和发行问题,因为它经过优化,可以在浏览器的标准化环境中运行。为此,我创建了 Handtrack.js 库:

https://github.com/victordibia/handtrack.js/

它可以让开发人员使用经过训练的手部检测模型快速创建手势交互原型。

这个库的目标是隐藏与加载模型文件相关的步骤,为用户提供有用的函数,并允许用户在没有任何 ML 经验的情况下检测图像中的手,你不需要自己训练模型。

你也无需导出任何图或已保存的模型。你可以直接在 Web 应用程序中包含 handtrack.js(详情如下),然后调用这个库提供的方法。

如何在 Web 应用程序中使用它?

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

使用 script 标签

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

在将上面的 script 标签添加到 html 页面后,就可以使用 handTrack 变量引用 handtrack.js,如下所示。

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

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

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

console.log('Predictions: ', predictions) // bbox predictions

});

});

上面的代码段将打印出通过 img 标签传入的图像的预测边框,如果换了视频或通过摄像头提交图像帧,那么就可以“跟踪”在每一帧中出现的手。

66dc7c2cf8fec0c617471ed473b392b6.gif

使用 handtrack.js 跟踪图像中的手,你可以调用 renderPredictions() 方法在 canvas 对象中绘制检测到的边框和源图像。

使用 NPM

你可以使用以下命令将 handtrack.js 作为 npm 包来安装:

npm install --save handtrackjs

下面给出了如何在 React 应用程序中导入和使用它的示例。

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);

});

});

0981736f6e53661579a07b6d33434dd6.png

Handtrack.js 的 API

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

load() 方法接受可选的模型参数,允许你控制模型的性能。这个方法以 webmodel 格式(也托管在 jsdelivr 上)加载预训练的手部检测模型。

detect() 方法接受输入源参数(img、video 或 canvas 对象)并返回图像中手部位置的边框预测结果。

const modelParams = {

flipHorizontal: true, // flip e.g for video

imageScaleFactor: 0.7, // reduce input image size .

maxNumBoxes: 20, // maximum number of boxes to detect

iouThreshold: 0.5, // ioU threshold for non-max suppression

scoreThreshold: 0.79, // confidence threshold for predictions.

}

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

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

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

console.log('Predictions: ', predictions);

});

});

预测结果格式如下:

[{

bbox: [x, y, width, height],

class: "hand

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值