龙空技术网

只要三行代码:实时追踪你的手,有浏览器就够了| Demo·代码

量子位 319

前言:

而今同学们对“浏览器看代码”都比较关心,大家都想要分析一些“浏览器看代码”的相关文章。那么小编同时在网上网罗了一些关于“浏览器看代码””的相关文章,希望姐妹们能喜欢,各位老铁们快快来了解一下吧!

栗子 发自 凹非寺

量子位 报道 | 公众号 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=""> </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 predictions5 });6 });

上面这几句代码,是给手加了边框。只要提交每一帧视频,就可以追踪里面的手了,不论是摄像头实时拍摄的,还是已经拍好的视频。

第二种方法,是把这个库当做一个NPM包来安装:

1 npm install --save handtrackjs

然后,从NPM导入就可以了。

Victor说,大家可以用这个方法,来开发自己喜欢的应用。比如,做个游戏:

One More Thing

这个模型是训练好了。

但Victor说,也不是不让大家训练。

还说,想自己养成一只实时手部追踪模型的同学们,可以参照这个项目 (600星) :

最后,送你Handtrack.js库的源代码:

线上Demo传送门:

Egohands数据集:

— 完 —

诚挚招聘

量子位正在招募编辑/记者,工作地点在北京中关村。期待有才气、有热情的同学加入我们!相关细节,请在量子位公众号(QbitAI)对话界面,回复“招聘”两个字。

量子位 QbitAI · 头条号签约作者

վ'ᴗ' ի 追踪AI技术和产品新动态

标签: #浏览器看代码