基于HTML5 的人脸识别活体认证
Posted 百合园
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于HTML5 的人脸识别活体认证相关的知识，希望对你有一定的参考价值。
近几年，人脸识别技术在身份认证领域的应用已经有了较多应用，例如：支付宝、招行的取款、养老金领取等方面，但在杜绝假冒、认证安全性等方面，目前还是一个比较需要进一步解决的课题，特别是在移动端的活体认证技术方面。
本文介绍了在html5 环境下可以采用clmtrackr.js 检测工具，结合人脸模型，实现人脸的跟踪检测。同时采用动作识别实现活体认证。
但本方案只能够在Firefox 或者Chrome中使用。并且只适合研究学习，实际场景中不太理想，需要进一步优化才能够应用。
如果有人有相关的技术，可以推荐介绍给我。
<!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