tracking.js頁面識別人臉插件使用方法教程
文章主要為大家詳細介紹了tracking.js頁面識別人臉插件使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下tracking.js是頁面識別人臉的一個插件,首先是tracking.js的g...
tracking.js是頁面識別人臉的一個插件,首先是tracking.js的git地址
在下載完tracking.js后,我們需要一個能測試的頁面,這個頁面需要在服務器上,比如本地的localHost:8080。然后需要引入兩個檢查人臉必須的文件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);
});
});`
上面這些事主要的人臉檢測使用代碼其中:
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
這些是設置的參數,文檔中沒有明確的說明,暫時不知道用處??梢酝ㄟ^tracker.stop()來停止頁面對人臉的監(jiān)聽。
如果是要監(jiān)聽攝像頭的人像就必須判斷瀏覽器是否支持接入攝像頭,其中最主要的方法是navigator.getUserMedia,具體的說明參考這里。在獲取攝像頭之后就可以監(jiān)聽攝像頭,判斷是否有人臉,在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 可以直接用于頁面圖片的顯示。
以上就是本文的全部內容,希望對大家的學習有所幫助。
JavaScript圖片文字識別(OCR)插件Ocrad.js教程
文章主要為大家詳細介紹了圖片文字識別(OCR)插件Ocrad.js教程,具有一定的參考價值,感興趣的小伙伴們可以參考一下Ocrad.js 相當于是 Ocrad 項目的純 JavaScript 版本,使用 Emscri...
Javascript類庫:vue.js中的vue-resource示例詳解
Vue與后臺Api進行交互通常是利用vue-resource來實現的,本質上vue-resource是通過http來完成AJAX請求相應的。這篇文章主要介紹了Vue中的vue-resource示例詳解,需要的朋友可以...
javascript類庫:element ui table 增加篩選的方法示例
文章主要介紹了element ui table 增加篩選的方法示例,詳細的介紹了如何添加規(guī)則內容,具有一定的參考價值,感興趣的小伙伴們可以參考一下網上大部分都可以增加篩選功能,但沒有找...
能夠識別人臉位置的智能風扇誕生:自動送風
程序員應該如何度過炎炎夏日呢?日前一位名為德文·拉克洛斯(DevinLaCrosse)的程序員給出了答案。最近拉克洛斯公布了一款基于樹莓派電...
蘋果推類似亞馬遜Echo智能音響:攝像頭能識別人臉
蘋果推類似亞馬遜Echo智能音響,不管是亞馬遜Echo,還是谷歌最近發(fā)布的智能家居產品GoogleHome,都是使用聲控的方式讓用戶以語音發(fā)布命令,而蘋果也一樣,將通過Siri讓用戶發(fā)布命令。...
PHP遭棄用!Wordpress.com開源并轉用Javascript
據外媒消息稱,Wordpress母公司Automattic將完全重寫Wordpress.com網站代碼,并將此項計劃命名為“Calypso”,代碼開源并被托管于Github平臺。此外,最新的wordpress.com放...