css人脸识别的圆圈,基于HTML5 的人脸识别活体认证的实现方法
html>
#container {
position : relative;
}
#canvas {
position : absolute;
left : 0;
top : 0;
}
你的浏览器不支持audio标签。
您的浏览器不支持video标签
Snap Photo
Start
显示
不显示
张嘴验证
摇头验证
眨眼验证
varshowpos=false;
// Put event listeners into place
//window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
varcanvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = {"video":true},
errBack =function(error) {
if(error.PERMISSION_DENIED) {
jAlert('用户拒绝了浏览器请求媒体的权限','提示');
}elseif(error.NOT_SUPPORTED_ERROR) {
jAlert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器','提示');
}elseif(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);
}elseif(navigator.webkitGetUserMedia) {// WebKit-prefixed
try{
navigator.webkitGetUserMedia(videoObj,function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}catch(error){
alert(error);
}
}
elseif(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);
//
//活体
varlast_time=0;//时间因素
varlast_nose_left=0;
varlast_nose_top=0;
//张嘴动作
varis_mouse_ok=false;
varis_alive_mouse=false;
varlast_dis_eye_norse=0;
varlast_dis_mouse=0;
functionalive_mouse(){
varmedia = 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;
}
//摇头动作
varis_head_ok=false;
varis_alive_head=false;
varlast_dis_left_right=100000000;
functionalive_head(){
varmedia = 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;
}
//眨眼动作
varis_alive_eye=false;
varis_eye_ok =false;
functionalive_eye(){
varmedia = 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;
}
functionstartTrack(){
varvideoInput = document.getElementById('video');
varctracker =newclm.tracker();
ctracker.init(pModel);
ctracker.start(videoInput);
varcanvasInput = document.getElementById('canvas');
varcc = canvasInput.getContext('2d');
cc.lineWidth=3;
functiondrawLoop() {
//requestAnimationFrame(drawLoop);
cc.clearRect(0, 0, canvasInput.width, canvasInput.height);
//ctracker.draw(canvasInput );
varpositions = ctracker.getCurrentPosition();
if(showpos && positions) {
for(varp = 0;p
positionString +="featurepoint "+p+" : ["+positions[p][0].toFixed(2)+","+positions[p][1].toFixed(2) +"]
";
}
document.getElementById('positions').innerHTML = positionString;
}
if(positions){
for(varp =0;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(varp =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(varp =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(varp =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(varp =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 || (newDate().getTime()-last_time>500 &&newDate().getTime()-last_time<10000 ) ){
varxdiff_left = positions[62][0] - positions[2][0] ;
varydiff_left = positions[62][1] - positions[2][1] ;
vardis_left = Math.pow((xdiff_left * xdiff_left + ydiff_left * ydiff_left), 0.5);
varxdiff_right = positions[12][0] - positions[62][0] ;
varydiff_right = positions[12][1] - positions[62][1] ;
vardis_right = Math.pow((xdiff_right * xdiff_right + ydiff_right * ydiff_right), 0.5);
varxdiff_side = positions[12][0] - positions[2][0] ;
varydiff_side = positions[12][1] - positions[2][1] ;
vardis_side = Math.pow((xdiff_side * xdiff_side + ydiff_side * ydiff_side), 0.5);
vardis_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 =newDate().getTime();
}
}
/
//mouse
if(is_alive_mouse==true){
if(last_time==0 || (newDate().getTime()-last_time>500 &&newDate().getTime()-last_time<10000 ) ){
//研究和鼻子距离
varxdiff = positions[62][0] - positions[27][0] ;
varydiff = positions[62][1] - positions[27][1] ;
vardis_eye_norse = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
//上嘴唇 和下嘴唇距离
varxdiff_mouse = positions[53][0] - positions[47][0] ;
varydiff_mouse = positions[53][1] - positions[47][1] ;
vardis_mouse = Math.pow((xdiff_mouse * xdiff_mouse + ydiff_mouse * ydiff_mouse), 0.5);
//上次的眼鼻距离和这次的眼鼻距离差
vardn= Math.abs(dis_eye_norse-last_dis_eye_norse);
//上次的嘴距离和本次的嘴距离差
vardm=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
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 =newDate().getTime();
last_nose_left = positions[62][0];
last_nose_top = positions[62][1];
}
}
/
//eye
if(is_alive_eye==true){
if(last_time==0 || (newDate().getTime()-last_time>10 ) ){
varxdiff1 = positions[62][0] - positions[27][0] ;
varydiff1 = positions[62][1] - positions[27][1] ;
vardis_eye_norse1 = Math.pow((xdiff1 * xdiff1 + ydiff1 * ydiff1), 0.5);
varxdiff2 = positions[62][0] - positions[32][0] ;
varydiff2 = positions[62][1] - positions[32][1] ;
vardis_eye_norse2 = Math.pow((xdiff2 * xdiff2 + ydiff2 * ydiff2), 0.5);
vardis_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 =newDate().getTime();
}
}
}
requestAnimationFrame(drawLoop);
}
drawLoop();
}
css人脸识别的圆圈,基于HTML5 的人脸识别活体认证的实现方法相关推荐
- php活体检测,基于HTML5 的人脸识别活体认证的实现方法
近几年,人脸识别技术在身份认证领域的应用已经有了较多应用,例如:支付宝.招行的取款.养老金领取等方面,但在杜绝假冒.认证安全性等方面,目前还是一个比较需要进一步解决的课题,特别是在移动端的活体认证技术 ...
- html clm标记,基于HTML5的人脸识别活体认证的实现方法
近几年,人脸识别技术在身份认证领域的应用已经有了很多应用,例如:支付宝,招行的取款,养老金领取等方面,但在杜绝假冒,认证安全性等方面,目前还是一个比较需要进一步解决的课题,特别是在移动端的活体认证技术 ...
- 基于HTML5 的人脸识别活体认证
近几年,人脸识别技术在身份认证领域的应用已经有了较多应用,例如:支付宝.招行的取款.养老金领取等方面,但在杜绝假冒.认证安全性等方面,目前还是一个比较需要进一步解决的课题,特别是在移动端的活体认证技术 ...
- 网页实现人脸识别PHP,奇思妙想-用HTML5进行人脸识别
今天发现一篇文章写的很有趣,叫你如何使用HTML5进行人脸识别.在网页内进行人脸识别,很好很强大! "现代Web"不断发展出不少有趣的API,但你并不会在大多数项目中使用到所有的内 ...
- python人脸识别毕业设计-Python基于Dlib的人脸识别系统的实现
之前已经介绍过人脸识别的基础概念,以及基于opencv的实现方式,今天,我们使用dlib来提取128维的人脸嵌入,并使用k临近值方法来实现人脸识别. 人脸识别系统的实现流程与之前是一样的,只是这里我们 ...
- html css实现登录注册页面,基于HTML5+css+JS_的精美登陆注册界面
[实例简介] 基于HTML5+css+JS的精美登陆注册界面------------------------------- [实例截图] [核心代码] login4 ├── index.html ├─ ...
- 人脸识别系统 matlab,基于MATLAB的人脸识别系统的设计
基于MATLAB的人脸识别系统的设计(论文12000字,外文翻译,参考程序) 摘要:本文基于MATLAB平台设计了一款简单的人脸识别系统,通过USB摄像头来采集图像,经过肤色方法进行人脸检测与定位,然 ...
- python实现人脸识别系统设计_基于ROS的人脸识别系统设计与实现
基于ROS的人脸识别系统设计与实现 文/胡思旺 李春杰 [摘 要]摘 要 [期刊名称]<电子技术与软件工程> [年(卷),期]2019(000)007 [总页数]3 [关键词][关键词]R ...
- android人脸识别应用架构,基于Android平台人脸识别系统的设计与实现
摘要: 伴随着社会信息化,自动化的发展,以及科技的进步,未来将是移动互联网的时 代,为适应移动互联网的发展智能化的小型移动终端将是未来的发展趋势.与此同时人们对信息的安全性要求不断的提高,高自动化和高 ...
最新文章
- Java 集合系列（4）： LinkedList源码深入解析1
- 合并k个有序链表 python_leetcode第23题-合并K个有序链表
- NoSQL为什么需要模式自由的ETL工具：不知道的大概都没用过！
- 全球最大语音识别公司Nuance的衰落与自我救赎
- [算法]bitmap算法
- 嵌入式学习流程（参考一）
- Linux命令拆分csv文件,linux – 如何剪切CSV文件
- 洛谷 P5713 【深基3.例5】洛谷团队系统 C语言
- 网站速度和性能测试工具
- VSCode插件之Beautify
- Java24种设计模式(第二种)--代理模式(Proxy Pattern)
- python大数据分析标准库_大数据分析python库
- 魅族路由器（极速版）刷老毛子（padavad）固件-全网最详细教程
- 3D模型动画素材来源
- 两个整数的四则运算（python）
- 今日学习在线编程题：古人的剩余定理
- 超详细，win7虚拟机安装
- Spring5利用视图解析器生成Excel文件
- 服务器系统盘 转速,服务器磁盘转速怎么看
- aire 计算机术语,计算机专业词汇Glossaire.doc