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

本文作者系360奇舞团前端开发工程师

一 介绍

Handsfree是一个通过计算机视觉集成手势，面部表情和各种姿势识别的前端库。其核心ai技术用到了tensorflow，可在浏览器上触发交互事件，比如滚动网页，检测人脸并展示相关表情，控制桌面游戏。也可以通过websocket接口控制任意与电脑连接的设备。

原来这个库有详细的文档和相关代码示例，但不清楚为什么最近都找不到了，作者也很多年没有更新了，这个库使用起来比较简单，所以抽时间整理下，也有相关其他库可替代，比如Handtrack.js，用来检测人手部动作。

官网截图

二 使用方法

初始化

1. 在 DOM 中包含 Handsfree.js JavaScript 和样式表即可。

   <link rel="stylesheet" href="https://unpkg.com/handsfree@8.5.1/build/lib/assets/handsfree.css" />
    <script src="https://unpkg.com/handsfree@8.5.1/build/lib/handsfree.js"></script>

   引用后会将Handsfree类以及指针的基本样式添加到页面中。下一步是创建一个实例Handsfree：

   const config = {
     showDebug: true,
     hands: true
   }
   const handsfree = new Handsfree(config)
   handsfree.start()

1. 使用npm

   npm i handsfree
   handsfree =