php活体检测,基于HTML5 的人脸识别活体认证的实现方法
近几年,人脸识别技术在身份认证领域的应用已经有了较多应用,例如:支付宝、招行的取款、养老金领取等方面,但在杜绝假冒、认证安全性等方面,目前还是一个比较需要进一步解决的课题,特别是在移动端的活体认证技术方面。
本文介绍了在HTML5 环境下可以采用clmtrackr.js 检测工具,结合人脸模型,实现人脸的跟踪检测。同时采用动作识别实现活体认证。
但本方案只能够在Firefox 或者Chrome中使用。并且只适合研究学习,实际场景中不太理想,需要进一步优化才能够应用。
如果有人有相关的技术,可以推荐介绍给我。
#container {
position : relative;
}
#canvas {
position : absolute;
left : 0;
top : 0;
}
你的浏览器不支持audio标签。
您的浏览器不支持video标签
Snap Photo
Start
显示
不显示
张嘴验证
摇头验证
眨眼验证
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);
//
//活体
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) +"]
";
}
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();
}
以上就是基于HTML5 的人脸识别活体认证的实现方法 的内容,更多相关内容请关注PHP中文网(www.php.cn)!
本文原创发布php中文网,转载请注明出处,感谢您的尊重!
php活体检测,基于HTML5 的人脸识别活体认证的实现方法相关推荐
- html clm标记,基于HTML5的人脸识别活体认证的实现方法
近几年,人脸识别技术在身份认证领域的应用已经有了很多应用,例如:支付宝,招行的取款,养老金领取等方面,但在杜绝假冒,认证安全性等方面,目前还是一个比较需要进一步解决的课题,特别是在移动端的活体认证技术 ...
- 基于HTML5 的人脸识别活体认证
近几年,人脸识别技术在身份认证领域的应用已经有了较多应用,例如:支付宝.招行的取款.养老金领取等方面,但在杜绝假冒.认证安全性等方面,目前还是一个比较需要进一步解决的课题,特别是在移动端的活体认证技术 ...
- css人脸识别的圆圈,基于HTML5 的人脸识别活体认证的实现方法
html> #container { position : relative; } #canvas { position : absolute; left : 0; top : 0; } 你的浏 ...
- 应用人脸活体检测技术,避免人脸识别被破解
随着人脸识别技术日趋成熟,商业化应用愈加广泛,尤其是在金融行业,人脸识别技术已逐渐用于远程开户.取款.支付等,涉及用户的切身利益,然而人脸极易用照片.视频等方式进行复制,因此对合法用户人脸的假冒是人脸 ...
- 自动识别人脸html5,基于HTML5的人脸识别技术
绍一个网站,演示了通过HTML5 + JavaScript技术实现的人脸识别,目前仅适用于Chrome浏览器,首先需要在地址栏输入about:flags,然后找到"启用MediaStream ...
- 与活体检测技术结合的人脸识别技术
随着深度学习方法的应用,人工智能的发展,人脸识别技术的识别率已经得到质的提升,通过反复开发试验,目前我司的人脸识别技术率已经达到99%.人脸识别技术与其他生物特征识别技术相吃比,在实际应用中具有天然独 ...
- 基于HTML5 的人脸识别技术
为什么80%的码农都做不了架构师?>>> 通过 HTML5 + JavaScript 技术实现的人脸识别,目前仅适用于 Chrome 浏览器,首先需要在地址栏输入 about: ...
- 基于Python的(拍照签到+网课在线检测)深度学习的人脸识别系统
摘 要 近年来,网络技术日新月异,我们已经进入了大数据的时代并成为其中第一员,由此带来数据量的飞跃式的增长,而如何利用这些数据产生实际的生产价值则成为了大数据时代的一个重要问题.而人脸识别技术是一份对 ...
- 人脸识别活体检测之张张嘴和眨眨眼
暑 [这段时间有点忙,终于截止今天2018.06.22完成了人脸识别的最后一道程序--活体检测之眨眨眼和张张嘴] 关于人脸识别的内容我之前也写过好几篇博文,其中有: {java实现人脸识别源码} ...
最新文章
- python自带图形模块_检查单击是否在图形对象内[Python图形模块]
- 2010-08-22 动漫店 员工卡缓存出现问题。
- 数据框筛选特定的子集
- 网络操作系统_全球首个大网级网络操作系统CNOS正式发布
- 安装python的twisted_如何在Python3.5上安装 Twisted(为了Scrapy)
- qtextedit 默认文案_QT中常用的控件说明.md
- 5脚12v继电器接线图解_【电器元件002】你真的懂汽车继电器么
- 会员连锁配置以及金额走向
- Android之使用IDA Pro静态分析so文件
- 【Flink】Failed to create checkpoint storage at checkpoint coordinator side
- 微软对 Windows 10 Mobile 的支持将于12月10日结束
- 对Unity3d C#手动处理异常产生
- mysql 主从复制 表结构_MySQL主从复制-双主结构
- 收购 GitHub 滔天争议后,微软回应一切
- 2015年全年目标及执行情况跟踪
- C++使用system创建进程
- Unity3d接入googleplay内购详细说明(四)
- 正则校验手机号,身份证,护照,社会统一信用代码,银行卡号码,传真
- 精确休息法——《万维钢.精英日课3》笔记
- 群翔ShopNum1分销系统V8.1升级版,更优更全更盈利
热门文章
- 平板上pyto软件_大屏国产安卓平板,搭配磁吸附键盘后满满Windows风格
- redis 连接超时 Redis command timed out
- YYCache 设计分析
- Java找出数组中第K大的数
- 福建省教育考试院 计算机,福建省教育考试院官网登录入口
- linux中感叹号的作用,感叹号在Linux bash中使用技巧
- java里叹号的作用,感叹号的用法、作用与举例说明
- 中石油oj 奥运会跳水比赛 C++ sort函数对结构体的排序
- EndPoint学习之路_02:EndPoint产品讲解一指禅
- 如何实现一个IAM系统