基于html5的人脸识别活体认证.docx

近几年，人脸识别技术在身份认证领域的应用已经有了较多应用，例如：支付宝、招行的取款、养老金领取等方面，但在杜绝假冒、认证安全性等方面，目前还是一个比较需要进一步解决的课题，特别是在移动端的活体认证技术方面。本文介绍了在HTML5 环境下可以采用clmtrackr.js 检测工具，结合人脸模型，实现人脸的跟踪检测。同时采用动作识别实现活体认证。但本方案只能够在Firefox 或者Chrome中使用。并且只适合研究学习，实际场景中不太理想，需要进一步优化才能够应用。#containerposition:relative;#canvasposition:absolute;left:0;top:0;你的浏览器不支持audio标签。您的浏览器不支持video标签SnapPhotoStart显示不显示张嘴验证摇头验证眨眼验证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(指定的媒体类型未接收到媒体流,提示);elsejAlert(系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试,提示);/Putvideolistenersintoplaceif(navigator.getUserMedia)/Standardnavigator.getUserMedia(videoObj,function(stream)video.src=stream;video.play();,errBack);elseif(navigator.webkitGetUserMedia)/WebKit-prefixedtrynavigator.webkitGetUserMedia(videoObj,function(stream)video.src=window.webkitURL.createObjectURL(stream);video.play();,errBack);catch(error)alert(error);elseif(navigator.mozGetUserMedia)/Firefox-prefixednavigator.mozGetUserMedia(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=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);/活体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;ppositions.length;p+)positionString+=featurepoint+p+:+positionsp0.toFixed(2)+,+positionsp1.toFixed(2)+;document.getElementById(positions).innerHTML=positionString;if(positions)for(varp=0;p71;p+)cc.beginPath();cc.arc(positionsp0.toFixed(2),positionsp1.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(positionsp0.toFixed(2),positionsp1.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(positionsp0.toFixed(2),positionsp1.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(positionsp0.toFixed(2),positionsp1.toFixed(2),2,0,Math.PI*2,true);cc.closePath();cc.fillStyle=red;cc.fill();/嘴巴下for(varp=60;p500&newDate().getTime()-last_time0&dis_left_rightdis_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();/mouseif(is_alive_mouse=true)if(last_time=0|(newDate().getTime()-last_time500&newDate().getTime()-last_time0&last_nose_top0&Math.abs(positions620-last_nose_left)5&Math.abs(positions621-last_nose_top)0&dn0&dmdis_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=positions620;last_nose_top=positions621;/eyeif(is_alive_eye=true)if(last_time=0|(newDate().getTime()-last_time10)varxdiff1=positions620-positions270;varydiff1=positions621-positions271;vardis_eye_norse1=Math.pow(xdiff1*xdiff1+yd