html clm标记,基于HTML5的人脸识别活体认证的实现方法

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

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

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

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

JavaScript代码将内容复制到

理想情况下，直到确认

客户端支持视频/摄像头，但 为 说明起见

涉及的元素，它们是用 标记创建的 (不是JavaScript)

->

＃容器 {

职位：相对；

}

#canvas {

位置：绝对；

左：0;

最高：0;

}

style>

你的浏览器不支持audio标签。

audio>

您的浏览器不支持video标签

video>

canvas>

div>

“拍照” button>

开始 button>

显示 button>

不显示 button>

张嘴验证 button>

摇头验证 button>

眨眼验证 button>

div>

div>

div>

div>

<脚本>

var  showpos = false ;

//将事件侦听器放置到位

//window.addEventListener("DOMContentLoaded“，function(){

//抓取元素，创建设置等

var  canvas = document.getElementById(“ canvas” )，

context = canvas.getContext(“ 2d” )，

video = document.getElementById(“ video” )，

videoObj = {  “ video” ：  true  }，

errBack = 函数(错误){

如果 (error.PERMISSION_DENIED){

jAlert('用户拒绝了浏览器请求媒体的权限' ，  '提示' );

} 否则，如果 (error.NOT_SUPPORTED_ERROR){

jAlert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器' ，  '提示' );

} 否则，如果 (error.MANDATORY_UNSATISFIED_ERROR){

jAlert('指定的媒体类型未接收到媒体流' ，  '提示' );

} 其他 {

jAlert('系统重置获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试' ，  '提示' );

}

};

//将视频监听器放置到位

if (navigator.getUserMedia){  //标准

navigator.getUserMedia(videoObj， 函数(流){

video.src =流;

video.play();

}，errBack);

}  else if (navigator.webkitGetUserMedia){  // WebKit前缀

尝试{

navigator.webkitGetUserMedia(videoObj， 函数(流){

video.src = window.webkitURL.createObjectURL(stream);

video.play();

}，errBack);

}捕获(错误){

警报(错误);

}

}

else if (navigator.mozGetUserMedia){  // Firefox前缀

navigator.mozGetUserMedia(videoObj， 函数(流){

video.src = window.URL.createObjectURL(stream);

video.play();

}，errBack);

}

//触发照片拍摄

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>

<脚本>

/

//活体

var  last_time = 0; //时间因素

var  last_nose_left = 0;

var  last_nose_top = 0;

//张嘴动作

var  is_mouse_ok = false ;

var  is_alive_mouse = false ;

var  last_dis_eye_norse = 0;

var  last_dis_mouse = 0;

函数 alive_mouse(){

var  media = 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 ;

}

//摇头动作

var  is_head_ok = false ;

var  is_alive_head = false ;

var  last_dis_left_right = 100000000;

函数 alive_head(){

var  media = 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 ;

}

//眨眼动作

var  is_alive_eye = false ;

var  is_eye_ok =  false ;

函数 alive_eye(){

var  media = 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 ;

}

