headtrackr：一個(gè)頭部/臉部追蹤的JavaScript庫(kù)
headtrackr 是一個(gè)用于實(shí)時(shí)臉部追蹤和頭部追蹤的 JS 庫(kù)。通過(guò)網(wǎng)絡(luò)攝像頭和 webRTC/getUserMedia 標(biāo)準(zhǔn)，在相關(guān)計(jì)算機(jī)屏幕上追蹤用戶(hù)頭部的位置。
如果你要看示例，可觀看這個(gè)視頻。或者拿有攝像頭、瀏覽器支持 webRTC/getUserMedia 的筆記本，試試下面的例子。（你所使用的瀏覽器是否支持 webRTC/getUserMedia，請(qǐng)看這個(gè)網(wǎng)頁(yè)。）
示例
使用方法
下載 headtrackr.js 庫(kù)，在代碼載入。
- <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>
當(dāng)頭部追蹤啟動(dòng)后，會(huì)生成兩個(gè)事件 headtrackingEvent 和 facetrackingEvent。 headtrackingEvent 事件有3個(gè)屬性： x、 y、 z，表示用戶(hù)頭部在屏幕中心的估測(cè)位置，以厘米為單位。facetrackingEvent 事件有5個(gè)屬性： x、 y、 width、height、angle，表示用戶(hù)臉部的估測(cè)位置，和在視頻中的大小。
你也可以創(chuàng)建一個(gè)事件監(jiān)聽(tīng)器來(lái)處理這些事件，或者如果你在用three.js，可以嘗試用其中的 pre-packaged controllers 做偽3D效果。
如果想知道更多使用方法，請(qǐng)查看以上事例的源碼。Reference - Overview
許可
Headtrackr.js 遵循 MIT License，其中來(lái)自 Liu Liu 和 Benjamin Jung 貢獻(xiàn)的代碼分別遵循 BSD-3 License 和 MIT License respectively。
英文原文：headtrackr
