大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

1.什么是 Handtrack.js

A library for prototyping realtime hand detection (bounding box), directly in browser.

Handtrack.js 是一个直接在浏览器中构建实时手部检测（边界框）原型的库。 其将手部跟踪视为对象检测问题，并使用经过训练的卷积神经网络来预测图像中手部位置的边界框。

Handtrack.js 目前围绕速度、准确性和功能的优化进行了诸多升级，包括：

新的数据集管理：新的数据集（约 2000 张图像，6000 个标签）已涵盖新的手部姿势，并重点关注面向网络摄像头的用户的视角。提供诸多新检测类型：在审查开发人员迄今为止使用 handtrack.js 创建的用例（例如：游戏控制、检测面部触摸以最大程度地减少新冠病毒传播、空气吉他等）后，已经策划了一组新的手势标签，包括：手掌张开、手掌闭合、捏、指向、脸部缩小模型尺寸：Handtrack.js 现在支持多种尺寸的多个模型，例如： ssd320fpnlite、ssd640fpnlite。 大尺寸是每个模型的默认 fp32 版本，中尺寸和小尺寸分别是 fp16 和 Int8 量化版本模型准确性提升：早期测试表明新模型对于前置网络摄像头视点检测更加准确，包含面部标签还减少了早期的面部错误分类提供Javascript 库：handtrack.js 库已更新修复正确输入图像分辨率的问题，升级底层 tensorflowjs 模型提供更多自定义选项

Handtrack.js 的典型场景包括：

鼠标映射到手部运动以达到控制的目的当手和其他物体的重叠可以表示有意义的交互信号时，例如：物体的触摸或选择事件人手运动可以作为活动识别代理的场景，例如：从下棋的视频或图像中自动跟踪运动活动或者简单地计算图像或视频帧中存在多少人

目前 Handtrack.js 在 Github 通过 MIT 协议开源，有超过 3k 的 star、是一个值得关注的前端开源项目。

2.如何使用 Handtrack.js

Handtrack.js 提供了一个有用的包装器提供，允许在 Web 应用程序中构建基于手势的交互原型。 无需了解机器学习，其接收 html 图像元素（例如 img、视频、canvas 元素）并返回边界框、类名称和置信度分数的数组。

npm install --save handtrackjs

Handtrack.js 可以通过脚本标签或通过 npm 导入到应用程序中。导入后，handtrack.js 提供一个异步 load() 方法，该方法返回对象检测模型对象的 Promise。

import * as handTrack from 'handtrackjs';// 导入模块方法const img = document.getElementById('img');const model = await handTrack.load();const predictions = await model.detect(img);// detect 传入检测对象

Handtrack.js 还提供了一组库帮助器方法，例如，在视频元素上启动和停止视频播放和一些模型方法，例如：Detect、getFPS 等）。

值得一提的是，目前 handtrack.js 仍然是一个相当重的模型，并且可能在移动设备上运行时出现一些不一致的结果。

关于 Handtrack.js 的更多知识可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/victordibia/handtrack.js

https://www.annakorczak.com/post/handtrack-api

https://core-electronics.com.au/guides/hand-identification-raspberry-pi/