足球游戏_中国足彩网￥体育资讯$

简要咨询 咨询QQ 网站导航 网站搜索 手机站点 联系我们
搜公告
  • 搜公告
  • 搜职位
公众号
事业单位
首 页
足球游戏
事业单位
特岗教师
三支一扶
银行招聘
中国足彩网
选调遴选
学历升学
公 众 号
全站导航
当前位置：首页 > 范文|应用文 > IT技术专栏 > 网页制作
基于HTML5 的人脸识别活体认证的实现方法
来源：易贤网 阅读：1833 次 日期：2016-07-04 15:12:24
温馨提示：易贤网小编为您整理了“基于HTML5 的人脸识别活体认证的实现方法”,方便广大网友查阅！

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

本文介绍了在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 的人脸识别活体认证的实现方法全部内容了

中国足彩网信息请查看网页制作
【点此处就本文及相关问题在本站进行非正式的简要咨询（便捷快速）】 【点此处查询各地各类考试咨询QQ号码及交流群】
上一篇：HTML5中使用postMessage实现两个网页间传递数据
下一篇：html5 canvas绘制矩形和圆形的实例代码
易贤网手机网站地址：基于HTML5 的人脸识别活体认证的实现方法
由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！
相关阅读网页制作
使用CSS制作立体导航栏10月30日
用纯CSS3实现网页中常见的小箭头10月30日
有关HTML5中背景音乐的自动播放功能10月30日
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)10月30日
html5实现图片转圈的动画效果——让页面动起来10月30日
html5清空画布方法(三种)10月30日
HTML实现移动端固定悬浮半透明搜索框10月30日
HTML5 文件域+FileReader 分段读取文件并上传到服务器10月30日
Dreamweaver怎么设计彩色边框的表格?10月30日
Dreamweaver怎么给个人简历添加照片并排版?10月30日
基于HTML5的WebGL实现json和echarts图表展现在同一个界面10月30日
解决HTML5手机端页面缩放的问题10月30日
利用纯CSS实现居中的七大方法示例09月29日
CSS3中伪元素::before和::after的用法示例09月29日
详解使用 CSS 的 font-size-adjust 属性改善网页排版09月29日
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)09月29日
css3 pointer-events 介绍详解09月29日
CSS :focus-within的具体使用09月29日
你所不知道的 CSS 动画技巧与细节09月29日
详解CSS3选择器:nth-child和:nth-of-type之间的差异09月29日
易贤网移动网站

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
最新信息
2024年临沧市临翔区司法局招聘司法协理员公告
2025年昆明市宜良县卫健系统人才引进加试笔试岗位成绩及进入面试人员公示
2025年昆明市宜良县教体系统人才引进加试笔试岗位成绩及进入面试人员公示
2024年下半年玉溪市市直事业单位招聘工作人员面试成绩
2024年云南省民政厅直属事业单位招聘人员面试成绩
2024年中共云南省纪委云南省监委所属事业单位招聘人员综合成绩公告
2024年统计专业技术资格考试云南考区成绩合格人员公示
2024年昆明市盘龙区金辰街道社区卫生服务中心招聘编外工作人员公告
2024年12月昭通市绥江县民政局城镇公益性岗位招聘公告
2024年保山市隆阳区瓦马乡汶上卫生院见习人员招聘公告
公考类
云南公务员 贵州公务员 四川公务员 广西公务员 各省公务员 国家公务员 选调遴选
招聘类
事业单位 中国足彩网 特岗教师 三支一扶 志 愿 者 银行招聘 国企招聘
各类考试
学历升学 会计考试 职业资格 外语考试 医学考试 工程考试 教师资格
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号：滇ICP备2023014141号-1 足球游戏_中国足彩网￥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证：（云）人服证字（2023）第0102001523号
云南网警备案专用图标
联系电话：0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号：hfpxwx
咨询QQ：526150442（9:00—18:00）版权所有:易贤网
云南网警报警专用图标