Handsfree.js - 一款基于网页的人脸指针
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
Liquid 错误：内部
Handsfree.js 是我正在开发的一个小型封装库，它基于 Web 计算机视觉库，旨在帮助您实现免提网页交互。目前它仅支持通过Jeeliz Weboji进行头部追踪，但我计划在接下来的 100 天代码开发周期内添加眼动追踪、手部追踪、语音识别和全身姿态估计功能。
我还计划添加对P5.js、Babylon.js、A-Frame等流行库的集成！
但在这篇文章中，我将只重点介绍如何启动一个简单的 Handsfree.js 项目，这涉及到三个步骤：
- 需要依赖项
- 创建
handsfree实例 - 添加插件（在每个视频推理帧上运行的回调函数）
最后，你会看到一个类似下图的红色指针：
Liquid 错误：内部
添加免提指针
因为所有内容都已打包好，您只需将 Handsfree.js JavaScript 和样式表包含到您的 DOM 中即可：
<!-- Require dependencies -->
<link rel="stylesheet" href="https://unpkg.com/handsfree@6.0.1/dist/handsfreejs/handsfree.css">
<script src="https://unpkg.com/handsfree@6.0.1/dist/handsfreejs/handsfree.js"></script>
这会将Handsfree类添加到您的页面，以及指针的基本样式。下一步是创建以下实例Handsfree：
const config = {}
const handsfree = new Handsfree(config)
如果您计划使用多台摄像头，则每台摄像头都需要一个实例，但每个实例可以跟踪多个用户。有关默认值和其他可用设置，请参阅配置对象的文档。
就是这样！要开始和停止跟踪，请使用handsfree.start()和handsfree.stop()。
添加功能并使用指针值
在每一帧中，您的handsfree实例将具有多个包含有用信息的属性：
// The x coordinate of the pointer on the screen
handsfee.head.pointer.x
// The y coordinate of the pointer on the screen (from 0 at the top)
handsfee.head.pointer.y
// The pointer element
handsfree.head.pointer.$el
// The pointer state ("", "mouseDown", "mouseDrag", "mouseUp")
handsfree.head.pointer.state
// The head position [x, y, scale]
handsfree.head.translation
// The head rotation [pitch, yaw, roll]
handsfree.head.rotation
// Head Morphs (how raised the eyebrows are, how smiley your smiling to each side, etc)
// @see https://github.com/handsfreejs/handsfree/wiki/Head
handsfree.head.morphs
该类Handsfree有一个用于所有实例的全局循环，您可以使用以下方法对其进行挂钩use：
// Create a simple plugin that displays pointer values on every frame
Handsfree.use('consoleLogger', (instance) => {
console.log(instance.head.morphs)
})
// Same plugin, but with destructuring
Handsfree.use('consoleLogger', ({head}) => {
console.log(head.morphs)
})
这些被称为插件，其中"consoleLogger"是插件的名称，instance是运行该插件的免提实例（handsfree = new Handsfree()）。添加多个同名插件会覆盖之前的插件，要禁用插件，可以调用handsfree.stop()。
Handsfree.js 自带一些插件——“head.click”和“head.vertScroll”——它们添加了点击功能（带有微笑手势）和滚动功能，就像这条推文中展示的那样：
Liquid 错误：内部
一个完整的例子
<!DOCTYPE html>
<head>
<!-- Require dependencies -->
<link rel="stylesheet" href="https://unpkg.com/handsfree@6.0.1/dist/handsfreejs/handsfree.css">
<script src="https://unpkg.com/handsfree@6.0.1/dist/handsfreejs/handsfree.js"></script>
<style>
button {font-size: 24px; padding: 20px}
</style>
</head>
<body>
<!-- Let's always ask the user to start -->
<button onclick="handsfree.start()">Start Webcam</button>
<button onclick="handsfree.stop()">Stop Webcam</button>
<script>
// Create a new instance. Use one instance for each camera
const handsfree = new Handsfree({})
// Create a simple plugin that displays pointer values on every frame
Handsfree.use('consoleLogger', ({head}) => {
console.log(head.rotation)
})
</script>
</body>
后续步骤
希望这篇文章能让你对 Handsfree.js 有一个良好的入门了解。本文介绍了如何设置一个基本的指针，后续文章我们将探讨以下内容：
- 如何使用头部变形（眉毛、微笑、亲吻脸等等）
- 获取用户头部姿态（偏航角、俯仰角、滚转角）
- 支持多人游戏
- 复杂插件
- 与常用框架集成
- 以及更多
如果你想关注我的“100天代码挑战”，请在Twitter上关注我：@HeyOzRamos
。感谢阅读！ Oz
更新
- 11/9 - 新增了一些属性的引用：
handsfree.head.rotation，handsfree.head.morphs。新文档位于：https://github.com/handsfreejs/handsfree/wiki - 11/23 - 更新以反映新的 v6 API