headtrackr 是一個用于實時臉部追蹤和頭部追蹤的 JS 庫。通過網(wǎng)絡(luò)攝像頭和 webRTC/getUserMedia 標準，在相關(guān)計算機屏幕上追蹤用戶頭部的位置。

如果你要看示例，可觀看這個視頻。或者拿有攝像頭、瀏覽器支持 webRTC/getUserMedia 的筆記本，試試下面的例子。（你所使用的瀏覽器是否支持 webRTC/getUserMedia，請看這個網(wǎng)頁。）

示例

[[105511]] [[105510]]

 [[105512]] [[105513]]

使用方法

下載 headtrackr.js 庫，在代碼載入。

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

下面代碼，video 元素將用于 mediastream，canvas元素用于復(fù)制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，表示用戶臉部的估測位置，和在視頻中的大小。

你也可以創(chuàng)建一個事件監(jiān)聽器來處理這些事件，或者如果你在用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/