基于HTML5 的人脸识别活体认证
生活随笔
收集整理的這篇文章主要介紹了
基于HTML5 的人脸识别活体认证
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
近幾年，人臉識(shí)別技術(shù)在身份認(rèn)證領(lǐng)域的應(yīng)用已經(jīng)有了較多應(yīng)用，例如：支付寶、招行的取款、養(yǎng)老金領(lǐng)取等方面，但在杜絕假冒、認(rèn)證安全性等方面，目前還是一個(gè)比較需要進(jìn)一步解決的課題，特別是在移動(dòng)端的活體認(rèn)證技術(shù)方面。
本文介紹了在HTML5 環(huán)境下可以采用clmtrackr.js 檢測(cè)工具，結(jié)合人臉模型，實(shí)現(xiàn)人臉的跟蹤檢測(cè)。同時(shí)采用動(dòng)作識(shí)別實(shí)現(xiàn)活體認(rèn)證。
但本方案只能夠在Firefox 或者Chrome中使用。并且只適合研究學(xué)習(xí)，實(shí)際場(chǎng)景中不太理想，需要進(jìn)一步優(yōu)化才能夠應(yīng)用。
如果有人有相關(guān)的技術(shù)，可以推薦介紹給我。
<!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標(biāo)簽。 </audio> <div id="container"> <video id="video" width="600" height="400" autoplay > 您的瀏覽器不支持video標(biāo)簽 </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">張嘴驗(yàn)證</button> <button id="head">搖頭驗(yàn)證</button> <button id="eye">眨眼驗(yàn)證</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('用戶拒絕了瀏覽器請(qǐng)求媒體的權(quán)限', '提示'); } else if (error.NOT_SUPPORTED_ERROR) { jAlert('對(duì)不起，您的瀏覽器不支持拍照功能，請(qǐng)使用其他瀏覽器', '提示'); } else if (error.MANDATORY_UNSATISFIED_ERROR) { jAlert('指定的媒體類型未接收到媒體流', '提示'); } else { jAlert('系統(tǒng)未能獲取到攝像頭，請(qǐng)確保攝像頭已正確安裝。或嘗試刷新頁面，重試', '提示'); } }; // 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;//時(shí)間因素 var last_nose_left=0; var last_nose_top=0; //張嘴動(dòng)作 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="請(qǐng)張合嘴巴"; 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轉(zhuǎn)載于:https://www.cnblogs.com/lilies/p/5604212.html
總結(jié)
以上是生活随笔為你收集整理的基于HTML5 的人脸识别活体认证的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html5表单新特性有哪些
- 下一篇： BZOJ 2436 NOI嘉年华(单调优