基于HTML5 的人臉識別活體認(rèn)證的實(shí)現(xiàn)方法

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)頁制作

來源：易賢網(wǎng) 閱讀：2157 次日期：2016-07-04 15:12:24

溫馨提示：易賢網(wǎng)小編為您整理了“基于HTML5 的人臉識別活體認(rèn)證的實(shí)現(xiàn)方法”,方便廣大網(wǎng)友查閱！

近幾年，人臉識別技術(shù)在身份認(rèn)證領(lǐng)域的應(yīng)用已經(jīng)有了較多應(yīng)用，例如：支付寶、招行的取款、養(yǎng)老金領(lǐng)取等方面，但在杜絕假冒、認(rèn)證安全性等方面，目前還是一個比較需要進(jìn)一步解決的課題，特別是在移動端的活體認(rèn)證技術(shù)方面。

本文介紹了在HTML5 環(huán)境下可以采用clmtrackr.js 檢測工具，結(jié)合人臉模型，實(shí)現(xiàn)人臉的跟蹤檢測。同時采用動作識別實(shí)現(xiàn)活體認(rèn)證。

但本方案只能夠在Firefox 或者Chrome中使用。并且只適合研究學(xué)習(xí)，實(shí)際場景中不太理想，需要進(jìn)一步優(yōu)化才能夠應(yīng)用。

如果有人有相關(guān)的技術(shù)，可以推薦介紹給我。

JavaScript Code

<!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>

<style>

#container {

position : relative;

}

#canvas {

position : absolute;

left : 0;

top : 0;

}

</style>

你的瀏覽器不支持audio標(biāo)簽。

</audio>

您的瀏覽器不支持video標(biāo)簽

</video>

</div>

<button id="snap">Snap Photo</button>

<button id="start">Start</button>

<br/>

</div>

</div>

</div>

</div>

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('用戶拒絕了瀏覽器請求媒體的權(quán)限', '提示');

} else if (error.NOT_SUPPORTED_ERROR) {

jAlert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器', '提示');

} else if (error.MANDATORY_UNSATISFIED_ERROR) {

jAlert('指定的媒體類型未接收到媒體流', '提示');

} else {

jAlert('系統(tǒng)未能獲取到攝像頭，請確保攝像頭已正確安裝?；驀L試刷新頁面，重試', '提示');

}

};

// 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>

//////////////////////////////////////////////////////////////////////////////

//活體

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;

var is_alive_head=false;

var last_dis_left_right=100000000;

function alive_head(){

var media = document.getElementById("media");

media.src="mp3/alive_head.mp3";

media.play();

document.getElementById("tip").innerHTML="請?jiān)谒椒较蜃笥覔u頭";

document.getElementById('result').innerHTML = "";

is_head_ok=false;

last_dis_left_right=100000000;

last_time=0;

is_alive_head=true;

is_alive_mouse=false;

is_alive_eye=false;

}

//眨眼動作

var is_alive_eye=false;

var is_eye_ok = false;

function alive_eye(){

var media = document.getElementById("media");

media.src="mp3/alive_eye.mp3";

media.play();

document.getElementById("tip").innerHTML="請眨眼";

document.getElementById('result').innerHTML = "";

is_eye_ok=false;

last_dis_eye_norse=100000000;

last_nose_left=0;

last_nose_top=0;

last_time=0;

is_alive_head=false;

is_alive_mouse=false;

is_alive_eye=true;

}

