主页 / 建站知识 /

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

建站知识 2021-07-02 23:00www.168986.cn长沙网站建设

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

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

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

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

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <!--  
  3. Ideally these elements aren't created until it's confirmed that the   
  4. client supports video/camera, but for the sake of illustrating the   
  5. elements involved, they are created with markup (not JavaScript)  
  6. -->  
  7. <html>  
  8. <meta charset="GBK">  
  9. <style>  
  10. #container {  
  11. position : relative;  
  12. }  
  13.  
  14. #canvas {  
  15. position : absolute;  
  16. left : 0;  
  17. top : 0;  
  18. }  
  19. </style>  
  20. <script src="utils.js"></script>  
  21. <script src="clmtrackr.js"></script>  
  22. <script src="./models/model_pca_20_svm.js"></script>  
  23. <script src="numeric.js"></script>  
  24. <script src="ccv.js"></script>  
  25.   
  26. <audio id="media">   
  27. 你的浏览器不支持audio标签。  
  28. </audio>  
  29. <div id="container">  
  30. <video id="video" width="600" height="400" autoplay >   
  31. 您的浏览器不支持video标签  
  32. </video>  
  33. <canvas id="canvas" width="600" height="400"></canvas>  
  34. </div>      
  35.   
  36. <button id="snap">Snap Photo</button>  
  37.   
  38. <button id="start">Start</button>  
  39.   
  40. <button id="showposition">显示</button>  
  41.   
  42. <button id="hideposition">不显示</button>  
  43.   
  44. <br/>  
  45.   
  46. <button id="mouse">张嘴验证</button>   
  47. <button id="head">摇头验证</button>   
  48. <button id="eye">眨眼验证</button>  
  49.   
  50.   
  51. <div id="tip">  
  52. </div>  
  53. <div id="result">  
  54. </div>  
  55. <div id="msg">  
  56. </div>  
  57.   
  58. <div id="positions">  
  59. </div>  
  60.   
  61. <script>  
  62.   
  63. var showpos=false;  
  64. // Put event listeners into place  
  65. //window.addEventListener("DOMContentLoaded", function() {  
  66.   
  67. // Grab elements, create settings, etc.  
  68. var canvas = 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. } else if (error.NOT_SUPPORTED_ERROR) {  
  76. jAlert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器', '提示');  
  77. } else if (error.MANDATORY_UNSATISFIED_ERROR) {  
  78. jAlert('指定的媒体类型未接收到媒体流', '提示');  
  79. } else {  
  80. jAlert('系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试', '提示');  
  81. }  
  82. };  
  83.   
  84. // Put video listeners into place  
  85. if(navigator.getUserMedia) { // Standard  
  86.   
  87. navigator.getUserMedia(videoObj, function(stream) {  
  88.   
  89. video.src = stream;  
  90. video.play();  
  91.   
  92. }, errBack);  
  93.   
  94. } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed  
  95.   
  96. try{  
  97.   
  98. navigator.webkitGetUserMedia(videoObj, function(stream){   
  99. video.src = window.webkitURL.createObjectURL(stream);  
  100. video.play();  
  101. }, errBack);  
  102.   
  103. }catch(error){  
  104. alert(error);  
  105. }  
  106.   
  107. }  
  108. else if(navigator.mozGetUserMedia) { // Firefox-prefixed  
  109. navigator.mozGetUserMedia(videoObj, function(stream){  
  110.   
  111. video.src = window.URL.createObjectURL(stream);  
  112. video.play();  
  113. }, errBack);  
  114. }  
  115.   
  116.   
  117.   
  118. // Trigger photo take  
  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. });  
  125.   
  126.   
  127. document.getElementById("showposition").addEventListener("click", function() {  
  128. showpos=true;  
  129. });  
  130.   
  131. document.getElementById("hideposition").addEventListener("click", function() {  
  132. showpos=false;  
  133. });  
  134.   
  135. document.getElementById("mouse").addEventListener("click", function() {  
  136. alive_mouse();  
  137. });  
  138. document.getElementById("head").addEventListener("click", function() {  
  139. alive_head();  
  140. });  
  141.   
  142. document.getElementById("eye").addEventListener("click", function() {  
  143. alive_eye();  
  144. });  
  145.   
  146.   
  147.   
  148.   
  149. /
上一篇：HTML5中使用postMessage实现两个网页间传递数据 下一篇：调用HTML5的Canvas API绘制图形的快速入门指南

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by

长沙网络推广|微博营销|长沙seo优化|视频营销|长沙网络营销|微信营销|长沙网站建设|口碑营销|软文营销