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