基于HTML5 的人脸识别活体认证的实现方法
导读：收集整理的这篇文章主要介绍了基于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>
p id="container">
video id="video" width="600" height="400" autoplay >
您的浏览器不支持video标签 /video>
canvas id="canvas" width="600" height="400">
/canvas>
/p>
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>
p id="tip">
/p>
p id="result">
/p>
p id="msg">
/p>
p id="positions">
/p>
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;
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="请在水平方向左右摇头";
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 左眼睛五个点 //27 左眼中间 //63-66 左眼四个点 //28-32 右眼睛五个点 //67-70 右眼四个点 //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_time10000 ) ){
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_time10000 ) ){
//研究和鼻子距离 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>
以上就是基于HTML5 的人脸识别活体认证的实现方法 的内容，更多相关内容请关注PHP中文网（www.php.cn）！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 基于HTML5 的人脸识别活体认证的实现方法
本文地址： https://pptw.com/jishu/584075.html