基于HTML5怎么實現(xiàn)人臉識別活體認證

發(fā)布時間：2022-03-05 10:25:51 來源：億速云閱讀：148 作者：小新欄目：web開發(fā)

小編給大家分享一下基于HTML5怎么實現(xiàn)人臉識別活體認證，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

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

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

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

<！DOCTYPE html>

<！-

理想情況下，直到確認

客戶端支持視頻/攝像頭，但為說明起見

涉及的元素，它們是用標記創(chuàng)建的（不是JavaScript）

<html>

<樣式>

＃容器 {

職位：相對；

}

#canvas {

位置：絕對；

左：0;

最高：0;

}

</ style>

你的瀏覽器不支持audio標簽。

</ audio>

您的瀏覽器不支持video標簽

</ video>

</ div>

<br/>

</ div>

</ div>

</ div>

</ div>

<腳本>

var showpos = false ;

//將事件偵聽器放置到位

//window.addEventListener("DOMContentLoaded“，function（）{

//抓取元素，創(chuàng)建設(shè)置等

var canvas = document.getElementById（“ canvas” ），

context = canvas.getContext（“ 2d” ），

video = document.getElementById（“ video” ），

videoObj = { “ video” ： true }，

errBack = 函數(shù)（錯誤）{

如果（error.PERMISSION_DENIED）{

jAlert（'用戶拒絕了瀏覽器請求媒體的權(quán)限' ， '提示' ）;

} 否則，如果（error.NOT_SUPPORTED_ERROR）{

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

} 否則，如果（error.MANDATORY_UNSATISFIED_ERROR）{

jAlert（'指定的媒體類型未接收到媒體流' ， '提示' ）;

} 其他 {

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

}

};

//將視頻監(jiān)聽器放置到位

if （navigator.getUserMedia）{ //標準

navigator.getUserMedia（videoObj，函數(shù)（流）{

video.src =流;

video.play（）;

}，errBack）;

} else if （navigator.webkitGetUserMedia）{ // WebKit前綴

嘗試{

navigator.webkitGetUserMedia（videoObj，函數(shù)（流）{

video.src = window.webkitURL.createObjectURL（stream）;

video.play（）;

}，errBack）;

}捕獲（錯誤）{

警報（錯誤）;

}

else if （navigator.mozGetUserMedia）{ // Firefox前綴

navigator.mozGetUserMedia（videoObj，函數(shù)（流）{

video.src = window.URL.createObjectURL（stream）;

video.play（）;

}，errBack）;

}

//觸發(fā)照片拍攝

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;

函數(shù) 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;

函數(shù) alive_head（）{

var media = document.getElementById（“ media” ）;

media.src = “ mp3 / alive_head.mp3” ;

media.play（）;

document.getElementById（“ tip” ）. innerHTML = “請在水平方向左右搖頭” ;

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 ;

函數(shù) 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 ;

}

函數(shù) 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;

函數(shù) drawLoop（）{

// requestAnimationFrame（drawLoop）;

cc.clearRect（0，0，canvasInput.width，canvasInput.height）;

//ctracker.draw(canvasInput）;

var position = ctracker.getCurrentPosition（）;

如果（showpos &&職位）{

for （var p = 0; p <position.length; p ++）{

positionString + = “ featurepoint” + p + “：[” + positions [p] [0] .toFixed（2）+ “，” + positions [p] [1] .toFixed（2）+ “] <br/>” ;

}

document.getElementById（'positions' ）.innerHTML = positionString;

}

如果（位置）{

對于（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 ='紅色';

// 0-14輪廓

// 7下吧，最下

// 2最左邊

// 12最右邊

// 15-22眉毛

// 23-27左眼睛五個點

// 27左眼中間

// 63-66左眼四個點

// 28-32右眼睛五個點

// 67-70右眼四個點

// 33-43鼻子

// 62鼻中間

// 44-61嘴巴

// 47嘴巴上

// 53嘴巴下

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

//左眼中間

對于（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 = '紅色' ;

cc.fill（）;

}

//鼻子中間

對于（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 = '紅色' ;

cc.fill（）;

}

//嘴巴上

對于（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 = '紅色' ;

cc.fill（）;

}

//嘴巴下

對于（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 = '紅色' ;

cc.fill（）;

}

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

//頭

如果（is_alive_head == true ）{

如果（last_time == 0 ||（new Date（）。getTime（）-last_time> 500 && new Date（）。getTime（）-last_time <10000））{

var xdiff_left =位置[62] [0]-位置[2] [0]；

var ydiff_left =位置[62] [1]-位置[2] [1]；

var dis_left = Math.pow（（xdiff_left * xdiff_left + ydiff_left * ydiff_left），0.5）;

var xdiff_right =位置[12] [0]-位置[62] [0]；

var ydiff_right =職位[12] [1]-職位[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;

如果（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 = 新的 Date（）。getTime（）;

}

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

//鼠

如果（is_alive_mouse == true ）{

如果（last_time == 0 ||（new Date（）。getTime（）-last_time> 500 && new Date（）。getTime（）-last_time <10000））{

//研究和鼻子距離

var xdiff =位置[62] [0]-位置[27] [0]；

var ydiff =職位[62] [1]-職位[27] [1]；

var dis_eye_norse = Math.pow（（xdiff * xdiff + ydiff * ydiff），0.5）;

//上嘴唇和下嘴唇距離

var xdiff_mouse =位置[53] [0]-位置[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）;

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

如果（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;

如果（last_dis_eye_norse> 0 && dn <dis_eye_norse * 1/50）{

如果（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 = 新的 Date（）。getTime（）;

last_nose_left = positions [62] [0];

last_nose_top =職位[62] [1];

}

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

//眼

如果（is_alive_eye == true ）{

如果（last_time == 0 ||（new Date（）。getTime（）-last_time> 10））{

var xdiff1 =位置[62] [0]-位置[27] [0]；

var ydiff1 =職位[62] [1]-職位[27] [1]；

var dis_eye_norse1 = Math.pow（（xdiff1 * xdiff1 + ydiff1 * ydiff1），0.5）;

var xdiff2 =位置[62] [0]-位置[32] [0]；

var ydiff2 =職位[62] [1]-職位[32] [1]；

var dis_eye_norse2 = Math.pow（（xdiff2 * xdiff2 + ydiff2 * ydiff2），0.5）;

var dis_eye_norse =（dis_eye_norse1 + dis_eye_norse2）;

如果（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;

如果（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 =職位[62] [1];

last_dis_eye_norse = dis_eye_norse;

last_time = 新的 Date（）。getTime（）;

}

requestAnimationFrame（drawLoop）;

}

drawLoop（）;

}

</ script>

</ html>

看完了這篇文章，相信你對“基于HTML5怎么實現(xiàn)人臉識別活體認證”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細節(jié)

基于HTML5怎么實現(xiàn)人臉識別活體認證

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