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 相关文章推荐
JS打开图片另存为对话框实现代码
Dec 26 Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
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
php记录代码执行时间(实现代码)
2013/07/05 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
JavaScript延迟加载
2021/03/09 Javascript
javascript背投广告代码的完善
2008/04/08 Javascript
js打印纸函数代码(递归)
2010/06/18 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
在python中pandas的series合并方法
2018/11/12 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
物流专业毕业生推荐信范文
2013/11/18 职场文书
九年级化学教学反思
2014/01/28 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
创建文明学校实施方案
2014/03/11 职场文书
保护环境建议书
2014/03/12 职场文书
五年级学生评语
2014/04/22 职场文书
争先创优演讲稿
2014/09/15 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL