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

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

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

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

示例

[[105511]] [[105510]]

 [[105512]] [[105513]]

 

使用方法

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

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

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

  1. <canvas id="inputCanvas" width="320" height="240" style="display:none"></canvas>  
  2. <video id="inputVideo" autoplay loop></video>  
  3. <script type="text/javascript">  
  4.   var videoInput = document.getElementById('inputVideo');  
  5.   var canvasInput = document.getElementById('inputCanvas');  
  6.    
  7.   var htracker = new headtrackr.Tracker();  
  8.   htracker.init(videoInput, canvasInput);  
  9.   htracker.start();  
  10. </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/

责任编辑:林师授 来源: 伯乐在线
相关推荐

2014-02-14 09:37:01

JavascriptDOM

2021-05-19 22:23:56

PythonJavaScript数据

2012-07-17 17:05:55

JavaScript

2023-12-07 09:44:29

2017-05-02 11:30:44

JavaScript数组惰性求值库

2015-03-10 11:21:44

JavaScript组JavaScript

2018-09-18 10:11:21

前端vue.jsjavascript

2009-06-22 13:43:01

F#函数式编程

2024-02-19 08:26:59

wxPython界面库开发

2020-07-28 16:50:18

Javascriptkute.js前端

2020-12-17 12:31:16

javascriptDAOlocalStorag

2021-02-05 16:03:48

JavaScript游戏学习前端

2015-05-25 15:06:28

JavaScript函数式编程

2022-09-28 10:35:31

JavaScript代码内存泄漏

2023-03-01 10:19:23

2020-09-02 07:22:17

JavaScript插件框架

2011-11-03 09:13:27

JavaScript

2020-12-10 08:39:28

JNI 路由数据

2020-06-10 08:23:44

JavaScript开发Web

2023-11-28 14:22:54

Python音频
点赞
收藏

51CTO技术栈公众号