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

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

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

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

JavaScript代码将内容复制到

理想情况下，直到确认

客户端支持视频/摄像头，但 为 说明起见

涉及的元素，它们是用 标记创建的 (不是JavaScript)

->

＃容器 {

职位：相对；

}

#canvas {

位置：绝对；

左：0;

最高：0;

}

style>

你的浏览器不支持audio标签。

audio>

您的浏览器不支持video标签

video>

canvas>

div>

“拍照” button>

开始 button>

显示 button>

不显示 button>

张嘴验证 button>

摇头验证 button>

眨眼验证 button>

div>

div>

div>

div>

<脚本>

var  showpos = false ;

//将事件侦听器放置到位

//window.addEventListener("DOMContentLoaded“，function(){

//抓取元素，创建设置等

var  canvas = document.getElementById(“ canvas” )，

context = canvas.getContext(“ 2d” )，

video = document.getElementById(“ video” )，

videoObj = {  “ video” ：  true  }，

errBack = 函数(错误){

如果 (error.PERMISSION_DENIED){

jAlert('用户拒绝了浏览器请求媒体的权限' ，  '提示' );

} 否则，如果 (error.NOT_SUPPORTED_ERROR){

jAlert('对不起，您的浏览器不支持拍照功能，请使用其他浏览器' ，  '提示' );

} 否则，如果 (error.MANDATORY_UNSATISFIED_ERROR){

jAlert('指定的媒体类型未接收到媒体流' ，  '提示' );

} 其他 {

jAlert('系统重置获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试' ，  '提示' );

}

};

//将视频监听器放置到位

if (navigator.getUserMedia){  //标准

navigator.getUserMedia(videoObj， 函数(流){

video.src =流;

video.play();

}，errBack);

}  else if (navigator.webkitGetUserMedia){  // WebKit前缀

尝试{

navigator.webkitGetUserMedia(videoObj， 函数(流){

video.src = window.webkitURL.createObjectURL(stream);

video.play();

}，errBack);

}捕获(错误){

警报(错误);

}

}

else if (navigator.mozGetUserMedia){  // Firefox前缀

navigator.mozGetUserMedia(videoObj， 函数(流){

video.src = window.URL.createObjectURL(stream);

video.play();

}，errBack);

}

//触发照片拍摄

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>

<脚本>

/

//活体

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;

函数 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;

函数 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 ;

函数 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 ;

}

函数 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;

