近幾年，人臉識別技術在身份認證領域的應用已經有了較多應用，例如：支付寶、招行的取款、養老金領取等方面，但在杜絕假冒、認證安全性等方面，目前仍是一個比較須要進一步解決的課題，特別是在移動端的活體認證技術方面。html
本文介紹了在HTML5 環境下能夠採用clmtrackr.js 檢測工具，結合人臉模型，實現人臉的跟蹤檢測。同時採用動做識別實現活體認證。web
但本方案只可以在Firefox 或者Chrome中使用。而且只適合研究學習，實際場景中不太理想，須要進一步優化纔可以應用。canvas
若是有人有相關的技術，能夠推薦介紹給我。瀏覽器
<!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