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

标签: 程序员 资讯 headtrackr Javascript | 发表时间:2012-12-12 00:22 | 作者:
出处:http://blog.jobbole.com

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

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

 

示例

facetracking   sprites

  facekat   targets

 

使用方法

下载  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/

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

 

相关文章

相关 [headtrackr 头部 脸部] 推荐:

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

- - 博客 - 伯乐在线
headtrackr 是一个用于实时脸部追踪和头部追踪的 JS 库. 通过网络摄像头和  webRTC/ getUserMedia 标准,在相关计算机屏幕上追踪用户头部的位置. 如果你要看示例,可观看这个 视频. 或者拿有摄像头、 浏览器支持 webRTC/getUserMedia 的笔记本,试试下面的例子.

HTTP头部详解

- - CSDN博客推荐文章
HTTP(HyperTextTransferProtocol)是超文本传输协议的缩写,它用于传送WWW方式的数据,关于HTTP 协议的详细内容请参考RFC2616. HTTP协议采用了请求/响应模型. 客户端向服务器发送一个请求,请求头包含请求的方法、URI、协议版本、以及包含请求修饰符、客户信息和内容的类似于MIME的消息结构.

当你与家人的脸部融合

- Zoe - 玩意儿
来自加拿大摄影师 Ulric Collette 创造的 Genetic Portraits 系列作品,由两个家庭成员的脸部融合在一起的样子,让你去看到DNA之间的相似性和差异,很有趣的作品,上图是父子,56岁和29岁的合体,更多作品可以点此查看. 本文原始链接:http://www.cngadget.cn/genetic-portraits.html.

Android Ice Cream Sandwich 新增识别脸部解锁功能 -- Face Unlock

- kxxoling - Engadget 中国版
Ice Cream Sandwich 的其中一个新功能就是 -- Face Unlock. 它利用脸部辨识技术进行有关解锁的工作,只是 Google 的 Matias Durate 在现场进行示范时出了一点问题,手机无法辨识主人,未能进行解锁,但这可能只是一时的问题,我们待会动手玩的时候,会多作尝试.

HTTP/2 头部压缩技术介绍

- - JerryQu 的小站
我们知道,HTTP/2 协议由两个 RFC 组成:一个是 RFC 7540,描述了 HTTP/2 协议本身;一个是 RFC 7541,描述了 HTTP/2 协议中使用的头部压缩技术. 本文将通过实际案例带领大家详细地认识 HTTP/2 头部压缩这门技术. 在 HTTP/1 中,HTTP 请求和响应都是由「状态行、请求 / 响应头部、消息主体」三部分组成.

【外刊IT评论网】神奇的实时脸部替换技术[视频演示]

- ndv - 外刊IT评论网
西班牙艺术家阿托罗-卡斯特罗(Arturo Castro)研发出的这种实时脸部替换技术能够实时替换摄像头捕捉到的人物的脸部显示图像,把它替换其它人的模样,而且你的脸部表情和动作都能保留. 这套系统采用的是开源C++框架,程序使用Jason Saragih的脸部跟踪 c++ 类库构造出匹配人的眼睛、鼻子、嘴巴等面部特征的网格模型.

示威老兵遭警方击中头部

- sec314 - Solidot
playfish 写道 "来自卫报、路透社等媒体的报导,美国加州奥克兰市(Oakland, California),警方向“占领奥克兰/Occupy Oakland”的示威人群投掷催泪瓦斯并用橡皮子弹开枪射击. 曾两次在伊拉克服役的海军陆战队员、老兵Scott Olsen(24岁)被一枚催泪瓦斯弹击中头部,目前虽然伤势严重但情况稳定.

[视频]想被围观吗?街头惊现以iPad为头部的女孩

- Fox - cnBeta.COM
感谢MeeGo>Mango的投递. 近日,一位网友用4个IPAD为自己搭建了一个头盔. 这个头盔以4个方向为视角实时摄像,仿佛就是自己真实的头部一般. 更有趣的是,她还以这样的造型出现在了纽约布莱恩特公园,引起不少人的好奇,更有路人拿起相机拍照. 我们不得不承认,这的确是一个吸引众人眼球的好方法.

“黑暗科学事件”盘点:活猴子头部移植手术

- Frankenstein - cnBeta.COM
目前《探索频道》最新一期节目“黑暗事件”,披露呈现了历史上在正确和错误、功与非之间徘徊的科学故事. 据国外媒体报道,科学,时常令人感到惊奇,但它并非一直完美. 事实上,许多科学都有黑暗的一面. 目前《探索频道》最新一期节目“黑暗事件”,披露呈现了历史上在正确和错误、功与非之间徘徊的科学故事,以下是科学史上“最黑暗的事件”.

堕胎的真相:孩子在子宫内挣扎,但是无 法反抗抽吸器,于是头部被撕掉,尸体被肢解,头部被压碎,然后逐块 被吸走

- cheng - 牛博山寨 编辑推荐
下面的文章将告诉你堕胎的真相.. 一定要教育自己的男人带套,把这类文章让自己的男人也了解,读一读, 让他了解堕胎带给女性的痛苦,不要让他只认为是一个他不痛不痒的常规小手术--当你无所谓时, 他也无所谓了. 1刻快乐,换来的是你在手术台上死一次. 美国,英国,法国,意大利,葡萄牙,瑞典,瑞士,俄国,阿根廷,葡萄牙,爱尔兰,肯尼亚,苏格兰.