函数 drawLoop(){

// requestAnimationFrame(drawLoop);

cc.clearRect(0，0，canvasInput.width，canvasInput.height);

//ctracker.draw(canvasInput);

var  position = ctracker.getCurrentPosition();

如果 (showpos &&职位){

for  (var  p = 0; p

positionString + =  “ featurepoint” + p + “：[” + positions [p] [0] .toFixed(2)+ “，” + positions [p] [1] .toFixed(2)+ “]
” ;

}

document.getElementById('positions' ).innerHTML = positionString;

}

如果(位置){

对于 (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 ='红色';

// 0-14轮廓

// 7下吧，最下

// 2最左边

// 12最右边

// 15-22眉毛

// 23-27左眼睛五个点

// 27左眼中间

// 63-66左眼四个点

// 28-32右眼睛五个点

// 67-70右眼四个点

// 33-43鼻子

// 62鼻中间

// 44-61嘴巴

// 47嘴巴上

// 53嘴巴下

/

//左眼中间

对于 (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 =  '红色' ;

cc.fill();

}

//鼻子中间

对于 (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 =  '红色' ;

cc.fill();

}

//嘴巴上

对于 (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 =  '红色' ;

cc.fill();

}

//嘴巴下

对于 (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 =  '红色' ;

cc.fill();

}

///

//头

如果(is_alive_head == true ){

如果(last_time == 0 ||(new  Date()。getTime()-last_time> 500 &&  new  Date()。getTime()-last_time <10000)){

var  xdiff_left =位置[62] [0]-位置[2] [0]；

var  ydiff_left =位置[62] [1]-位置[2] [1]；

var  dis_left = Math.pow((xdiff_left * xdiff_left + ydiff_left * ydiff_left)，0.5);

var  xdiff_right =位置[12] [0]-位置[62] [0]；

var  ydiff_right =职位[12] [1]-职位[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;

如果(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 = 新的 Date()。getTime();

}

}

//

//鼠

如果(is_alive_mouse == true ){

如果(last_time == 0 ||(new  Date()。getTime()-last_time> 500 &&  new  Date()。getTime()-last_time <10000)){

//研究和鼻子距离

var  xdiff =位置[62] [0]-位置[27] [0]；

var  ydiff =职位[62] [1]-职位[27] [1]；

var  dis_eye_norse = Math.pow((xdiff * xdiff + ydiff * ydiff)，0.5);

//上嘴唇和下嘴唇距离

var  xdiff_mouse =位置[53] [0]-位置[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);

//鼻子的位置确保变化不大

如果(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;

如果(last_dis_eye_norse> 0 && dn

如果(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 = 新的 Date()。getTime();

last_nose_left = positions [62] [0];

last_nose_top =职位[62] [1];

}

}

//

//眼

如果(is_alive_eye == true ){

如果(last_time == 0 ||(new  Date()。getTime()-last_time> 10)){

var  xdiff1 =位置[62] [0]-位置[27] [0]；

var  ydiff1 =职位[62] [1]-职位[27] [1]；

var  dis_eye_norse1 = Math.pow((xdiff1 * xdiff1 + ydiff1 * ydiff1)，0.5);

var  xdiff2 =位置[62] [0]-位置[32] [0]；

var  ydiff2 =职位[62] [1]-职位[32] [1]；

var  dis_eye_norse2 = Math.pow((xdiff2 * xdiff2 + ydiff2 * ydiff2)，0.5);

var  dis_eye_norse =(dis_eye_norse1 + dis_eye_norse2);

如果(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;

如果(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 =职位[62] [1];

last_dis_eye_norse = dis_eye_norse;

last_time = 新的 Date()。getTime();

}

}

}

requestAnimationFrame(drawLoop);

}

drawLoop();

}

script>

html>

以上就是小编为大家带来的基于HTML5的人脸识别活体认证的实现方法全部内容了

html clm标记,基于HTML5的人脸识别活体认证的实现方法相关推荐

  1. php活体检测,基于HTML5 的人脸识别活体认证的实现方法

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

  2. css人脸识别的圆圈,基于HTML5 的人脸识别活体认证的实现方法

    html> #container { position : relative; } #canvas { position : absolute; left : 0; top : 0; } 你的浏 ...

  3. 基于HTML5 的人脸识别活体认证

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

  4. 使用可信科技的人脸识别活体认证遇到的问题

    android使用可信科技的人脸识别活体认证遇到的问题 由于项目需要实现身份的人脸识别活体认证功能,所以这里采用可信科技中的人脸识别功能,当然这是人家的劳动成果,认证的过程是需要钱的.实现监面andr ...

  5. 自动识别人脸html5,基于HTML5的人脸识别技术

    绍一个网站,演示了通过HTML5 + JavaScript技术实现的人脸识别,目前仅适用于Chrome浏览器,首先需要在地址栏输入about:flags,然后找到"启用MediaStream ...

  6. 基于HTML5 的人脸识别技术

    为什么80%的码农都做不了架构师?>>>    通过 HTML5 + JavaScript 技术实现的人脸识别,目前仅适用于 Chrome 浏览器,首先需要在地址栏输入 about: ...

  7. 网页实现人脸识别PHP,奇思妙想-用HTML5进行人脸识别

    今天发现一篇文章写的很有趣,叫你如何使用HTML5进行人脸识别.在网页内进行人脸识别,很好很强大! "现代Web"不断发展出不少有趣的API,但你并不会在大多数项目中使用到所有的内 ...

  8. 基于 PCA 的人脸识别系统及人脸姿态分析

    文章目录 1 PCA 1.1 原理 1.2 算法流程 1.2.1 零均值化 1.2.2 计算协方差矩阵 1.2.3 特征值和特征向量 1.2.4 降维得到 K 维特征 1.2.5 PCA 的优缺点 2 ...

  9. 基于PCA的人脸识别

    基于PCA的人脸识别 实验简介 PCA算法分析 PCA实现具体步骤 构造特征空间 识别 PCA方法的优劣 优势 劣势 实验步骤 训练 测试 计算识别准确率 显示结果 核心代码 分组一 分组二 实验结果 ...

最新文章

  1. OpenCV畸变校正原理以及损失有效像素原理分析
  2. 逆天神经网络绘制神器！还有暗黑模式
  3. linux驱动开发要知道的那些知识（三）------container_of，定时器 及系统调用
  4. 【c语言】蓝桥杯算法提高 约数个数
  5. 威胁生存！科学家警告灾难性“气候临界点”已逼近
  6. 各个系统下以及VS2017、Qt十分常用的快捷键
  7. shell实例第15讲：俄罗斯方块游戏
  8. GridView控件RowDataBound事件中获取列字段值的几种途径
  9. Golang实现简单爬虫框架（5）——项目重构与数据存储
  10. 第 11 章 直接内存
  11. linux tar 备份命令
  12. opencv︱图片与视频的读入、显示、写出、放缩与基本绘图函数介绍
  13. C语言模拟信号量解决同步、互斥问题
  14. 指针常量和常量指针的区别
  15. 设定pic单片机端口为输入_PIC单片机入门_输入输出端口详解
  16. 台式计算机 评标细则,计算机评标系统流程.doc
  17. n维椭球体积公式_【栗子资料】高中生必看，高中年级所有数学公式大全
  18. android studio图形验证码,android 一行代码，快速实现图片验证码（附android studio 版小demo）...
  19. Android 开发技术周报 Issue#274
  20. 使用pip报错：Could not fetch URL https://pypi.org/simple/selenium/: There was a problem confirming the ss

热门文章

  1. 小程序上拉加载更多数据，分类切换状态等实例
  2. 设置电脑定时关机的方法分享
  3. 基于Linux环境下MySQL数据库的建立
  4. 对口集成电路专业----微电子科学与工程
  5. 技术名词：Q-in-Q
  6. Excel 生成随机百分数 ，随机小数，整数
  7. 利用 HttpClient 实现 WI/SSO 中的 Eager Sign in
  8. Socket到底是什么？
  9. 关于soapUI工具调试webService接口简单示例
  10. 大饺子能包馅建模matlab代码,数学建模之包饺子，用数学改善生活的幸福度