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面向对象编程浅析
Aug 28 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 Javascript
Element Steps步骤条的使用方法
Jul 26 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
十天学会php之第十天
2006/10/09 PHP
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
一些常用的Javascript函数
2006/12/22 Javascript
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
司机职责范本
2014/03/08 职场文书
重阳节活动主持词
2015/07/04 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android