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


Posted in Javascript onFebruary 08, 2021

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

GitHub 主页

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

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包。



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

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

上面的代码段将打印出通过 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/victordibia/handtrack.js

线上Demo: https://victordibia.github.io/handtrack.js

Egohands数据集: http://vision.soic.indiana.edu/projects/egohands

到此这篇关于Handtrack.js库实现实时监测手部运动(推荐)的文章就介绍到这了,更多相关监测手部运动的 JS 库内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用javascript实现点击链接弹出"图片另存为"而不是直接打开
Aug 15 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
js 执行上下文和作用域的相关总结
Feb 08 #Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 #Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 #Javascript
原生js 实现表单验证功能
Feb 08 #Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 #Javascript
JavaScript实现点击出现子菜单效果
Feb 08 #Javascript
深入理解javascript中的this
Feb 08 #Javascript
You might like
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
一个简易需要注册的留言版程序
2006/10/09 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
详解ES6中的let命令
2020/04/05 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
python计算文本文件行数的方法
2015/07/06 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
Python3 批量扫描端口的例子
2019/07/25 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
python的faker库用法
2019/11/28 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
python3中数组逆序输出方法
2020/12/01 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
化工实习心得体会
2014/09/09 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS