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

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

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

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

JavaScript Code 复制内容到剪贴板 <!DOCTYPE html>   <!--   Ideally these elements aren 't created until it' s confirmed that the    client supports video/camera, but  for  the sake of illustrating the    elements involved, they are created  with  markup (not JavaScript)   -->   <html>   <meta charset= "GBK" >   <style>   #container {    position : relative;   }     #canvas {   position : absolute;   left : 0;   top : 0;   }   </style>   <script src= "utils.js" ></script>   <script src= "clmtrackr.js" ></script>   <script src= "./models/model_pca_20_svm.js" ></script>   <script src= "numeric.js" ></script>   <script src= "ccv.js" ></script>      <audio id= "media" >    你的浏览器不支持audio标签。   </audio>   <div id= "container" >   <video id= "video"  width= "600"  height= "400"  autoplay >    您的浏览器不支持video标签   </video>   <canvas id= "canvas"  width= "600"  height= "400" ></canvas>   </div>          <button id= "snap" >Snap Photo</button>      <button id= "start" >Start</button>      <button id= "showposition" >显示</button>      <button id= "hideposition" >不显示</button>      <br/>      <button id= "mouse" >张嘴验证</button>    <button id= "head" >摇头验证</button>    <button id= "eye" >眨眼验证</button>         <div id= "tip" >   </div>   <div id= "result" >   </div>   <div id= "msg" >   </div>      <div id= "positions" >   </div>      <script>      var  showpos= false ;   // Put event listeners into place    //window.addEventListener("DOMContentLoaded", function() {       // Grab elements, create settings, etc.    var  canvas = document.getElementById( "canvas" ),   context = canvas.getContext( "2d" ),   video = document.getElementById( "video" ),   videoObj = {  "video" :  true  },   errBack =  function (error) {   if  (error.PERMISSION_DENIED) {   jAlert( '用户拒绝了浏览器请求媒体的权限' ,  '提示' );   }  else   if  (error.NOT_SUPPORTED_ERROR) {   jAlert( '对不起，您的浏览器不支持拍照功能，请使用其他浏览器' ,  '提示' );   }  else   if  (error.MANDATORY_UNSATISFIED_ERROR) {   jAlert( '指定的媒体类型未接收到媒体流' ,  '提示' );   }  else  {   jAlert( '系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试' ,  '提示' );   }   };      // Put video listeners into place    if (navigator.getUserMedia) {  // Standard       navigator.getUserMedia(videoObj,  function (stream) {      video.src = stream;   video.play();      }, errBack);      }  else   if (navigator.webkitGetUserMedia) {  // WebKit-prefixed       try {      navigator.webkitGetUserMedia(videoObj,  function (stream){    video.src = window.webkitURL.createObjectURL(stream);   video.play();   }, errBack);      } catch (error){   alert(error);   }      }   else   if (navigator.mozGetUserMedia) {  // Firefox-prefixed    navigator.mozGetUserMedia(videoObj,  function (stream){      video.src = window.URL.createObjectURL(stream);   video.play();   }, errBack);   }            // Trigger photo take    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>      //////////////////////////////////////////////////////////////////////////////    //活体    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;   function  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;    function  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 ;      function  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 ;   }         function  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;      function  drawLoop() {   //requestAnimationFrame(drawLoop);          cc.clearRect(0, 0, canvasInput.width, canvasInput.height);   //ctracker.draw(canvasInput );    var  positions = ctracker.getCurrentPosition();   if  (showpos && positions) {      for  ( var  p = 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  ( 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 = '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  ( 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 =  'red' ;   cc.fill();   }      //鼻子中间    for  ( 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 =  'red' ;   cc.fill();   }   //嘴巴上    for  ( 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 =  'red' ;   cc.fill();   }   //嘴巴下    for  ( 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 =  'red' ;   cc.fill();   }   //////////////////////////////////////    //head    if (is_alive_head== true ){   if (last_time==0 || ( new  Date().getTime()-last_time>500 &&  new  Date().getTime()-last_time<10000 ) ){   var  xdiff_left = positions[62][0] - positions[2][0] ;   var  ydiff_left = positions[62][1] - positions[2][1] ;   var  dis_left = Math.pow((xdiff_left * xdiff_left   ydiff_left * ydiff_left), 0.5);      var  xdiff_right = positions[12][0] - positions[62][0] ;   var  ydiff_right = positions[12][1] - positions[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;         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 =  new  Date().getTime();      }   }      /////////////////////////////////////    //mouse     if (is_alive_mouse== true ){   if (last_time==0 || ( new  Date().getTime()-last_time>500 &&  new  Date().getTime()-last_time<10000 ) ){      //研究和鼻子距离    var  xdiff = positions[62][0] - positions[27][0] ;   var  ydiff = positions[62][1] - positions[27][1] ;    var  dis_eye_norse = Math.pow((xdiff * xdiff   ydiff * ydiff), 0.5);      //上嘴唇 和下嘴唇距离    var  xdiff_mouse = positions[53][0] - positions[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);               //鼻子的位置确保变化不大    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 =  new  Date().getTime();       last_nose_left = positions[62][0];   last_nose_top = positions[62][1];      }   }      /////////////////////////////////////    //eye     if (is_alive_eye== true ){   if (last_time==0 || ( new  Date().getTime()-last_time>10 ) ){         var  xdiff1 = positions[62][0] - positions[27][0] ;   var  ydiff1 = positions[62][1] - positions[27][1] ;    var  dis_eye_norse1 = Math.pow((xdiff1 * xdiff1   ydiff1 * ydiff1), 0.5);      var  xdiff2 = positions[62][0] - positions[32][0] ;   var  ydiff2 = positions[62][1] - positions[32][1] ;    var  dis_eye_norse2 = Math.pow((xdiff2 * xdiff2   ydiff2 * ydiff2), 0.5);      var  dis_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 =  new  Date().getTime();       }         }         }      requestAnimationFrame(drawLoop);      }      drawLoop();      }             </script>   </html>  

以上就是小编为大家带来的基于HTML5 的人脸识别活体认证的实现方法全部内容了，希望大家多多支持脚本之家~

原文地址：http://imgbuyun.weixiu-service.com/up79/202309/jwkknmxq30i.html