function startTrack(){

var videoInput = document.getElementById('video');

var ctracker = new clm.tracker();

ctracker.init(pModel);

ctracker.start(videoInput);

var canvasInput = document.getElementById('canvas');

var cc = canvasInput.getContext('2d');

cc.lineWidth=3;

function drawLoop() {

//requestAnimationFrame(drawLoop);

cc.clearRect(0, 0, canvasInput.width, canvasInput.height);

//ctracker.draw(canvasInput );

var positions = ctracker.getCurrentPosition();

if (showpos && positions) {

for (var p = 0;p < positions.length;p++) {

positionString += "featurepoint "+p+" : ["+positions[p][0].toFixed(2)+","+positions[p][1].toFixed(2) +"]<br/>";

}

document.getElementById('positions').innerHTML = positionString;

}

if(positions){

for (var p =0;p < 71;p++) {

cc.beginPath();

cc.arc(positions[p][0].toFixed(2), positions[p][1].toFixed(2),2, 0, Math.PI * 2, true);

cc.closePath();

cc.fillStyle = '#00FF00';

cc.fill();

}

//cc.strokeStyle = 'red';

//0-14 輪廓

//7 下吧，最下

//2 最左邊

//12 最右邊

//15-22 眉毛

//23-27 左眼睛五個點(diǎn)

//27 左眼中間

//63-66 左眼四個點(diǎn)

//28-32 右眼睛五個點(diǎn)

//67-70 右眼四個點(diǎn)

//33-43 鼻子

//62 鼻中間

//44-61 嘴巴

//47 嘴巴上

//53 嘴巴下

///////////////////////////////////////////////////////////////////////////////////////////////

//左眼中間

for (var p =27;p <=27;p++) {

cc.beginPath();

cc.arc(positions[p][0].toFixed(2), positions[p][1].toFixed(2), 2, 0, Math.PI * 2, true);

cc.closePath();

cc.fillStyle = 'red';

cc.fill();

}

//鼻子中間

for (var p =62;p <=62;p++) {

cc.beginPath();

cc.arc(positions[p][0].toFixed(2), positions[p][1].toFixed(2), 2, 0, Math.PI * 2, true);

cc.closePath();

cc.fillStyle = 'red';

cc.fill();

}

//嘴巴上

for (var p =57;p <=57;p++) {

cc.beginPath();

cc.arc(positions[p][0].toFixed(2), positions[p][1].toFixed(2), 2, 0, Math.PI * 2, true);

cc.closePath();

cc.fillStyle = 'red';

cc.fill();

}

//嘴巴下

for (var p =60;p <=60;p++) {

cc.beginPath();

cc.arc(positions[p][0].toFixed(2), positions[p][1].toFixed(2), 2, 0, Math.PI * 2, true);

cc.closePath();

cc.fillStyle = 'red';

cc.fill();

}

//////////////////////////////////////

//head

if(is_alive_head==true){

if(last_time==0 || (new Date().getTime()-last_time>500 && new Date().getTime()-last_time<10000 ) ){

var xdiff_left = positions[62][0] - positions[2][0] ;

var ydiff_left = positions[62][1] - positions[2][1] ;

var dis_left = Math.pow((xdiff_left * xdiff_left + ydiff_left * ydiff_left), 0.5);

var xdiff_right = positions[12][0] - positions[62][0] ;

var ydiff_right = positions[12][1] - positions[62][1] ;

var dis_right = Math.pow((xdiff_right * xdiff_right + ydiff_right * ydiff_right), 0.5);

var xdiff_side = positions[12][0] - positions[2][0] ;

var ydiff_side = positions[12][1] - positions[2][1] ;

var dis_side = Math.pow((xdiff_side * xdiff_side + ydiff_side * ydiff_side), 0.5);

var dis_left_right = dis_left - dis_right;

document.getElementById('result').innerHTML = dis_left_right;

if(last_dis_left_right>0 && dis_left_right > dis_side/3){

document.getElementById('result').innerHTML = "通過";

is_head_ok=true;

is_alive_head=false;

}

last_dis_left_right=dis_left_right;

last_time = new Date().getTime();

}

/////////////////////////////////////

//mouse

if(is_alive_mouse==true){

if(last_time==0 || (new Date().getTime()-last_time>500 && new Date().getTime()-last_time<10000 ) ){

//研究和鼻子距離

var xdiff = positions[62][0] - positions[27][0] ;

var ydiff = positions[62][1] - positions[27][1] ;

var dis_eye_norse = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);

//上嘴唇和下嘴唇距離

var xdiff_mouse = positions[53][0] - positions[47][0] ;

var ydiff_mouse = positions[53][1] - positions[47][1] ;

var dis_mouse = Math.pow((xdiff_mouse * xdiff_mouse + ydiff_mouse * ydiff_mouse), 0.5);

//上次的眼鼻距離和這次的眼鼻距離差

var dn= Math.abs(dis_eye_norse-last_dis_eye_norse);

//上次的嘴距離和本次的嘴距離差

var dm=Math.abs(dis_mouse - last_dis_mouse);

//鼻子的位置確保變化不大

if(last_nose_left>0 && last_nose_top>0

&& Math.abs(positions[62][0]-last_nose_left)<5

&& Math.abs(positions[62][1]-last_nose_top)<5

){

document.getElementById('msg').innerHTML = dn;

if(last_dis_eye_norse>0 && dn < dis_eye_norse*1/50){

if(last_dis_mouse>0 && dm > dis_mouse/10){

document.getElementById('result').innerHTML = "通過";

is_alive_mouse=false;

is_mouse_ok=true;

}

last_dis_mouse = dis_mouse;

last_dis_eye_norse = dis_eye_norse;

last_time = new Date().getTime();

last_nose_left = positions[62][0];

last_nose_top = positions[62][1];

}

/////////////////////////////////////

//eye

if(is_alive_eye==true){

if(last_time==0 || (new Date().getTime()-last_time>10 ) ){

var xdiff1 = positions[62][0] - positions[27][0] ;

var ydiff1 = positions[62][1] - positions[27][1] ;

var dis_eye_norse1 = Math.pow((xdiff1 * xdiff1 + ydiff1 * ydiff1), 0.5);

var xdiff2 = positions[62][0] - positions[32][0] ;

var ydiff2 = positions[62][1] - positions[32][1] ;

var dis_eye_norse2 = Math.pow((xdiff2 * xdiff2 + ydiff2 * ydiff2), 0.5);

var dis_eye_norse = (dis_eye_norse1 + dis_eye_norse2);

if(last_nose_left>0 && last_nose_top>0

&& Math.abs(positions[62][0]-last_nose_left)<0.5

&& Math.abs(positions[62][1]-last_nose_top)<0.5

){

document.getElementById('msg').innerHTML = Math.abs(dis_eye_norse - last_dis_eye_norse) - dis_eye_norse*1/20;

if(last_dis_eye_norse>0 && (Math.abs(dis_eye_norse - last_dis_eye_norse) > dis_eye_norse*1/20 ) ){

document.getElementById('result').innerHTML = "通過";

is_alive_eye=false;

is_eye_ok=true;

}

last_nose_left = positions[62][0];

last_nose_top = positions[62][1];

last_dis_eye_norse = dis_eye_norse;

last_time = new Date().getTime();

}

requestAnimationFrame(drawLoop);

}

drawLoop();

}

</script>

</html>

以上就是小編為大家?guī)淼幕贖TML5 的人臉識別活體認(rèn)證的實(shí)現(xiàn)方法全部內(nèi)容了

更多信息請查看網(wǎng)頁制作

上一篇：HTML5中使用postMessage實(shí)現(xiàn)兩個網(wǎng)頁間傳遞數(shù)據(jù)

下一篇：html5 canvas繪制矩形和圓形的實(shí)例代碼

易賢網(wǎng)手機(jī)網(wǎng)站地址：基于HTML5 的人臉識別活體認(rèn)證的實(shí)現(xiàn)方法

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)頁制作

使用CSS制作立體導(dǎo)航欄10月30日

用純CSS3實(shí)現(xiàn)網(wǎng)頁中常見的小箭頭10月30日

有關(guān)HTML5中背景音樂的自動播放功能10月30日

HTML5、Select下拉框右邊加圖標(biāo)的實(shí)現(xiàn)代碼(增進(jìn)用戶體驗(yàn))10月30日

html5實(shí)現(xiàn)圖片轉(zhuǎn)圈的動畫效果——讓頁面動起來10月30日

html5清空畫布方法(三種)10月30日

HTML實(shí)現(xiàn)移動端固定懸浮半透明搜索框10月30日

HTML5 文件域+FileReader 分段讀取文件并上傳到服務(wù)器10月30日

Dreamweaver怎么設(shè)計彩色邊框的表格?10月30日

Dreamweaver怎么給個人簡歷添加照片并排版?10月30日

基于HTML5的WebGL實(shí)現(xiàn)json和echarts圖表展現(xiàn)在同一個界面10月30日

解決HTML5手機(jī)端頁面縮放的問題10月30日

利用純CSS實(shí)現(xiàn)居中的七大方法示例09月29日

CSS3中偽元素::before和::after的用法示例09月29日

詳解使用 CSS 的 font-size-adjust 屬性改善網(wǎng)頁排版09月29日

HTML5+CSS3 實(shí)現(xiàn)靈動的動畫 TAB 切換效果(DEMO)09月29日

css3 pointer-events 介紹詳解09月29日

CSS :focus-within的具體使用09月29日

你所不知道的 CSS 動畫技巧與細(xì)節(jié)09月29日

詳解CSS3選擇器:nth-child和:nth-of-type之間的差異09月29日

易賢網(wǎng)移動網(wǎng)站

2026國考·省考課程試聽報名

報班類型
姓名
手機(jī)號
驗(yàn)證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合