小編給大家分享一下基于HTML5怎么實(shí)現(xiàn)人臉識(shí)別活體認(rèn)證,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
網(wǎng)站的建設(shè)成都創(chuàng)新互聯(lián)專注網(wǎng)站定制,經(jīng)驗(yàn)豐富,不做模板,主營(yíng)網(wǎng)站定制開發(fā).小程序定制開發(fā),H5頁(yè)面制作!給你煥然一新的設(shè)計(jì)體驗(yàn)!已為成都展覽展示等企業(yè)提供專業(yè)服務(wù)。
近幾年,人臉識(shí)別技術(shù)在身份認(rèn)證領(lǐng)域的應(yīng)用已經(jīng)有了很多應(yīng)用,例如:支付寶,招行的取款,養(yǎng)老金領(lǐng)取等方面,但在杜絕假冒,認(rèn)證安全性等方面,目前還是一個(gè)比較需要進(jìn)一步解決的課題,特別是在移動(dòng)端的活體認(rèn)證技術(shù)方面。
本文介紹了在HTML5環(huán)境下可以采用clmtrackr.js檢測(cè)工具,結(jié)合人臉模型,實(shí)現(xiàn)人臉的跟蹤檢測(cè)。同時(shí)采用動(dòng)作識(shí)別實(shí)現(xiàn)活體認(rèn)證。
但本方案只能能夠在Firefox或Chrome中使用。并且僅適合研究學(xué)習(xí),實(shí)際場(chǎng)景中不太理想,需要進(jìn)一步優(yōu)化才能夠應(yīng)用。
<!DOCTYPE html>
<!-
理想情況下,直到確認(rèn)
客戶端支持視頻/攝像頭,但 為 說(shuō)明起見
涉及的元素,它們是用 標(biāo)記創(chuàng)建的 (不是JavaScript)
->
<html>
<meta charset = “ GBK” >
<樣式>
#容器 {
職位:相對(duì);
}
#canvas {
位置:絕對(duì);
左:0;
最高:0;
}
</ style>
<script src = “ utils.js” > </ script>
<script src = “ clmtrackr.js” > </ script>
<script src = “ ./models/model_pca_20_svm.js” > </ script>
<script src = “ numeric.js” > </ script>
<script src = “ ccv.js” > </ script>
<audio id = “ media” >
你的瀏覽器不支持audio標(biāo)簽。
</ audio>
<div id = “容器” >
<video id = “ video” width = “ 600” height = “ 400” 自動(dòng)播放>
您的瀏覽器不支持video標(biāo)簽
</ video>
<canvas id = “ canvas” width = “ 600” height = “ 400” > </ canvas>
</ div>
<button id = “快照” > “拍照” </ button>
<button id = “開始” >開始</ button>
<button id = “ showposition” >顯示</ button>
<button id = “ hideposition” >不顯示</ button>
<br/>
<button id = “ mouse” >張嘴驗(yàn)證</ button>
<button id = “ head” >搖頭驗(yàn)證</ button>
<button id = “ eye” >眨眼驗(yàn)證</ button>
<div id = “ tip” >
</ div>
<div id = “結(jié)果” >
</ div>
<div id = “ msg” >
</ div>
<div id = “ positions” >
</ div>
<腳本>
var showpos = false ;
//將事件偵聽器放置到位
//window.addEventListener("DOMContentLoaded“,function(){
//抓取元素,創(chuàng)建設(shè)置等
var canvas = document.getElementById(“ canvas” ),
context = canvas.getContext(“ 2d” ),
video = document.getElementById(“ video” ),
videoObj = { “ video” : true },
errBack = 函數(shù)(錯(cuò)誤){
如果 (error.PERMISSION_DENIED){
jAlert('用戶拒絕了瀏覽器請(qǐng)求媒體的權(quán)限' , '提示' );
} 否則,如果 (error.NOT_SUPPORTED_ERROR){
jAlert('對(duì)不起,您的瀏覽器不支持拍照功能,請(qǐng)使用其他瀏覽器' , '提示' );
} 否則,如果 (error.MANDATORY_UNSATISFIED_ERROR){
jAlert('指定的媒體類型未接收到媒體流' , '提示' );
} 其他 {
jAlert('系統(tǒng)重置獲取到攝像頭,請(qǐng)確保攝像頭已正確安裝?;驀L試刷新頁(yè)面,重試' , '提示' );
}
};
//將視頻監(jiān)聽器放置到位
if (navigator.getUserMedia){ //標(biāo)準(zhǔn)
navigator.getUserMedia(videoObj, 函數(shù)(流){
video.src =流;
video.play();
},errBack);
} else if (navigator.webkitGetUserMedia){ // WebKit前綴
嘗試{
navigator.webkitGetUserMedia(videoObj, 函數(shù)(流){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
},errBack);
}捕獲(錯(cuò)誤){
警報(bào)(錯(cuò)誤);
}
}
else if (navigator.mozGetUserMedia){ // Firefox前綴
navigator.mozGetUserMedia(videoObj, 函數(shù)(流){
video.src = window.URL.createObjectURL(stream);
video.play();
},errBack);
}
//觸發(fā)照片拍攝
document.getElementById(“ snap” ).addEventListener(“ click” , function (){
context.drawImage(video,0,0,600,400);
});
document.getElementById(“ start” ).addEventListener(“ click” , function (){
startTrack();
});
document.getElementById(“ showposition” ).addEventListener(“ click” , function (){
showpos = true ;
});
document.getElementById(“ hideposition” ).addEventListener(“ click” , function (){
showpos = false ;
});
document.getElementById(“ mouse” ).addEventListener(“ click” , function (){
alive_mouse();
});
document.getElementById(“ head” ).addEventListener(“ click” , function (){
alive_head();
});
document.getElementById(“ eye” ).addEventListener(“ click” , function (){
alive_eye();
});
//},false);
</ script>
<腳本>
//////////////////////////////////////////////////// /////////////////////////////
//活體
var last_time = 0; //時(shí)間因素
var last_nose_left = 0;
var last_nose_top = 0;
//張嘴動(dòng)作
var is_mouse_ok = false ;
var is_alive_mouse = false ;
var last_dis_eye_norse = 0;
var last_dis_mouse = 0;
函數(shù) alive_mouse(){
var media = document.getElementById(“ media” );
media.src = “ mp3 / alive_mouse.mp3” ;
media.play();
document.getElementById(“ tip” ).innerHTML = “請(qǐng)張合嘴巴” ;
document.getElementById('result' ).innerHTML = “” ;
is_mouse_ok = false ;
last_dis_mouse = 0;
last_time = 0;
last_dis_eye_norse = 100000000;
is_alive_head = false ;
is_alive_mouse = true ;
is_alive_eye = false ;
}
//搖頭動(dòng)作
var is_head_ok = false ;
var is_alive_head = false ;
var last_dis_left_right = 100000000;
函數(shù) alive_head(){
var media = document.getElementById(“ media” );
media.src = “ mp3 / alive_head.mp3” ;
media.play();
document.getElementById(“ tip” ). innerHTML = “請(qǐng)?jiān)谒椒较蜃笥覔u頭” ;
document.getElementById('result' ).innerHTML = “” ;
is_head_ok = false ;
last_dis_left_right = 100000000;
last_time = 0;
is_alive_head = true ;
is_alive_mouse = false ;
is_alive_eye = false ;
}
//眨眼動(dòng)作
var is_alive_eye = false ;
var is_eye_ok = false ;
函數(shù) alive_eye(){
var media = document.getElementById(“ media” );
media.src = “ mp3 / alive_eye.mp3” ;
media.play();
document.getElementById(“ tip” ). innerHTML = “請(qǐng)眨眼” ;
document.getElementById('result' ).innerHTML = “” ;
is_eye_ok = false ;
last_dis_eye_norse = 100000000;
last_nose_left = 0;
last_nose_top = 0;
last_time = 0;
is_alive_head = false ;
is_alive_mouse = false ;
is_alive_eye = true ;
}
函數(shù) startTrack(){
var videoInput = document.getElementById('video' );
var ctracker = new clm.tracker();
ctracker.init(pModel);
ctracker.start(videoInput);
var canvasInput = document.getElementById('canvas' );
var cc = canvasInput.getContext('2d' );
cc.lineWidth = 3;
函數(shù) drawLoop(){
// requestAnimationFrame(drawLoop);
cc.clearRect(0,0,canvasInput.width,canvasInput.height);
//ctracker.draw(canvasInput);
var position = ctracker.getCurrentPosition();
如果 (showpos &&職位){
for (var p = 0; p <position.length; p ++){
positionString + = “ featurepoint” + p + “:[” + positions [p] [0] .toFixed(2)+ “,” + positions [p] [1] .toFixed(2)+ “] <br/>” ;
}
document.getElementById('positions' ).innerHTML = positionString;
}
如果(位置){
對(duì)于 (var p = 0; p <71; p ++){
cc.beginPath();
cc.arc(positions [p] [0] .toFixed(2),positions [p] [1] .toFixed(2),2,0,Math.PI * 2, true );
cc.closePath();
cc.fillStyle = '#00FF00' ;
cc.fill();
}
//cc.strokeStyle ='紅色';
// 0-14輪廓
// 7下吧,最下
// 2最左邊
// 12最右邊
// 15-22眉毛
// 23-27左眼睛五個(gè)點(diǎn)
// 27左眼中間
// 63-66左眼四個(gè)點(diǎn)
// 28-32右眼睛五個(gè)點(diǎn)
// 67-70右眼四個(gè)點(diǎn)
// 33-43鼻子
// 62鼻中間
// 44-61嘴巴
// 47嘴巴上
// 53嘴巴下
//////////////////////////////////////////////////// /////////////////////////////////////////////////
//左眼中間
對(duì)于 (var p = 27; p <= 27; p ++){
cc.beginPath();
cc.arc(positions [p] [0] .toFixed(2),positions [p] [1] .toFixed(2),2,0,Math.PI * 2, true );
cc.closePath();
cc.fillStyle = '紅色' ;
cc.fill();
}
//鼻子中間
對(duì)于 (var p = 62; p <= 62; p ++){
cc.beginPath();
cc.arc(positions [p] [0] .toFixed(2),positions [p] [1] .toFixed(2),2,0,Math.PI * 2, true );
cc.closePath();
cc.fillStyle = '紅色' ;
cc.fill();
}
//嘴巴上
對(duì)于 (var p = 57; p <= 57; p ++){
cc.beginPath();
cc.arc(positions [p] [0] .toFixed(2),positions [p] [1] .toFixed(2),2,0,Math.PI * 2, true );
cc.closePath();
cc.fillStyle = '紅色' ;
cc.fill();
}
//嘴巴下
對(duì)于 (var p = 60; p <= 60; p ++){
cc.beginPath();
cc.arc(positions [p] [0] .toFixed(2),positions [p] [1] .toFixed(2),2,0,Math.PI * 2, true );
cc.closePath();
cc.fillStyle = '紅色' ;
cc.fill();
}
///////////////////////////////////////
//頭
如果(is_alive_head == true ){
如果(last_time == 0 ||(new Date()。getTime()-last_time> 500 && new Date()。getTime()-last_time <10000)){
var xdiff_left =位置[62] [0]-位置[2] [0];
var ydiff_left =位置[62] [1]-位置[2] [1];
var dis_left = Math.pow((xdiff_left * xdiff_left + ydiff_left * ydiff_left),0.5);
var xdiff_right =位置[12] [0]-位置[62] [0];
var ydiff_right =職位[12] [1]-職位[62] [1];
var dis_right = Math.pow((xdiff_right * xdiff_right + ydiff_right * ydiff_right),0.5);
var xdiff_side = positions [12] [0]-positions [2] [0];
var ydiff_side = positions [12] [1]-positions [2] [1];
var dis_side = Math.pow((xdiff_side * xdiff_side + ydiff_side * ydiff_side),0.5);
var dis_left_right = dis_left-dis_right;
document.getElementById('result' ).innerHTML = dis_left_right;
如果(last_dis_left_right> 0 && dis_left_right> dis_side / 3){
document.getElementById('result' ).innerHTML = “通過(guò)” ;
is_head_ok = true ;
is_alive_head = false ;
}
last_dis_left_right = dis_left_right;
last_time = 新的 Date()。getTime();
}
}
//////////////////////////////////////
//鼠
如果(is_alive_mouse == true ){
如果(last_time == 0 ||(new Date()。getTime()-last_time> 500 && new Date()。getTime()-last_time <10000)){
//研究和鼻子距離
var xdiff =位置[62] [0]-位置[27] [0];
var ydiff =職位[62] [1]-職位[27] [1];
var dis_eye_norse = Math.pow((xdiff * xdiff + ydiff * ydiff),0.5);
//上嘴唇和下嘴唇距離
var xdiff_mouse =位置[53] [0]-位置[47] [0];
var ydiff_mouse = positions [53] [1]-positions [47] [1];
var dis_mouse = Math.pow((xdiff_mouse * xdiff_mouse + ydiff_mouse * ydiff_mouse),0.5);
//上次的眼鼻距離和這次的眼鼻距離差
var dn = Math.abs(dis_eye_norse-last_dis_eye_norse);
//上次的嘴距離和本次的嘴距離差
var dm = Math.abs(dis_mouse-last_dis_mouse);
//鼻子的位置確保變化不大
如果(last_nose_left> 0 && last_nose_top> 0
&& Math.abs(positions [62] [0] -last_nose_left)<5
&& Math.abs(positions [62] [1] -last_nose_top)<5
){
document.getElementById('msg' ).innerHTML = dn;
如果(last_dis_eye_norse> 0 && dn <dis_eye_norse * 1/50){
如果(last_dis_mouse> 0 && dm> dis_mouse / 10){
document.getElementById('result' ).innerHTML = “通過(guò)” ;
is_alive_mouse = false ;
is_mouse_ok = true ;
}
}
}
last_dis_mouse = dis_mouse;
last_dis_eye_norse = dis_eye_norse;
last_time = 新的 Date()。getTime();
last_nose_left = positions [62] [0];
last_nose_top =職位[62] [1];
}
}
//////////////////////////////////////
//眼
如果(is_alive_eye == true ){
如果(last_time == 0 ||(new Date()。getTime()-last_time> 10)){
var xdiff1 =位置[62] [0]-位置[27] [0];
var ydiff1 =職位[62] [1]-職位[27] [1];
var dis_eye_norse1 = Math.pow((xdiff1 * xdiff1 + ydiff1 * ydiff1),0.5);
var xdiff2 =位置[62] [0]-位置[32] [0];
var ydiff2 =職位[62] [1]-職位[32] [1];
var dis_eye_norse2 = Math.pow((xdiff2 * xdiff2 + ydiff2 * ydiff2),0.5);
var dis_eye_norse =(dis_eye_norse1 + dis_eye_norse2);
如果(last_nose_left> 0 && last_nose_top> 0
&& Math.abs(positions [62] [0] -last_nose_left)<0.5
&& Math.abs(positions [62] [1] -last_nose_top)<0.5
){
document.getElementById('msg' ).innerHTML = Math.abs(dis_eye_norse-last_dis_eye_norse)-dis_eye_norse * 1/20;
如果(last_dis_eye_norse> 0 &&(Math.abs(dis_eye_norse-last_dis_eye_norse)> dis_eye_norse * 1/20)){
document.getElementById('result' ).innerHTML = “通過(guò)” ;
is_alive_eye = false ;
is_eye_ok = true ;
}
}
last_nose_left = positions [62] [0];
last_nose_top =職位[62] [1];
last_dis_eye_norse = dis_eye_norse;
last_time = 新的 Date()。getTime();
}
}
}
requestAnimationFrame(drawLoop);
}
drawLoop();
}
</ script>
</ html>
看完了這篇文章,相信你對(duì)“基于HTML5怎么實(shí)現(xiàn)人臉識(shí)別活體認(rèn)證”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
當(dāng)前題目:基于HTML5怎么實(shí)現(xiàn)人臉識(shí)別活體認(rèn)證
本文地址:http://bm7419.com/article26/goepcg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、網(wǎng)站導(dǎo)航、App開發(fā)、服務(wù)器托管、軟件開發(fā)、網(wǎng)站改版
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)