基于HTML5 的人脸识别活体认证的实现方法

程序员文章站 2022-10-15 18:04:28

下面小编就为大家带来一篇基于HTML5 的人脸识别活体认证的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧... 16-06-22...

近几年，人脸识别技术在身份认证领域的应用已经有了较多应用，例如：支付宝、招行的取款、养老金领取等方面，但在杜绝假冒、认证安全性等方面，目前还是一个比较需要进一步解决的课题，特别是在移动端的活体认证技术方面。

本文介绍了在html5 环境下可以采用clmtrackr.js 检测工具，结合人脸模型，实现人脸的跟踪检测。同时采用动作识别实现活体认证。

但本方案只能够在firefox 或者chrome中使用。并且只适合研究学习，实际场景中不太理想，需要进一步优化才能够应用。

如果有人有相关的技术，可以推荐介绍给我。

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>
<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;
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_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>

以上就是小编为大家带来的基于html5 的人脸识别活体认证的实现方法全部内容了，希望大家多多支持~

原文地址：

上一篇： HTML5中使用postMessage实现两个网页间传递数据

下一篇：家常冷冻鲍鱼的做法有哪些？

基于HTML5 的人脸识别活体认证的实现方法

基于Laravel Auth自定义接口API用户认证的实现方法

基于HTML5 的人脸识别活体认证的实现方法

基于Python的face_recognition库实现人脸识别

FaceRec 这是一个用matlab实现的基于支持向量机的人脸识别系统，

基于Laravel Auth自定义接口API用户认证的实现方法

基于ubuntu中使用mysql实现opensips用户认证的解决方法_MySQL

基于HTML5 的人脸识别活体认证的实现方法

FaceRec 这是一个用matlab实现的基于支持向量机的人脸识别系统，

基于HTML5 的人脸识别活体认证的实现方法

html5-websocket基于远程方法调用的数据交互实现_html5教程技巧