headtrackr：一个头部/脸部追踪的JavaScript库

headtrackr 是一个用于实时脸部追踪和头部追踪的 JS 库。通过网络摄像头和  webRTC/ getUserMedia 标准，在相关计算机屏幕上追踪用户头部的位置。

如果你要看示例，可观看这个 视频。或者拿有摄像头、 浏览器支持 webRTC/getUserMedia 的笔记本，试试下面的例子。 （你所使用的浏览器是否支持 webRTC/getUserMedia，请看这个 网页。）

示例

使用方法

下载  headtrackr.js 库，在代码载入。

<script src="js/headtrackr.js"></script>

下面代码，video 元素将用于 mediastream，canvas元素用于复制videoframes。

<canvas id="inputCanvas" width="320" height="240" style="display:none"></canvas>
<video id="inputVideo" autoplay loop></video>
<script type="text/javascript">
  var videoInput = document.getElementById('inputVideo');
  var canvasInput = document.getElementById('inputCanvas');

  var htracker = new headtrackr.Tracker();
  htracker.init(videoInput, canvasInput);
  htracker.start();
</script>

当头部追踪启动后，会生成两个事件 headtrackingEvent 和 facetrackingEvent。headtrackingEvent 事件有3个属性： x、 y、 z，表示用户头部在屏幕中心的估测位置，以厘米为单位。facetrackingEvent 事件有5个属性： x、 y、 width、height、angle，表示用户脸部的估测位置，和在视频中的大小。

你也可以创建一个事件监听器来处理这些事件，或者如果你在用 three.js，可以尝试用其中的 pre-packaged controllers 做伪3D效果。

如果想知道更多使用方法，请查看以上事例的源码。 Reference -  Overview

许可

Headtrackr.js 遵循  MIT License，其中来自   Liu Liu 和 Benjamin Jung 贡献的代码分别遵循  BSD-3 License 和  MIT License respectively。

英文原文： headtrackr，编译： 伯乐在线

译文链接： http://blog.jobbole.com/31213/

 【如需转载，请在正文中标注并保留原文链接、译文链接和译者等信息，谢谢合作！】

相关文章

• 用Chrome开发者工具做JavaScript性能分析
• 简讯：Amazon拥抱Node.js
• 寻找更好的Javascript单元测试工具
• JavaScript开发规范要求
• Testacular：Google开源的JavaScript测试执行过程管理工具
• 测试：你自认为理解了JavaScript？
• 开始使用Web Workers
• 四种 JavaScript 客户端 MVC 框架综述
• Javascript模块化编程（三）：require.js的用法
• 构建web前端异常监控系统–FdSafe