【导语】: Handtrack.js
是一个可以直接在浏览器中实现实时手部动作跟踪和检测的原型库,它是经过 Tensorflow 训练产生的开源模型,不需要用户自己训练。有了它,你只需要通过几行代码就能检测图片中手部的动作。
GitHub 主页
https://github.com/victordibi...
1、简介
Handtrack.js
,是基于 TensorFlow
对象检测 API 训练模型搭建的,能够实现通过摄像头实时监测手部运动,它的特点主要包含:
handtrack.js
2、应用场景
如果你对基于手势的交互式体验感兴趣, 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)
: 在指定的画布上绘制边框(和源图像)。其中predictions
是detect()
方法的结果数组。canvas
是对渲染predictions
的html 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...
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]