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

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

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

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

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

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

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <!--
  3. Ideallytheseelementsaren'tcreateduntilit'sconfirmedthatthe
  4. clientsupportsvideo/camera,butforthesakeofillustratingthe
  5. elementsinvolved,theyarecreatedwithmarkup(notJavaScript)
  6. -->
  7. <html>
  8. <metacharset="GBK">
  9. <style>
  10. #container{
  11. position:relative;
  12. }
  14. #canvas{
  15. position:absolute;
  16. left:0;
  17. top:0;
  18. }
  19. </style>
  20. <scriptsrc="utils.js"></script>
  21. <scriptsrc="clmtrackr.js"></script>
  22. <scriptsrc="./models/model_pca_20_svm.js"></script>
  23. <scriptsrc="numeric.js"></script>
  24. <scriptsrc="ccv.js"></script>
  26. <audioid="media">
  27. 你的浏览器不支持audio标签。
  28. </audio>
  29. <divid="container">
  30. <videoid="video"width="600"height="400"autoplay>
  31. 您的浏览器不支持video标签
  32. </video>
  33. <canvasid="canvas"width="600"height="400"></canvas>
  34. </div>
  36. <buttonid="snap">SnapPhoto</button>
  38. <buttonid="start">Start</button>
  40. <buttonid="showposition">显示</button>
  42. <buttonid="hideposition">不显示</button>
  44. <br/>
  46. <buttonid="mouse">张嘴验证</button>
  47. <buttonid="head">摇头验证</button>
  48. <buttonid="eye">眨眼验证</button>
  51. <divid="tip">
  52. </div>
  53. <divid="result">
  54. </div>
  55. <divid="msg">
  56. </div>
  58. <divid="positions">
  59. </div>
  61. <script>
  63. varshowpos=false;
  64. //Puteventlistenersintoplace
  65. //window.addEventListener("DOMContentLoaded",function(){
  67. //Grabelements,createsettings,etc.
  68. varcanvas=document.getElementById("canvas"),
  69. context=canvas.getContext("2d"),
  70. video=document.getElementById("video"),
  71. videoObj={"video":true},
  72. errBack=function(error){
  73. if(error.PERMISSION_DENIED){
  74. jAlert('用户拒绝了浏览器请求媒体的权限','提示');
  75. }elseif(error.NOT_SUPPORTED_ERROR){
  76. jAlert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器','提示');
  77. }elseif(error.MANDATORY_UNSATISFIED_ERROR){
  78. jAlert('指定的媒体类型未接收到媒体流','提示');
  79. }else{
  80. jAlert('系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试','提示');
  81. }
  82. };
  84. //Putvideolistenersintoplace
  85. if(navigator.getUserMedia){//Standard
  87. navigator.getUserMedia(videoObj,function(stream){
  89. video.src=stream;
  90. video.play();
  92. },errBack);
  94. }elseif(navigator.webkitGetUserMedia){//WebKit-prefixed
  96. try{
  98. navigator.webkitGetUserMedia(videoObj,function(stream){
  99. video.src=window.webkitURL.createObjectURL(stream);
  100. video.play();
  101. },errBack);
  103. }catch(error){
  104. alert(error);
  105. }
  107. }
  108. elseif(navigator.mozGetUserMedia){//Firefox-prefixed
  109. navigator.mozGetUserMedia(videoObj,function(stream){
  111. video.src=window.URL.createObjectURL(stream);
  112. video.play();
  113. },errBack);
  114. }
  118. //Triggerphototake
  119. document.getElementById("snap").addEventListener("click",function(){
  120. context.drawImage(video,0,0,600,400);
  121. });
  122. document.getElementById("start").addEventListener("click",function(){
  123. startTrack();
  124. });
  127. document.getElementById("showposition").addEventListener("click",function(){
  128. showpos=true;
  129. });
  131. document.getElementById("hideposition").addEventListener("click",function(){
  132. showpos=false;
  133. });
  135. document.getElementById("mouse").addEventListener("click",function(){
  136. alive_mouse();
  137. });
  138. document.getElementById("head").addEventListener("click",function(){
  139. alive_head();
  140. });
  142. document.getElementById("eye").addEventListener("click",function(){
  143. alive_eye();
  144. });
  149. //},false);
  152. </script>
  154. <script>
  156. //////////////////////////////////////////////////////////////////////////////
  157. //活体
  158. varlast_time=0;//时间因素
  159. varlast_nose_left=0;
  160. varlast_nose_top=0;
  162. //张嘴动作
  163. varis_mouse_ok=false;
  164. varis_alive_mouse=false;
  165. varlast_dis_eye_norse=0;
  166. varlast_dis_mouse=0;
  167. functionalive_mouse(){
  169. varmedia=document.getElementById("media");
  170. media.src="mp3/alive_mouse.mp3";
  171. media.play();
  173. document.getElementById("tip").innerHTML="请张合嘴巴";
  174. document.getElementById('result').innerHTML="";
  176. is_mouse_ok=false;
  177. last_dis_mouse=0;
  178. last_time=0;
  179. last_dis_eye_norse=100000000;
  181. is_alive_head=false;
  182. is_alive_mouse=true;
  183. is_alive_eye=false;
  185. }
  186. //摇头动作
  187. varis_head_ok=false;
  188. varis_alive_head=false;
  189. varlast_dis_left_right=100000000;
  190. functionalive_head(){
  192. varmedia=document.getElementById("media");
  193. media.src="mp3/alive_head.mp3";
  194. media.play();
  196. document.getElementById("tip").innerHTML="请在水平方向左右摇头";
  197. document.getElementById('result').innerHTML="";
  199. is_head_ok=false;
  200. last_dis_left_right=100000000;
  201. last_time=0;
  202. is_alive_head=true;
  203. is_alive_mouse=false;
  204. is_alive_eye=false;
  206. }
  208. //眨眼动作
  209. varis_alive_eye=false;
  210. varis_eye_ok=false;
  212. functionalive_eye(){
  213. varmedia=document.getElementById("media");
  214. media.src="mp3/alive_eye.mp3";
  215. media.play();
  217. document.getElementById("tip").innerHTML="请眨眼";
  218. document.getElementById('result').innerHTML="";
  220. is_eye_ok=false;
  221. last_dis_eye_norse=100000000;
  223. last_nose_left=0;
  224. last_nose_top=0;
  226. last_time=0;
  228. is_alive_head=false;
  229. is_alive_mouse=false;
  230. is_alive_eye=true;
  231. }
  234. functionstartTrack(){
  236. varvideoInput=document.getElementById('video');
  238. varctracker=newclm.tracker();
  239. ctracker.init(pModel);
  240. ctracker.start(videoInput);
  243. varcanvasInput=document.getElementById('canvas');
  244. varcc=canvasInput.getContext('2d');
  245. cc.lineWidth=3;
  247. functiondrawLoop(){
  248. //requestAnimationFrame(drawLoop);
  251. cc.clearRect(0,0,canvasInput.width,canvasInput.height);
  252. //ctracker.draw(canvasInput);
  253. varpositions=ctracker.getCurrentPosition();
  254. if(showpos&&positions){
  256. for(varp=0;p<positions.length;p++){
  257. positionString+="featurepoint"+p+":["+positions[p][0].toFixed(2)+","+positions[p][1].toFixed(2)+"]<br/>";
  258. }
  259. document.getElementById('positions').innerHTML=positionString;
  262. }
  263. if(positions){
  265. for(varp=0;p<71;p++){
  266. cc.beginPath();
  267. cc.arc(positions[p][0].toFixed(2),positions[p][1].toFixed(2),2,0,Math.PI*2,true);
  268. cc.closePath();
  269. cc.fillStyle='#00FF00';
  270. cc.fill();
  271. }
  274. //cc.strokeStyle='red';
  276. //0-14轮廓
  277. //7下吧，最下
  279. //2最左边
  280. //12最右边
  283. //15-22眉毛
  286. //23-27左眼睛五个点
  287. //27左眼中间
  288. //63-66左眼四个点
  290. //28-32右眼睛五个点
  291. //67-70右眼四个点
  294. //33-43鼻子
  295. //62鼻中间
  298. //44-61嘴巴
  299. //47嘴巴上
  300. //53嘴巴下
  302. ///////////////////////////////////////////////////////////////////////////////////////////////
  304. //左眼中间
  305. for(varp=27;p<=27;p++){
  306. cc.beginPath();
  307. cc.arc(positions[p][0].toFixed(2),positions[p][1].toFixed(2),2,0,Math.PI*2,true);
  308. cc.closePath();
  309. cc.fillStyle='red';
  310. cc.fill();
  311. }
  313. //鼻子中间
  314. for(varp=62;p<=62;p++){
  315. cc.beginPath();
  316. cc.arc(positions[p][0].toFixed(2),positions[p][1].toFixed(2),2,0,Math.PI*2,true);
  317. cc.closePath();
  318. cc.fillStyle='red';
  319. cc.fill();
  320. }
  321. //嘴巴上
  322. for(varp=57;p<=57;p++){
  323. cc.beginPath();
  324. cc.arc(positions[p][0].toFixed(2),positions[p][1].toFixed(2),2,0,Math.PI*2,true);
  325. cc.closePath();
  326. cc.fillStyle='red';
  327. cc.fill();
  328. }
  329. //嘴巴下
  330. for(varp=60;p<=60;p++){
  331. cc.beginPath();
  332. cc.arc(positions[p][0].toFixed(2),positions[p][1].toFixed(2),2,0,Math.PI*2,true);
  333. cc.closePath();
  334. cc.fillStyle='red';
  335. cc.fill();
  336. }
  337. //////////////////////////////////////
  338. //head
  339. if(is_alive_head==true){
  340. if(last_time==0||(newDate().getTime()-last_time>500&&newDate().getTime()-last_time<10000)){
  341. varxdiff_left=positions[62][0]-positions[2][0];
  342. varydiff_left=positions[62][1]-positions[2][1];
  343. vardis_left=Math.pow((xdiff_left*xdiff_left+ydiff_left*ydiff_left),0.5);
  345. varxdiff_right=positions[12][0]-positions[62][0];
  346. varydiff_right=positions[12][1]-positions[62][1];
  347. vardis_right=Math.pow((xdiff_right*xdiff_right+ydiff_right*ydiff_right),0.5);
  349. varxdiff_side=positions[12][0]-positions[2][0];
  350. varydiff_side=positions[12][1]-positions[2][1];
  351. vardis_side=Math.pow((xdiff_side*xdiff_side+ydiff_side*ydiff_side),0.5);
  354. vardis_left_right=dis_left-dis_right;
  355. document.getElementById('result').innerHTML=dis_left_right;
  358. if(last_dis_left_right>0&&dis_left_right>dis_side/3){
  360. document.getElementById('result').innerHTML="通过";
  362. is_head_ok=true;
  363. is_alive_head=false;
  365. }
  369. last_dis_left_right=dis_left_right;
  370. last_time=newDate().getTime();
  372. }
  373. }
  375. /////////////////////////////////////
  376. //mouse
  377. if(is_alive_mouse==true){
  378. if(last_time==0||(newDate().getTime()-last_time>500&&newDate().getTime()-last_time<10000)){
  380. //研究和鼻子距离
  381. varxdiff=positions[62][0]-positions[27][0];
  382. varydiff=positions[62][1]-positions[27][1];
  383. vardis_eye_norse=Math.pow((xdiff*xdiff+ydiff*ydiff),0.5);
  385. //上嘴唇和下嘴唇距离
  386. varxdiff_mouse=positions[53][0]-positions[47][0];
  387. varydiff_mouse=positions[53][1]-positions[47][1];
  388. vardis_mouse=Math.pow((xdiff_mouse*xdiff_mouse+ydiff_mouse*ydiff_mouse),0.5);
  390. //上次的眼鼻距离和这次的眼鼻距离差
  391. vardn=Math.abs(dis_eye_norse-last_dis_eye_norse);
  393. //上次的嘴距离和本次的嘴距离差
  394. vardm=Math.abs(dis_mouse-last_dis_mouse);
  399. //鼻子的位置确保变化不大
  400. if(last_nose_left>0&&last_nose_top>0
  401. &&Math.abs(positions[62][0]-last_nose_left)<5
  402. &&Math.abs(positions[62][1]-last_nose_top)<5
  403. ){
  405. document.getElementById('msg').innerHTML=dn;
  407. if(last_dis_eye_norse>0&&dn<dis_eye_norse*1/50){
  409. if(last_dis_mouse>0&&dm>dis_mouse/10){
  411. document.getElementById('result').innerHTML="通过";
  413. is_alive_mouse=false;
  414. is_mouse_ok=true;
  415. }
  417. }
  418. }
  421. last_dis_mouse=dis_mouse;
  422. last_dis_eye_norse=dis_eye_norse;
  423. last_time=newDate().getTime();
  425. last_nose_left=positions[62][0];
  426. last_nose_top=positions[62][1];
  428. }
  429. }
  431. /////////////////////////////////////
  432. //eye
  433. if(is_alive_eye==true){
  434. if(last_time==0||(newDate().getTime()-last_time>10)){
  437. varxdiff1=positions[62][0]-positions[27][0];
  438. varydiff1=positions[62][1]-positions[27][1];
  439. vardis_eye_norse1=Math.pow((xdiff1*xdiff1+ydiff1*ydiff1),0.5);
  441. varxdiff2=positions[62][0]-positions[32][0];
  442. varydiff2=positions[62][1]-positions[32][1];
  443. vardis_eye_norse2=Math.pow((xdiff2*xdiff2+ydiff2*ydiff2),0.5);
  445. vardis_eye_norse=(dis_eye_norse1+dis_eye_norse2);
  449. if(last_nose_left>0&&last_nose_top>0
  450. &&Math.abs(positions[62][0]-last_nose_left)<0.5
  451. &&Math.abs(positions[62][1]-last_nose_top)<0.5
  452. ){
  453. document.getElementById('msg').innerHTML=Math.abs(dis_eye_norse-last_dis_eye_norse)-dis_eye_norse*1/20;
  455. if(last_dis_eye_norse>0&&(Math.abs(dis_eye_norse-last_dis_eye_norse)>dis_eye_norse*1/20)){
  457. document.getElementById('result').innerHTML="通过";
  459. is_alive_eye=false;
  460. is_eye_ok=true;
  462. }
  463. }
  466. last_nose_left=positions[62][0];
  467. last_nose_top=positions[62][1];
  469. last_dis_eye_norse=dis_eye_norse;
  470. last_time=newDate().getTime();
  472. }
  475. }
  478. }
  480. requestAnimationFrame(drawLoop);
  482. }
  484. drawLoop();
  486. }
  490. </script>
  491. </html>

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

原文地址：http://www.cnblogs.com/lilies/archive/2016/06/21/5604212.html

您可能有感兴趣的文章
HTML5之高度塌陷问题的如何解决
html5笛卡尔心形曲线的如何实现
如何使用feDisplacementMap+feImage滤镜如何实现水波纹效果(计算动态值)
如何使用canvas对video视频某一刻截图功能
Canvas如何做个雪花屏版404的如何实现