函数 startTrack(){

var  videoInput = document.getElementById('video' );

var  ctracker =  new  clm.tracker();

ctracker.init(pModel);

ctracker.start(videoInput);

var  canvasInput = document.getElementById('canvas' );

var  cc = canvasInput.getContext('2d' );

cc.lineWidth = 3;

函数 drawLoop(){

// requestAnimationFrame(drawLoop);

cc.clearRect(0，0，canvasInput.width，canvasInput.height);

//ctracker.draw(canvasInput);

var  position = ctracker.getCurrentPosition();

如果 (showpos &&职位){

for  (var  p = 0; p

positionString + =  “ featurepoint” + p + “：[” + positions [p] [0] .toFixed(2)+ “，” + positions [p] [1] .toFixed(2)+ “]
” ;

}

document.getElementById('positions' ).innerHTML = positionString;

}

如果(位置){

对于 (var  p = 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 ='红色';

// 0-14轮廓

// 7下吧，最下

// 2最左边

// 12最右边

// 15-22眉毛

// 23-27左眼睛五个点

// 27左眼中间

// 63-66左眼四个点

// 28-32右眼睛五个点

// 67-70右眼四个点

// 33-43鼻子

// 62鼻中间

// 44-61嘴巴

// 47嘴巴上

// 53嘴巴下

/

//左眼中间

对于 (var  p = 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 =  '红色' ;

cc.fill();

}

//鼻子中间

对于 (var  p = 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 =  '红色' ;

cc.fill();

}

//嘴巴上

对于 (var  p = 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 =  '红色' ;

cc.fill();

}

//嘴巴下

对于 (var  p = 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 =  '红色' ;

cc.fill();

}

///

//头

如果(is_alive_head == true ){

如果(last_time == 0 ||(new  Date()。getTime()-last_time> 500 &&  new  Date()。getTime()-last_time <10000)){

var  xdiff_left =位置[62] [0]-位置[2] [0]；

var  ydiff_left =位置[62] [1]-位置[2] [1]；

var  dis_left = Math.pow((xdiff_left * xdiff_left + ydiff_left * ydiff_left)，0.5);

var  xdiff_right =位置[12] [0]-位置[62] [0]；

var  ydiff_right =职位[12] [1]-职位[62] [1]；

var  dis_right = Math.pow((xdiff_right * xdiff_right + ydiff_right * ydiff_right)，0.5);

var  xdiff_side = positions [12] [0]-positions [2] [0];

var  ydiff_side = positions [12] [1]-positions [2] [1];

var  dis_side = Math.pow((xdiff_side * xdiff_side + ydiff_side * ydiff_side)，0.5);

var  dis_left_right = dis_left-dis_right;

document.getElementById('result' ).innerHTML = dis_left_right;

如果(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 = 新的 Date()。getTime();

}

}

//

//鼠

如果(is_alive_mouse == true ){

如果(last_time == 0 ||(new  Date()。getTime()-last_time> 500 &&  new  Date()。getTime()-last_time <10000)){

//研究和鼻子距离

var  xdiff =位置[62] [0]-位置[27] [0]；

var  ydiff =职位[62] [1]-职位[27] [1]；

var  dis_eye_norse = Math.pow((xdiff * xdiff + ydiff * ydiff)，0.5);

//上嘴唇和下嘴唇距离

var  xdiff_mouse =位置[53] [0]-位置[47] [0]；

var  ydiff_mouse = positions [53] [1]-positions [47] [1]；

var  dis_mouse = Math.pow((xdiff_mouse * xdiff_mouse + ydiff_mouse * ydiff_mouse)，0.5);

//上次的眼鼻距离和这次的眼鼻距离差

var  dn = Math.abs(dis_eye_norse-last_dis_eye_norse);

//上次的嘴距离和本次的嘴距离差

var  dm = Math.abs(dis_mouse-last_dis_mouse);

//鼻子的位置确保变化不大

如果(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;

如果(last_dis_eye_norse> 0 && dn

如果(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 = 新的 Date()。getTime();

last_nose_left = positions [62] [0];

last_nose_top =职位[62] [1];

}

}

//

//眼

如果(is_alive_eye == true ){

如果(last_time == 0 ||(new  Date()。getTime()-last_time> 10)){

var  xdiff1 =位置[62] [0]-位置[27] [0]；

var  ydiff1 =职位[62] [1]-职位[27] [1]；

var  dis_eye_norse1 = Math.pow((xdiff1 * xdiff1 + ydiff1 * ydiff1)，0.5);

var  xdiff2 =位置[62] [0]-位置[32] [0]；

var  ydiff2 =职位[62] [1]-职位[32] [1]；

var  dis_eye_norse2 = Math.pow((xdiff2 * xdiff2 + ydiff2 * ydiff2)，0.5);

var  dis_eye_norse =(dis_eye_norse1 + dis_eye_norse2);

如果(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;

如果(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 =职位[62] [1];

last_dis_eye_norse = dis_eye_norse;

last_time = 新的 Date()。getTime();

}

}

}

requestAnimationFrame(drawLoop);

}

drawLoop();

}

script>

html>

以上就是小编为大家带来的基于HTML5的人脸识别活体认证的实现方法全部内容了