三行代码实时追踪你的手，只要有浏览器就够了 | Demo·代码
一位叫做Victor Dibia的程序猿说，“三行代码”就能实时追踪你的手，只要有个浏览器。
栗子 发自 凹非寺
量子位 报道 | 公众号 QbitAI
“Are You OK？”
“O！K！”
人脸不管做了多么一言难尽的表情，五官也不太会四处乱跑。
手就不一样了，手势百媚千娇，镜头看到的画面就百媚千娇。
所以，AI怎么识别手呢？
一位叫做Victor Dibia的程序猿说，“三行代码”就能实时追踪你的手，只要有个浏览器。
你还可以用手在屏幕上涂鸦，成为实至名归的灵魂画“手”：
Victor说，只要召唤出他的Handtrack.js库，模型便可以在网页上跑起来。
他还提供了线上Demo给大家玩耍。
十魔乱舞
进了Demo，按下开始检测的按钮，打开摄像头，就可以放飞自我了。
在下的手不甚优美，但还是忍不住乱舞了好一阵子。
手指自由挥舞，边框就敏捷地跟随。
除了随性活动手指之外，还尝试了一下狼人夜间的战术交流：
翻译一下：你，起跳预言家，给8号发个查杀。
(作为一个菜鸡玩家，通常夜里是轮不到我分配工作的，此处纯属借机过瘾。)
书归正传，手势频繁变换，AI依然紧追不舍；
除了打叉叉的时候，只识别了一只手。也许是因为手的侧面朝着屏幕，面积小，不容易识别吧。
如果你伸了两只手，AI却画了三个边框，可以调整一下左边的滑动条：
这是置信阈值 (Confidence Threshold) ，默认0.7，分值高于0.7就会认定是手，显示出边框；如果调高到0.8，那些得分0.7的疑似人手，就不会显示边框了。
除此之外，Demo也有涂鸦功能：
鉴于在下绘画功力有限，略去动态展示，大家可以自己去画一波。
模型如何食用？
Handtrack.js库，是程序猿用TensorFlow.js搭起来的。
里面的模型是用Egohands数据集养成，4800张人手的图片，背景有室内也有户外。
有了它，就不用自己训练模型了。直接拿来用，方法有两种：
第一种方法是在脚本标签 (Script Tag) 里，填上它的URL：
1<script src="https://cdn.jsdelivr.net/npm/handtrackjs/dist/handtrack.min.js"> </script>
把脚本标签添加到html页面之后，就可以用handTrack变量来引出这个库了：
1 const img = document.getElementById('img');
2 handTrack.load().then(model => {
3 model.detect(img).then(predictions => {
4 console.log('Predictions: ', predictions) // bbox predictions
5 });
6 });
上面这几句代码，是给手加了边框。只要提交每一帧视频，就可以追踪里面的手了，不论是摄像头实时拍摄的，还是已经拍好的视频。
第二种方法，是把这个库当做一个NPM包来安装：
1 npm install --save handtrackjs
然后，从NPM导入就可以了。
Victor说，大家可以用这个方法，来开发自己喜欢的应用。比如，做个游戏：
One More Thing
这个模型是训练好了。
但Victor说，也不是不让大家训练。
还说，想自己养成一只实时手部追踪模型的同学们，可以参照这个项目 (600星) ：
https://github.com/victordibia/handtracking
最后，送你Handtrack.js库的源代码：
https://github.com/victordibia/handtrack.js
线上Demo传送门：
https://victordibia.github.io/handtrack.js/
Egohands数据集：
EgoHands: A Dataset for Hands in Complex Egocentric Interactions
- 马云正式卸任后，阿里巴巴开盘跌0.87%2019-09-10
- AI独角兽云知声，已完成一期科创板IPO辅导2019-10-17
- 亚马逊在华拓展云计算团队，挑战阿里巴巴和腾讯2019-10-16
- IDC：今年上半年中国公有云服务市场规模达54.2亿美元2019-11-07
相关阅读
