tracking.js頁(yè)面人臉識(shí)別插件使用方法
tracking.js是頁(yè)面識(shí)別人臉的一個(gè)插件，首先是tracking.js的git地址
在下載完tracking.js后，我們需要一個(gè)能測(cè)試的頁(yè)面，這個(gè)頁(yè)面需要在服務(wù)器上，比如本地的localHost:8080。然后需要引入兩個(gè)檢查人臉必須的文件tracking-min.js和face-min.js。 `
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
tracking.track('#video', tracker, { camera: true });
tracker.on('track', function(event) {
context.clearRect(0, 0, canvas.width, canvas.height);
event.data.forEach(function(rect) {
context.strokeStyle = '#a64ceb';
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
context.font = '11px Helvetica';
context.fillStyle = "#fff";
context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
});
});`
上面這些事主要的人臉檢測(cè)使用代碼其中：
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
這些是設(shè)置的參數(shù)，文檔中沒(méi)有明確的說(shuō)明，暫時(shí)不知道用處?？梢酝ㄟ^(guò)tracker.stop()來(lái)停止頁(yè)面對(duì)人臉的監(jiān)聽(tīng)。
如果是要監(jiān)聽(tīng)攝像頭的人像就必須判斷瀏覽器是否支持接入攝像頭，其中最主要的方法是navigator.getUserMedia，具體的說(shuō)明參考這里。在獲取攝像頭之后就可以監(jiān)聽(tīng)攝像頭，判斷是否有人臉，在track事件中就可以截取需要的圖片。
具體的截取方法：
var canvas = $('canvas'),
context = canvas.getContext('2d'),
video = $('video');
context.drawImage(video, 0, 0, 200, 150);
var snapData = canvas.toDataURL('image/png'),
var imgSrc = "data:image/png;" + snapData;
imgSrc 可以直接用于頁(yè)面圖片的顯示。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)1,2,3,5數(shù)字按照概率生成
這篇文章主要介紹了js實(shí)現(xiàn)1,2,3,5數(shù)字按照概率生成,需要的朋友可以參考下2017-09-09
下面小編就為大家分享一篇基于webpack.config.js 參數(shù)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Typescript 實(shí)現(xiàn)函數(shù)重載的方式
函數(shù)重載簡(jiǎn)單點(diǎn)說(shuō)就是,同一個(gè)函數(shù)的不同實(shí)現(xiàn)方式,根據(jù)傳入的參數(shù)的類(lèi)型或者長(zhǎng)度,決定最終調(diào)用哪一個(gè)實(shí)現(xiàn),本文給大家介紹了Typescript 實(shí)現(xiàn)函數(shù)重載的方式,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了原生js實(shí)現(xiàn)圖片輪播特效，適合用于商品展示，實(shí)現(xiàn)最簡(jiǎn)單的廣告輪播效果，感興趣的小伙伴們可以參考一下2015-12-12
javascript 星級(jí)評(píng)分效果(手寫(xiě))
今天上午抽空隨手寫(xiě)了個(gè)星級(jí)評(píng)分的效果，給大家分享下。由于水平有限，如有問(wèn)題請(qǐng)指出;首先要準(zhǔn)備一張星星的圖片，灰色是默認(rèn)狀態(tài)，黃色是選擇狀態(tài)，需要的朋友可以參考下2012-12-12
JavaScript文本特效實(shí)例小結(jié)【3個(gè)示例】
這篇文章主要介紹了JavaScript文本特效,結(jié)合3個(gè)實(shí)例分析了javascript基于定時(shí)器的文字動(dòng)態(tài)操作特效相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12
js實(shí)現(xiàn)仿MSN帶關(guān)閉功能的右下角彈窗代碼
這篇文章主要介紹了js實(shí)現(xiàn)仿MSN帶關(guān)閉功能的右下角彈窗代碼,涉及javascript操作頁(yè)面元素的布局及屬性的動(dòng)態(tài)變換技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
js數(shù)值和和字符串進(jìn)行轉(zhuǎn)換時(shí)可以對(duì)不同進(jìn)制進(jìn)行操作
這篇文章主要介紹了js數(shù)值和和字符串進(jìn)行轉(zhuǎn)換時(shí)可以對(duì)不同進(jìn)制進(jìn)行操作,需要的朋友可以參考下2014-03-03
當(dāng)編輯某條數(shù)據(jù)時(shí)，再回過(guò)頭來(lái)進(jìn)行編輯，會(huì)發(fā)現(xiàn)，里面的數(shù)據(jù)和沒(méi)有編輯以前是一樣的，這就是ie緩存的問(wèn)題，下面是一個(gè)不錯(cuò)的解決方法2014-08-08
用js來(lái)生成隨機(jī)彩票號(hào)碼清單...2007-02-02