基于HTML5 的人臉識別活體認(rèn)證的實現(xiàn)方法

2020-03-24 17:17:23

字體：大中小

供稿：網(wǎng)友

近幾年，人臉識別技術(shù)在身份認(rèn)證領(lǐng)域的應(yīng)用已經(jīng)有了較多應(yīng)用，例如：支付寶、招行的取款、養(yǎng)老金領(lǐng)取等方面，但在杜絕假冒、認(rèn)證安全性等方面，目前還是一個比較需要進(jìn)一步解決的課題，特別是在移動端的活體認(rèn)證技術(shù)方面。本文介紹了在HTML5 環(huán)境下可以采用clmtrackr.js 檢測工具，結(jié)合人臉模型，實現(xiàn)人臉的跟蹤檢測。同時采用動作識別實現(xiàn)活體認(rèn)證。但本方案只能夠在Firefox 或者Chrome中使用。并且只適合研究學(xué)習(xí)，實際場景中不太理想，需要進(jìn)一步優(yōu)化才能夠應(yīng)用。如果有人有相關(guān)的技術(shù)，可以推薦介紹給我。JavaScript Code復(fù)制內(nèi)容到剪貼板
!-- Ideallytheseelementsaren'tcreateduntilit'sconfirmedthatthe clientsupportsvideo/camera,butforthesakeofillustratingthe elementsinvolved,theyarecreatedwithmarkup(notJavaScript) -- html metacharset= GBK style #container{ position:relative; } #canvas{ position:absolute; left:0; top:0; } /style scriptsrc= utils.js /script scriptsrc= clmtrackr.js /script scriptsrc= ./models/model_pca_20_svm.js /script scriptsrc= numeric.js /script scriptsrc= ccv.js /script audioid= media 你的瀏覽器不支持audio標(biāo)簽。 /audio divid= container videoid= video width= 600 height= 400 autoplay 您的瀏覽器不支持video標(biāo)簽 /video canvasid= canvas width= 600 height= 400 /canvas /div buttonid= snap SnapPhoto /button buttonid= start Start /button buttonid= showposition 顯示 /button buttonid= hideposition 不顯示 /button br/ buttonid= mouse 張嘴驗證 /button buttonid= head 搖頭驗證 /button buttonid= eye 眨眼驗證 /button divid= tip /div divid= result /div divid= msg /div divid= positions /div script varshowpos=false; //Puteventlistenersintoplace //window.addEventListener( DOMContentLoaded ,function(){ //Grabelements,createsettings,etc. varcanvas=document.getElementById( canvas ), context=canvas.getContext( 2d ), video=document.getElementById( video ), videoObj={ video :true}, errBack=function(error){ if(error.PERMISSION_DENIED){ jAlert('用戶拒絕了瀏覽器請求媒體的權(quán)限','提示'); }elseif(error.NOT_SUPPORTED_ERROR){ jAlert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器','提示'); }elseif(error.MANDATORY_UNSATISFIED_ERROR){ jAlert('指定的媒體類型未接收到媒體流','提示'); }else{ jAlert('系統(tǒng)未能獲取到攝像頭，請確保攝像頭已正確安裝。或嘗試刷新頁面，重試','提示'); } }; //Putvideolistenersintoplace if(navigator.getUserMedia){//Standard navigator.getUserMedia(videoObj,function(stream){ video.src=stream; video.play(); },errBack); }elseif(navigator.webkitGetUserMedia){//WebKit-prefixed try{ navigator.webkitGetUserMedia(videoObj,function(stream){ video.src=window.webkitURL.createObjectURL(stream); video.play(); },errBack); }catch(error){ alert(error); } } elseif(navigator.mozGetUserMedia){//Firefox-prefixed navigator.mozGetUserMedia(videoObj,function(stream){ video.src=window.URL.createObjectURL(stream); video.play(); },errBack); } //Triggerphototake 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 script ////////////////////////////////////////////////////////////////////////////// //活體 varlast_time=0;//時間因素 varlast_nose_left=0; varlast_nose_top=0; //張嘴動作 varis_mouse_ok=false; varis_alive_mouse=false; varlast_dis_eye_norse=0; varlast_dis_mouse=0; functionalive_mouse(){ varmedia=document.getElementById( media ); media.src= mp3/alive_mouse.mp3 ; media.play(); document.getElementById( tip ).innerHTML= 請張合嘴巴 ; 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; } //搖頭動作 varis_head_ok=false; varis_alive_head=false; varlast_dis_left_right=100000000; functionalive_head(){ varmedia=document.getElementById( media ); media.src= mp3/alive_head.mp3 ; media.play(); document.getElementById( tip ).innerHTML= 請在水平方向左右搖頭 ; 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; } //眨眼動作 varis_alive_eye=false; varis_eye_ok=false; functionalive_eye(){ varmedia=document.getElementById( media ); media.src= mp3/alive_eye.mp3 ; media.play(); document.getElementById( tip ).innerHTML= 請眨眼 ; 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; } functionstartTrack(){ varvideoInput=document.getElementById('video'); varctracker=newclm.tracker(); ctracker.init(pModel); ctracker.start(videoInput); varcanvasInput=document.getElementById('canvas'); varcc=canvasInput.getContext('2d'); cc.lineWidth=3; functiondrawLoop(){ //requestAnimationFrame(drawLoop); cc.clearRect(0,0,canvasInput.width,canvasInput.height); //ctracker.draw(canvasInput); varpositions=ctracker.getCurrentPosition(); if(showpos positions){ for(varp=0;p positions.length;p++){ positionString+= featurepoint +p+ :[ +positions[p][0].toFixed(2)+ , +positions[p][1].toFixed(2)+ ] br/ ; } document.getElementById('positions').innerHTML=positionString; } if(positions){ for(varp=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='red'; //0-14輪廓 //7下吧，最下 //2最左邊 //12最右邊 //15-22眉毛 //23-27左眼睛五個點(diǎn) //27左眼中間 //63-66左眼四個點(diǎn) //28-32右眼睛五個點(diǎn) //67-70右眼四個點(diǎn) //33-43鼻子 //62鼻中間 //44-61嘴巴 //47嘴巴上 //53嘴巴下 /////////////////////////////////////////////////////////////////////////////////////////////// //左眼中間 for(varp=27;p 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='red'; cc.fill(); } //鼻子中間 for(varp=62;p 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='red'; cc.fill(); } //嘴巴上 for(varp=57;p 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='red'; cc.fill(); } //嘴巴下 for(varp=60;p 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='red'; cc.fill(); } ////////////////////////////////////// //head if(is_alive_head==true){ if(last_time==0||(newDate().getTime()-last_time 500 newDate().getTime()-last_time 10000)){ varxdiff_left=positions[62][0]-positions[2][0]; varydiff_left=positions[62][1]-positions[2][1]; vardis_left=Math.pow((xdiff_left*xdiff_left+ydiff_left*ydiff_left),0.5); varxdiff_right=positions[12][0]-positions[62][0]; varydiff_right=positions[12][1]-positions[62][1]; vardis_right=Math.pow((xdiff_right*xdiff_right+ydiff_right*ydiff_right),0.5); varxdiff_side=positions[12][0]-positions[2][0]; varydiff_side=positions[12][1]-positions[2][1]; vardis_side=Math.pow((xdiff_side*xdiff_side+ydiff_side*ydiff_side),0.5); vardis_left_right=dis_left-dis_right; document.getElementById('result').innerHTML=dis_left_right; if(last_dis_left_right 0 dis_left_right dis_side/3){ document.getElementById('result').innerHTML= 通過 ; is_head_ok=true; is_alive_head=false; } last_dis_left_right=dis_left_right; last_time=newDate().getTime(); } } ///////////////////////////////////// //mouse if(is_alive_mouse==true){ if(last_time==0||(newDate().getTime()-last_time 500 newDate().getTime()-last_time 10000)){ //研究和鼻子距離 varxdiff=positions[62][0]-positions[27][0]; varydiff=positions[62][1]-positions[27][1]; vardis_eye_norse=Math.pow((xdiff*xdiff+ydiff*ydiff),0.5); //上嘴唇和下嘴唇距離 varxdiff_mouse=positions[53][0]-positions[47][0]; varydiff_mouse=positions[53][1]-positions[47][1]; vardis_mouse=Math.pow((xdiff_mouse*xdiff_mouse+ydiff_mouse*ydiff_mouse),0.5); //上次的眼鼻距離和這次的眼鼻距離差 vardn=Math.abs(dis_eye_norse-last_dis_eye_norse); //上次的嘴距離和本次的嘴距離差 vardm=Math.abs(dis_mouse-last_dis_mouse); //鼻子的位置確保變化不大 if(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; if(last_dis_eye_norse 0 dn dis_eye_norse*1/50){ if(last_dis_mouse 0 dm dis_mouse/10){ document.getElementById('result').innerHTML= 通過 ; is_alive_mouse=false; is_mouse_ok=true; } } } last_dis_mouse=dis_mouse; last_dis_eye_norse=dis_eye_norse; last_time=newDate().getTime(); last_nose_left=positions[62][0]; last_nose_top=positions[62][1]; } } ///////////////////////////////////// //eye if(is_alive_eye==true){ if(last_time==0||(newDate().getTime()-last_time 10)){ varxdiff1=positions[62][0]-positions[27][0]; varydiff1=positions[62][1]-positions[27][1]; vardis_eye_norse1=Math.pow((xdiff1*xdiff1+ydiff1*ydiff1),0.5); varxdiff2=positions[62][0]-positions[32][0]; varydiff2=positions[62][1]-positions[32][1]; vardis_eye_norse2=Math.pow((xdiff2*xdiff2+ydiff2*ydiff2),0.5); vardis_eye_norse=(dis_eye_norse1+dis_eye_norse2); if(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; if(last_dis_eye_norse 0 (Math.abs(dis_eye_norse-last_dis_eye_norse) dis_eye_norse*1/20)){ document.getElementById('result').innerHTML= 通過 ; is_alive_eye=false; is_eye_ok=true; } } last_nose_left=positions[62][0]; last_nose_top=positions[62][1]; last_dis_eye_norse=dis_eye_norse; last_time=newDate().getTime(); } } } requestAnimationFrame(drawLoop); } drawLoop(); } /script /html
以上就是小編為大家?guī)淼幕贖TML5 的人臉識別活體認(rèn)證的實現(xiàn)方法全部內(nèi)容了，希望大家多多支持phpstudy~原文地址：http://www.cnblogs.com/lilies/archive/2016/06/21/5604212.htmlhtml教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML頁面跳轉(zhuǎn)及參數(shù)傳遞問題

下一篇：讓IE下支持Html5的placeholder屬性的插件