基于HTML5 的人脸识别活体认证的实现方法.docx
- 文档编号:12073971
- 上传时间:2023-04-16
- 格式:DOCX
- 页数:10
- 大小:17.56KB
基于HTML5 的人脸识别活体认证的实现方法.docx
《基于HTML5 的人脸识别活体认证的实现方法.docx》由会员分享,可在线阅读,更多相关《基于HTML5 的人脸识别活体认证的实现方法.docx(10页珍藏版)》请在冰豆网上搜索。
基于HTML5的人脸识别活体认证的实现方法
基于HTML5的人脸识别活体认证的实现方法
近几年,人脸识别技术在身份认证领域的应用已经有了较多应用,例如:
支付宝、招行的取款、养老金领取等方面,但在杜绝假冒、认证安全性等方面,目前还是一个比较需要进一步解决的课题,特别是在移动端的活体认证技术方面。
本文介绍了在HTML5环境下可以采用clmtrackr.js检测工具,结合人脸模型,实现人脸的跟踪检测。
同时采用动作识别实现活体认证。
但本方案只能够在Firefox或者Chrome中使用。
并且只适合研究学习,实际场景中不太理想,需要进一步优化才能够应用。
如果有人有相关的技术,可以推荐介绍给我。
JavaScriptCode
Ideallytheseelementsaren'tcreateduntilit'sconfirmedthatthe
clientsupportsvideo/camera,butforthesakeofillustratingthe
elementsinvolved,theyarecreatedwithmarkup(notJavaScript)
-->
#container{
position:
relative;
}
#canvas{
position:
absolute;
left:
0;
top:
0;
}
你的浏览器不支持audio标签。
您的浏览器不支持video标签
SnapPhoto
Start
显示
不显示
张嘴验证
摇头验证
眨眼验证
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);
//////////////////////////////////////////////////////////////////////////////
//活体
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 positionString+="featurepoint"+p+":
["+positions[p][0].toFixed
(2)+","+positions[p][1].toFixed
(2)+"]
";
}
document.getElementById('positions').innerHTML=positionString;
}
if(positions){
for(varp=0;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 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 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 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 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 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 //研究和鼻子距离
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) &&Math.abs(positions[62][1]-last_nose_top) ){
document.getElementById('msg').innerHTML=dn;
if(last_dis_eye_norse>0&&dn 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) &&Math.abs(positions[62][1]-last_nose_top) ){
document.getElementById('msg').innerHTML=Math.abs(dis_eye_norse-last_dis_eye_norse)-dis_eye_norse*1/20;
if(last_dis_eye_norse>
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 基于HTML5 的人脸识别活体认证的实现方法 基于 HTML5 识别 活体 认证 实现 方法
![提示](https://static.bdocx.com/images/bang_tan.gif)