基于HTML5 的人脸识别活体认证
生活随笔
收集整理的這篇文章主要介紹了
基于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轉載于:https://www.cnblogs.com/lilies/p/5604212.html
總結
以上是生活随笔為你收集整理的基于HTML5 的人脸识别活体认证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html5表单新特性有哪些
- 下一篇： HTML5移动端音乐播放器（启蒙篇）