返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

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

2019-01-28 14:41:59王冬梅

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

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

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

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

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   <!--  
  2. Ideally these elements aren't created until it's confirmed that the    client supports video/camera, but for the sake of illustrating the   
  3. elements involved, they are created with markup (not JavaScript)   -->  
  4. <html>   <meta charset="GBK">  
  5. <style>   #container {  
  6. position : relative;   }  
  7.   #canvas {  
  8. position : absolute;   left : 0;  
  9. top : 0;   }  
  10. </style>   <script src="utils.js"></script>  
  11. <script src="clmtrackr.js"></script>   <script src="./models/model_pca_20_svm.js"></script>  
  12. <script src="numeric.js"></script>   <script src="ccv.js"></script>  
  13.    <audio id="media">   
  14. 你的浏览器不支持audio标签。   </audio>  
  15. <div id="container">   <video id="video" width="600" height="400" autoplay >   
  16. 您的浏览器不支持video标签   </video>  
  17. <canvas id="canvas" width="600" height="400"></canvas>   </div>      
  18.    <button id="snap">Snap Photo</button>  
  19.    <button id="start">Start</button>  
  20.    <button id="showposition">显示</button>  
  21.    <button id="hideposition">不显示</button>  
  22.    <br/>  
  23.    <button id="mouse">张嘴验证</button>   
  24. <button id="head">摇头验证</button>    <button id="eye">眨眼验证</button>  
  25.      
  26. <div id="tip">   </div>  
  27. <div id="result">   </div>  
  28. <div id="msg">   </div>  
  29.    <div id="positions">  
  30. </div>     
  31. <script>     
  32. var showpos=false;   // Put event listeners into place  
  33. //window.addEventListener("DOMContentLoaded", function() {     
  34. // Grab elements, create settings, etc.   var canvas = document.getElementById("canvas"),  
  35. context = canvas.getContext("2d"),   video = document.getElementById("video"),  
  36. videoObj = { "video": true },   errBack = function(error) {  
  37. if (error.PERMISSION_DENIED) {   jAlert('用户拒绝了浏览器请求媒体的权限', '提示');  
  38. } else if (error.NOT_SUPPORTED_ERROR) {   jAlert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器', '提示');  
  39. } else if (error.MANDATORY_UNSATISFIED_ERROR) {   jAlert('指定的媒体类型未接收到媒体流', '提示');  
  40. } else {   jAlert('系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试', '提示');  
  41. }   };  
  42.    // Put video listeners into place  
  43. if(navigator.getUserMedia) { // Standard     
  44. navigator.getUserMedia(videoObj, function(stream) {     
  45. video.src = stream;   video.play();  
  46.    }, errBack);  
  47.    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed  
  48.    try{  
  49.    navigator.webkitGetUserMedia(videoObj, function(stream){   
  50. video.src = window.webkitURL.createObjectURL(stream);   video.play();  
  51. }, errBack);     
  52. }catch(error){   alert(error);  
  53. }     
  54. }   else if(navigator.mozGetUserMedia) { // Firefox-prefixed  
  55. navigator.mozGetUserMedia(videoObj, function(stream){     
  56. video.src = window.URL.createObjectURL(stream);   video.play();  
  57. }, errBack);   }  
  58.      
  59.    // Trigger photo take  
  60. document.getElementById("snap").addEventListener("click", function() {   context.drawImage(video, 0, 0, 600, 400);  
  61. });   document.getElementById("start").addEventListener("click", function() {  
  62. startTrack();   });  
  63.      
  64. document.getElementById("showposition").addEventListener("click", function() {   showpos=true;  
  65. });     
  66. document.getElementById("hideposition").addEventListener("click", function() {   showpos=false;  
  67. });     
  68. document.getElementById("mouse").addEventListener("click", function() {   alive_mouse();  
  69. });   document.getElementById("head").addEventListener("click", function() {  
  70. alive_head();   });  
  71.    document.getElementById("eye").addEventListener("click", function() {  
  72. alive_eye();   });  
  73.      
  74.      
  75. //}, false);     
  76.    </script>  
  77.    <script>  
  78.    //////////////////////////////////////////////////////////////////////////////  
  79. //活体   var last_time=0;//时间因素  
  80. var last_nose_left=0;   var last_nose_top=0;  
  81.    //张嘴动作  
  82. var is_mouse_ok=false;    var is_alive_mouse=false;  
  83. var last_dis_eye_norse=0;   var last_dis_mouse=0;  
  84. function alive_mouse(){     
  85. var media = document.getElementById("media");   media.src="mp3/alive_mouse.mp3";  
  86. media.play();     
  87. document.getElementById("tip").innerHTML="请张合嘴巴";   document.getElementById('result').innerHTML = "";  
  88.    is_mouse_ok=false;  
  89. last_dis_mouse=0;   last_time=0;  
  90. last_dis_eye_norse=100000000;      
  91. is_alive_head=false;   is_alive_mouse=true;  
  92. is_alive_eye=false;     
  93. }   //摇头动作  
  94. var is_head_ok=false;    var is_alive_head=false;  
  95. var last_dis_left_right=100000000;    function alive_head(){  
  96.    var media = document.getElementById("media");  
  97. media.src="mp3/alive_head.mp3";   media.play();  
  98.    document.getElementById("tip").innerHTML="请在水平方向左右摇头";  
  99. document.getElementById('result').innerHTML = "";     
  100. is_head_ok=false;   last_dis_left_right=100000000;   
  101. last_time=0;    is_alive_head=true;  
  102. is_alive_mouse=false;   is_alive_eye=false;  
  103.    }  
  104.    //眨眼动作  
  105. var is_alive_eye=false;   var is_eye_ok = false;  
  106.    function alive_eye(){  
  107. var media = document.getElementById("media");   media.src="mp3/alive_eye.mp3";  
  108. media.play();     
  109. document.getElementById("tip").innerHTML="请眨眼";   document.getElementById('result').innerHTML = "";  
  110.    is_eye_ok=false;  
  111. last_dis_eye_norse=100000000;      
  112. last_nose_left=0;   last_nose_top=0;  
  113.    last_time=0;   
  114.    is_alive_head=false;  
  115. is_alive_mouse=false;   is_alive_eye=true;  
  116. }     
  117.    function startTrack(){  
  118.    var videoInput = document.getElementById('video');  
  119.    var ctracker = new clm.tracker();  
  120. ctracker.init(pModel);   ctracker.start(videoInput);  
  121.      
  122. var canvasInput = document.getElementById('canvas');   var cc = canvasInput.getContext('2d');  
  123. cc.lineWidth=3;     
  124. function drawLoop() {   //requestAnimationFrame(drawLoop);  
  125.      
  126. cc.clearRect(0, 0, canvasInput.width, canvasInput.height);   //ctracker.draw(canvasInput );  
  127. var positions = ctracker.getCurrentPosition();   if (showpos && positions) {  
  128.    for (var p = 0;p < positions.length;p++) {  
  129. positionString += "featurepoint "+p+" : ["+positions[p][0].toFixed(2)+","+positions[p][1].toFixed(2) +"]<br/>";   }  
  130. document.getElementById('positions').innerHTML = positionString;     
  131.    }  
  132. if(positions){     
  133. for (var p =0;p < 71;p++) {       cc.beginPath();  
  134. cc.arc(positions[p][0].toFixed(2), positions[p][1].toFixed(2),2, 0, Math.PI * 2, true);   cc.closePath();  
  135. cc.fillStyle = '#00FF00';   cc.fill();  
  136. }     
  137.    //cc.strokeStyle = 'red';  
  138.    //0-14 轮廓  
  139. //7 下吧，最下     
  140. //2 最左边   //12 最右边  
  141.      
  142. //15-22 眉毛     
  143.    //23-27 左眼睛五个点  
  144. //27 左眼中间   //63-66 左眼四个点  
  145.    //28-32 右眼睛五个点  
  146. //67-70 右眼四个点     
  147.    //33-43 鼻子  
  148. //62 鼻中间     
  149.    //44-61 嘴巴  
  150. //47 嘴巴上   //53 嘴巴下  
  151.    ///////////////////////////////////////////////////////////////////////////////////////////////  
  152.    //左眼中间  
  153. for (var p =27;p <=27;p++) {       cc.beginPath();  
  154. cc.arc(positions[p][0].toFixed(2), positions[p][1].toFixed(2), 2, 0, Math.PI * 2, true);   cc.closePath();  
  155. cc.fillStyle = 'red';   cc.fill();  
  156. }     
  157. //鼻子中间   for (var p =62;p <=62;p++) {      
  158. cc.beginPath();   cc.arc(positions[p][0].toFixed(2), positions[p][1].toFixed(2), 2, 0, Math.PI * 2, true);  
  159. cc.closePath();   cc.fillStyle = 'red';  
  160. cc.fill();   }  
  161. //嘴巴上   for (var p =57;p <=57;p++) {      
  162. cc.beginPath();   cc.arc(positions[p][0].toFixed(2), positions[p][1].toFixed(2), 2, 0, Math.PI * 2, true);  
  163. cc.closePath();   cc.fillStyle = 'red';  
  164. cc.fill();   }  
  165. //嘴巴下   for (var p =60;p <=60;p++) {      
  166. cc.beginPath();   cc.arc(positions[p][0].toFixed(2), positions[p][1].toFixed(2), 2, 0, Math.PI * 2, true);  
  167. cc.closePath();   cc.fillStyle = 'red';  
  168. cc.fill();   }  
  169. //////////////////////////////////////   //head  
  170. if(is_alive_head==true){   if(last_time==0 || (new Date().getTime()-last_time>500 && new Date().getTime()-last_time<10000 ) ){  
  171. var xdiff_left = positions[62][0] - positions[2][0] ;   var ydiff_left = positions[62][1] - positions[2][1] ;  
  172. var dis_left = Math.pow((xdiff_left * xdiff_left + ydiff_left * ydiff_left), 0.5);     
  173. var xdiff_right = positions[12][0] - positions[62][0] ;   var ydiff_right = positions[12][1] - positions[62][1] ;  
  174. var dis_right = Math.pow((xdiff_right * xdiff_right + ydiff_right * ydiff_right), 0.5);     
  175. var xdiff_side = positions[12][0] - positions[2][0] ;   var ydiff_side = positions[12][1] - positions[2][1] ;  
  176. var dis_side = Math.pow((xdiff_side * xdiff_side + ydiff_side * ydiff_side), 0.5);     
  177.    var dis_left_right = dis_left - dis_right;  
  178. document.getElementById('result').innerHTML = dis_left_right;     
  179.    if(last_dis_left_right>0 && dis_left_right > dis_side/3){  
  180.    document.getElementById('result').innerHTML = "通过";  
  181.    is_head_ok=true;  
  182. is_alive_head=false;     
  183. }     
  184.      
  185. last_dis_left_right=dis_left_right;    last_time = new Date().getTime();  
  186.    }  
  187. }     
  188. /////////////////////////////////////   //mouse   
  189. if(is_alive_mouse==true){   if(last_time==0 || (new Date().getTime()-last_time>500 && new Date().getTime()-last_time<10000 ) ){  
  190.    //研究和鼻子距离  
  191. var xdiff = positions[62][0] - positions[27][0] ;   var ydiff = positions[62][1] - positions[27][1] ;   
  192. var dis_eye_norse = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);     
  193. //上嘴唇 和下嘴唇距离   var xdiff_mouse = positions[53][0] - positions[47][0] ;  
  194. var ydiff_mouse = positions[53][1] - positions[47][1] ;    var dis_mouse = Math.pow((xdiff_mouse * xdiff_mouse + ydiff_mouse * ydiff_mouse), 0.5);  
  195.    //上次的眼鼻距离和这次的眼鼻距离差  
  196. var dn= Math.abs(dis_eye_norse-last_dis_eye_norse);     
  197. //上次的嘴距离和本次的嘴距离差   var dm=Math.abs(dis_mouse - last_dis_mouse);  
  198.      
  199.      
  200. //鼻子的位置确保变化不大   if(last_nose_left>0 && last_nose_top>0  
  201. && Math.abs(positions[62][0]-last_nose_left)<5   && Math.abs(positions[62][1]-last_nose_top)<5  
  202. ){     
  203. document.getElementById('msg').innerHTML = dn;     
  204. if(last_dis_eye_norse>0 && dn < dis_eye_norse*1/50){      
  205. if(last_dis_mouse>0 && dm > dis_mouse/10){     
  206. document.getElementById('result').innerHTML = "通过";     
  207. is_alive_mouse=false;   is_mouse_ok=true;  
  208. }     
  209. }   }  
  210.      
  211. last_dis_mouse = dis_mouse;   last_dis_eye_norse = dis_eye_norse;  
  212. last_time = new Date().getTime();      
  213. last_nose_left = positions[62][0];   last_nose_top = positions[62][1];  
  214.    }  
  215. }     
  216. /////////////////////////////////////   //eye   
  217. if(is_alive_eye==true){   if(last_time==0 || (new Date().getTime()-last_time>10 ) ){  
  218.      
  219. var xdiff1 = positions[62][0] - positions[27][0] ;   var ydiff1 = positions[62][1] - positions[27][1] ;   
  220. var dis_eye_norse1 = Math.pow((xdiff1 * xdiff1 + ydiff1 * ydiff1), 0.5);     
  221. var xdiff2 = positions[62][0] - positions[32][0] ;   var ydiff2 = positions[62][1] - positions[32][1] ;   
  222. var dis_eye_norse2 = Math.pow((xdiff2 * xdiff2 + ydiff2 * ydiff2), 0.5);     
  223. var dis_eye_norse = (dis_eye_norse1 + dis_eye_norse2);     
  224.      
  225. if(last_nose_left>0 && last_nose_top>0   && Math.abs(positions[62][0]-last_nose_left)<0.5  
  226. && Math.abs(positions[62][1]-last_nose_top)<0.5   ){  
  227. document.getElementById('msg').innerHTML = Math.abs(dis_eye_norse - last_dis_eye_norse) - dis_eye_norse*1/20;     
  228. if(last_dis_eye_norse>0 && (Math.abs(dis_eye_norse - last_dis_eye_norse) > dis_eye_norse*1/20 ) ){     
  229. document.getElementById('result').innerHTML = "通过";     
  230. is_alive_eye=false;   is_eye_ok=true;  
  231.    }  
  232. }     
  233.    last_nose_left = positions[62][0];  
  234. last_nose_top = positions[62][1];     
  235. last_dis_eye_norse = dis_eye_norse;   last_time = new Date().getTime();   
  236.    }  
  237.      
  238. }     
  239.    }  
  240.    requestAnimationFrame(drawLoop);  
  241.    }  
  242.    drawLoop();  
  243.    }  
  244.       
  245.    </script>  
  246. </html>  
相关文章 大家在看