大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
今天遇到一个非常有意思的库，即 Handsfree.js，特意分享给大家，看看是否可以结合自己的日常研发、业务支持等做一点小小的创新。话不多说，直接开始。
1.什么是 HandsfreeBuild handsfree User Experiences and add face, hand, and pose tracking to your projects in a snap ✨
Handsfree 是一个通过计算机视觉集成手势，面部表情和各种姿势识别的前端库。其核心 AI 技术用到了 tensorflow，可在浏览器上触发交互事件，比如：滚动网页，检测人脸并展示相关表情，控制桌面游戏等等，开发者还可以通过 Handsfree 与 websocket 的结合控制任意与电脑连接的设备。
官方提供的以下模型可以实时组合和重新配置：
MediaPipe Hands (2D)：每只手 21 个 2D 手部标志；同时追踪最多 4 只手；支持捏合状态、手指指针和手势TensorFlow Handpose：支持 21 个 3D 手部标记；一次只能追踪 1 只手；支持额外的助手和插件MediaPipe FaceMesh：支持 468 个 2D 人脸特征点；一次最多追踪 4 张面孔； 支持更多助手和插件MediaPipe Pose：支持具有 33 个 2D 姿势地标的全身模式；具有 25 个 2D 上身姿势标志的上半身模式TensorFlow Handpose：支持 6DOF 头部姿势；11 种面部变形和 16 种辅助状态；附带基于 “Face Pointer” 的插件2.如何使用 Handsfree开发者可以选择从 CDN 加载资源然后使用，比如下面的例子：
<head> <!-- 加载 Handsfree.js 的官方包，包含 css 和 js --> <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></head><body> <!-- 实例化Handsfree同时启用 --> <script> const handsfree = new Handsfree({hands: true}) handsfree.enablePlugins('browser') handsfree.start() </script></body>当然，也可以选择从 NPM 下载然后使用：
// 启用 Mediapipe 的 “手” 模型const handsfree = new Handsfree({hands: true})// 启动标签为 "browser" 的插件handsfree.enablePlugins('browser')// 开始追踪handsfree.start()但是，值得一提的是某些模型体积可能超过 10Mb+，加载可能需要先对较长的时间。因此，如果要自行托管模型并离线使用，可以将模型从 npm 包下载到项目的公共文件夹中，比如 PUBLIC：
// 在 WINDOWS 平台上xcopy /e node_modules\handsfree\build\lib PUBLIC// 在其他平台上cp -r node_modules/handsfree/build/lib/* PUBLIC然后按照如下方式引用：
import Handsfree from 'handsfree'const handsfree = new Handsfree({ hands: true, // Set this to your where you moved the models into assetsPath: '/PUBLIC/assets',})handsfree.enablePlugins('browser')handsfree.start()Handsfree.js 还允许开发者通过 handsfree.use(pluginName,callback) 创建各种插件，比如：
// A plugin that console logs your data on every framehandsfree.use('consoleLogger', (data) => { console.log(data.weboji.rotation, data.pose.data.faceLandmarks)})以上代码将创建一个新插件，然后可以使用 handsfree.plugin.consoleLogger 访问该插件，并将在每一帧上运行。回调存储在 handsfree.plugin.consoleLogger.onFrame 中，可以使用以下命令切换插件可用状态：
handsfree.plugin.consoleLogger.enable()handsfree.plugin.consoleLogger.disable()更多关于 Handsfree.js 的用法和原理可以参考文末资料，本文不再过多展开。
参考资料https://handsfreejs.netlify.app/#models
https://ko-fi.com/handsfreejs
