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

如果这世上真有奇迹，那只是努力的另一个名字。人生从来没有真正的绝境。无论遭受多少艰辛，无论经历多少苦难，只要一个人的心中还怀着一粒信念的种子，那么总有一天，他就能走出困境，让生命重新开花结果。

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

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

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

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

JavaScript Code复制内容到剪贴板

<!DOCTYPEhtml>
<!--
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标签。
</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

为您推荐

html5+css如何如何实现中间大两头小的轮播效果

amazeui模态框弹出后立马消失并刷新页面

html5简介及新增功能介绍

HTML5中video标签禁止右键和下载视频的问题如何解决

HTML最新标准HTML5总结(必看)

HTML5最新文章