了解下handsfree.js-集成手势面部表情的前端库

见贤思齐

本文作者系360奇舞团前端开发工程师一 介绍Handsfree是一个通过计算机视觉集成手势，面部表情和各种姿势识别的前端库。其核心ai技术用到了tensorflow，可在浏览器上触发交互事件，比如滚动网页，检测人脸并展示相关表情，控制桌面游戏。也可以通过websocket接口控制任意与电脑连接的设备。原来这个库有详细的文档和相关代码示例，但不清楚为什么最近都找不到了，作者也很多年没有更新了，这个库使用起来比较简单，所以抽时间整理下，也有相关其他库可替代，比如Handtrack.js，用来检测人手部动作。官网截图二 使用方法初始化在 DOM 中包含 Handsfree.js JavaScript 和样式表即可。引用后会将Handsfree类以及指针的基本样式添加到页面中。下一步是创建一个实例Handsfree：constconfig={showDebug:true,hands:true}consthandsfree=newHandsfree(config)handsfree.start()使用npmnpmihandsfreehandsfree=newHandsfree({showDebug:true,hands:{enabled:true}})handsfree.start()Handsfree.js 提供了几种方法。两个主要的方法是 start() 和 stop()，分别用于加载检测模型和获取预测结果。handsfree可添加插件，例如下面的 consoleLogger，可打印instance实例，获取很多有用信息的属性。handsfree.start()handsfree.use('consoleLogger',(instance)=>{console.log(instance.head.pointer.x)console.log(instance.head.pointer.y)})元素类名当页面状态发生变化的时候，body标签会自动加上class类名，或者加上显隐状态handsfree-show-when-stoppedhandsfree-hide-when-loading//默认隐藏loading,没有开启时展示开始按钮handsfree-show-when-startedhandsfree-hide-when-loading//默认隐藏loading,当开始运行时展示停止按钮三 代码示例可复制代码在电脑跑下看看效果，开启摄像头权限后，用手捏住上下滑动即可滑动对应的dom节点背景图。StartHandTrackingLoading...StopHandsfree Pinchfingersanddragtoscrolltheareaunderthepointers. 滚动页面.gif四 局限性浏览器是单线程的：所以必须确保预测操作不会阻塞 UI 线程。每个预测可能需要 50 到 150 毫秒，所以用户会注意到这个延迟。逐帧跟踪手部动作：如果想要跨帧识别手势，需要编写额外的代码来推断手在进入、移动和离开连续帧时的 ID。不正确的预测：偶尔会出现不正确的预测（有时候会将脸检测为手）或者同时捏住三根手指的时候无法正确判断。而且不同的摄像头和光线条件都需要不同的模型参数设置（尤其是置信度阈值）才能获得良好的检测效果。原文链接：https://juejin.cn/post/7319674466169159715-END-关于奇舞团奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。