近幾年，人臉識別技術在身份認證領域的應用已經有了較多應用，例如：支付寶、招行的取款、養老金領取等方面，但在杜絕假冒、認證安全性等方面，目前還是一個比較需要進一步解決的課題，特別是在移動端的活體認證技術方面。 本文介紹了在HTML5 環境下可以採用clmtrackr.js 檢測工具，結合人臉模型，實現 ...
近幾年，人臉識別技術在身份認證領域的應用已經有了較多應用，例如：支付寶、招行的取款、養老金領取等方面，但在杜絕假冒、認證安全性等方面，目前還是一個比較需要進一步解決的課題，特別是在移動端的活體認證技術方面。
本文介紹了在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