近几年，人脸识别技术在身份认证领域的应用已经有了较多应用，例如：支付宝、招行的取款、养老金领取等方面，但在杜绝假冒、认证安全性等方面，目前还是一个比较需要进一步解决的课题，特别是在移动端的活体认证技术方面。
本文介绍了在html5 环境下可以采用clmtrackr.js 检测工具，结合人脸模型，实现人脸的跟踪检测。同时采用动作识别实现活体认证。
但本方案只能够在firefox 或者chrome中使用。并且只适合研究学习，实际场景中不太理想，需要进一步优化才能够应用。
如果有人有相关的技术，可以推荐介绍给我。
javascript code
复制内容到剪贴板
<!doctypehtml><!–ideallytheelementsaren‘tcreateduntilit’sconfirmedthattheclientsupportsvideo/camera,butforthesakeofillustratingtheelementsinvolved,theyarecreatedwithmarkup(notjavascript)–><html><metachart=“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=“mou”>张嘴验证</button><buttonid=“head”>摇头验证</button><buttonid=“eye”>眨眼验证</button><divid=“tip”></div><divid=“result”></div><divid=“msg”></div><divid=“positions”></div><script>惠特曼草叶集varshowpos=fal;//puteventlistenersintoplace//window.addeventlistener(“domcontentloaded”,function(){//grabelements,createttings,etc.varcanvas=document.getelementbyid(“canvas”),context=canvas.getcontext(“2d”),video=document.getelementbyid(“video”),videoobj={“video”:true},errback=过元旦
function(error){if(error.permission_denied){jalert(‘用户拒绝了浏览器请求媒体的权限’,‘提示’);}elif(error.not_supported_error){jalert(‘对不起，您的浏览器不支持拍照功能，请使用其他浏览器’,‘提示’);}elif(error.mandatory_unsatisfied_error){jalert(‘指定的媒体类型未接收到媒体流’,‘提示’);}el{jalert(‘系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试’,‘提示’);}};//putvideolistenersintoplaceif(navigator.geturmedia){//standardnavigator.geturmedia(videoobj,function(stream){video.src=stream;video.play();},errback);}elif(navigator.webkitgeturmedia){//webkit-prefixedtry{navigator.webkitgeturmedia(videoobj,function(stream){video.src=window.webkiturl.createobjecturl(stream);video.play();},errback);}catch(error){alert(error);}}elif(navigator.mozgeturmedia){//firefox-prefixednavigator.mozgeturmedia(videoobj,function(stream){video.src=window.url.createobjecturl(stream);video.play();},errback);}//triggerphototakedocument.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=fal;});document.getelementbyid(“mou”).addeventlistener(“click”,function(){alive_mou();});document.getelementbyid(“head”).addeventlistener(“click”,function(){alive_head();});document.getelementbyid(“eye”).addeventlistener(“click”,function(){alive_eye();});//},fal);</script><script>////////////////////////////////////////////////////////////////////////////////活体varlast_time=0;//时间因素varlast_no_left=0;varlast_no_top=0;//张嘴动作varis_mou_ok=fal;varis_alive_mou=fal;varlast_dis_eye_nor=0;varlast_dis_mou=0;functionalive_mou(){varmedia=document.getelementbyid(“media”);media.src=“mp3/alive_mou.mp3”;media.play();document.getelementbyid(“tip”).innerhtml=“请张合嘴巴”;document.getelementbyid(‘result’).innerhtml=“”;is_mou_ok=fal;last_dis_mou=0;last_time=0;last_dis_eye_nor=100000000;is_alive_head=fal;is_alive_mou=true;is_alive_eye=fal;}//摇头动作varis_head_ok=fal;varis_alive_head=fal;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=fal;last_dis_left_right=100000000;last_time=0;is_alive_head=true;is_alive_mou=fal;is_alive_eye=fal;}//眨眼动作varis_alive_eye=fal;varis_eye_ok=fal;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=fal;last_dis_eye_nor=100000000;last_no_left=0;last_no_top=0;last_time=0;is_alive_head=fal;is_alive_mou=fal;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)+庄小威220;]<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.clopath();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.clopath();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.clopath();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.clopath();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.clopath();cc.fillstyle=‘red’;cc.fill();}////////////////////////////////////////headif(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=pos无私的爱itions[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=fal;}last_dis_left_right=dis_left_right;last_time=newdate().gettime();}}///////////////////////////////////////mouif(is_alive_mou==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_e人教版四年级下册语文教案ye_nor=math.pow((xdiff*xdiff+ydiff*ydiff),0.5);//上嘴唇和下嘴唇距离varxdiff_mou=positions[53][0]–positions[47][0];varydiff_mou=positions[53][1]–positions[47][1];vardis_mou=math.pow((xdiff_mou*xdiff_mou+ydiff_mou*ydiff_mou),0.5);//上次的眼鼻距离和这次的眼鼻距离差vardn=math.abs(dis_eye_nor-last_dis_eye_nor);//上次的嘴距离和本次的嘴距离差vardm=math.abs(dis_mou–last_dis_mou);//鼻子的位置确保变化不大if(last_no_left>0&&last_no_top>0&&math.abs(positions[62][0]-last_no_left)<5&&math.abs(positions[62][1]-last_no_top)<5){document.getelementbyid(‘msg’).innerhtml=dn;if(last_dis_eye_nor>0&&dn<dis_eye_nor*1/50){if(last_dis_mou>0&&dm>dis_mou/10){document.getelementbyid(‘result’).innerhtml=“通过”;is_alive_mou=fal;is_mou_ok=true;}}}last_dis_mou=dis_mou;last_dis_eye_nor=dis_eye_nor;last_time=newdate().gettime();last_no_left=positions[62][0];last_no_top=positions[62][1];}}///////////////////////////////////////eyeif(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_nor1=math.pow((xdiff1*xdiff1+ydiff1*ydiff1),0.5);varxdiff2=positions[62][0]–positions[32][0];varydiff2=positions[62][1]–positions[32][1];vardis_eye_nor2=math.pow((xdiff2*xdiff2+ydiff2*ydiff2),0.5);vardis_eye_nor=(dis_eye_nor1+dis_eye_nor2);if(last_no_left>0&&last_no_top>0&&math.abs(positions[62][0]-last_no_left)<0.5&&math.abs(positions[62][1]-last_no_top)<0.5){document.getelementbyid(‘msg’).innerhtml=math.abs(dis_eye_nor–last_dis_eye_nor)–dis_eye_nor*1/20;if(last_dis_eye_nor>0&&(math.abs(dis_eye_nor–last_dis_eye_nor)>dis_eye_nor*1/20)){document.getelementbyid(‘result’).innerhtml=“通过”;is_alive_eye=fal;is_eye_ok=true;}}last_no_left=positions[62][0];last_no_top=positions[62][1];last_dis_eye_nor=dis_eye_nor;last_time=newdate().gettime();}}}requestanimationframe(drawloop);}drawloop();}</script></html>以上就是www.887551.com为大家带来的基于html5 的人脸识别活体认证的实现方法全部内容了，希望大家多多支持www.887551.com~
原文地址：
