基于HTML5 的人脸识别活体认证的实现方法

摘要：近几年，人脸识别技术在身份认证领域的应用已经有了较多应用，例如：支付宝、招行的取款、养老金领取等方面，但在杜绝假冒、认证安全性等方面，目前还...

近几年，人脸识别技术在身份认证领域的应用已经有了较多应用，例如：支付宝、招行的取款、养老金领取等方面，但在杜绝假冒、认证安全性等方面，目前还是一个比较需要进一步解决的课题，特别是在移动端的活体认证技术方面。

本文介绍了在HTML5 环境下可以采用clmtrackr.js 检测工具，结合人脸模型，实现人脸的跟踪检测。同时采用动作识别实现活体认证。

但本方案只能够在Firefox 或者Chrome中使用。并且只适合研究学习，实际场景中不太理想，需要进一步优化才能够应用。

如果有人有相关的技术，可以推荐介绍给我。

JavaScript Code复制内容到剪贴板 <!DOCTYPEhtml>  <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标签。 </audio> <divid="container"> <videoid="video"width="600"height="400"autoplay> 您的浏览器不支持video标签 </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('用户拒绝了浏览器请求媒体的权限','提示'); }elseif(error.NOT_SUPPORTED_ERROR){ jAlert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器','提示'); }elseif(error.MANDATORY_UNSATISFIED_ERROR){ jAlert('指定的媒体类型未接收到媒体流','提示'); }else{ jAlert('系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试','提示'); } }; //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左眼睛五个点 //27左眼中间 //63-66左眼四个点 //28-32右眼睛五个点 //67-70右眼四个点 //33-43鼻子 //62鼻中间 //44-61嘴巴 //47嘴巴上 //53嘴巴下 /////////////////////////////////////////////////////////////////////////////////////////////// //左眼中间 for(varp=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='red'; cc.fill(); } //鼻子中间 for(varp=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='red'; cc.fill(); } //嘴巴上 for(varp=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='red'; cc.fill(); } //嘴巴下 for(varp=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='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>

以上就是小编为大家带来的基于HTML5 的人脸识别活体认证的实现方法全部内容了，希望大家多多支持查字典教程网~

原文地址：http://www.cnblogs.com/lilies/archive/2016/06/21/5604212.html