扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >基于HTML5怎么实现人脸识别活体认证
  • 561

0
分享到

基于HTML5怎么实现人脸识别活体认证

2024-04-02 19:04:59 561人浏览 安东尼
摘要

小编给大家分享一下基于HTML5怎么实现人脸识别活体认证，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！ 近几年，人脸识别技术在身份认证领域的应用已经有了很多应用，例如：支付宝，招行的取款

小编给大家分享一下基于HTML5怎么实现人脸识别活体认证，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

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

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

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

<！DOCTYPE html>  

<！-  

理想情况下，直到确认   

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

涉及的元素，它们是用 标记创建的 （不是javascript）  

->  

<html>  

<meta charset = “ GBK” >  

<样式>  

＃容器 {  

职位：相对；  

}  

#canvas {  

位置：绝对；  

左：0;  

最高：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 = “容器” >  

<video id = “ video”  width = “ 600”  height = “ 400” 自动播放>   

您的浏览器不支持video标签  

</ video>  

<canvas id = “ canvas”  width = “ 600”  height = “ 400” > </ canvas>  

</ div>      

<button id = “快照” > “拍照” </ button>  

<button id = “开始” >开始</ 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 = “结果” >  

</ div>  

<div id = “ msg” >  

</ div>  

<div id = “ positions” >  

</ 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 <position.length; p ++）{  

positionString + =  “ featurepoint” + p + “：[” + positions [p] [0] .toFixed（2）+ “，” + positions [p] [1] .toFixed（2）+ “] <br/>” ;  

}  

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 <dis_eye_norse * 1/50）{   

如果（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怎么实现人脸识别活体认证”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网VUE频道，感谢各位的阅读！

--结束END--

本文标题: 基于HTML5怎么实现人脸识别活体认证

本文链接: https://lsjlt.com/news/91559.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 基于HTML5怎么实现人脸识别活体认证
    小编给大家分享一下基于HTML5怎么实现人脸识别活体认证，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！ 近几年，人脸识别技术在身份认证领域的应用已经有了很多应用，例如：支付宝，招行的取款...
    99+
    2024-04-02
  • 如何使用HTML5实现人脸识别活体认证
    这篇文章主要为大家展示了“如何使用HTML5实现人脸识别活体认证”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用HTML5实现人脸识别活体认证”这篇文章吧...
    99+
    2024-04-02
  • 基于HTML5的人脸识别技术怎么实现
    今天小编给大家分享一下基于HTML5的人脸识别技术怎么实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起...
    99+
    2024-04-02
  • 人脸识别和人脸认证,有什么区别
    人脸识别和人脸认证是两个不同的概念。人脸识别是指通过计算机视觉技术，将人脸图像与已知的人脸数据库进行比对，从而确定人脸的身份。这种技...
    99+
    2023-09-20
    人脸识别
  • Java基于虹软实现人脸识别、人脸比对、活性检测等
    目录虹软一、注册虹软开发者平台二、开始使用SDK虹软 免费，高级版本试用支持在线、离线有 Java SDK，C++ SDK 一、注册虹软开发者平台 点击注册 注册完成后可在&ldq...
    99+
    2024-04-02
  • Python中基于Opencv怎么实现人脸识别
    这篇文章主要讲解了“Python中基于Opencv怎么实现人脸识别”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Python中基于Opencv怎么实现人脸识别”吧！检测人脸。这应该是最基本的...
    99+
    2023-06-02
  • 基于face_recognition如何实现人脸识别
    这篇文章将为大家详细讲解有关基于face_recognition如何实现人脸识别，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。准备工作我们的人脸识别基于face_recognition库。f...
    99+
    2023-06-17
  • 基于Python的人脸识别功能怎么实现
    这篇文章主要介绍“基于Python的人脸识别功能怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“基于Python的人脸识别功能怎么实现”文章能帮助大家解决问题。一、 人脸检测人脸检测是指从图像...
    99+
    2023-07-05
  • 基于HTML5的人脸识别技术是怎样的
    基于HTML5的人脸识别技术是怎样的，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。然后打开下面地址：http://neave.com/webcam/html5/...
    99+
    2023-06-17
  • Android基于ArcSoft如何实现人脸识别
    小编给大家分享一下Android基于ArcSoft如何实现人脸识别，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！在虹软的开发者中心创建一个自己的应用，将APP_I...
    99+
    2023-06-22
  • Android基于opencv4.6.0实现人脸识别功能
    前言 步骤： 整合opencv 获取相机的SurfaceView传到native层去检测(亦或是不断的获取SurfaceView的Bitmap，传到native层) 检测人脸，在本地保存人脸特征信息 4.上传至后台(不实现) 人脸识别实现的...
    99+
    2023-09-30
    android android studio opencv
  • Android基于虹软(ArcSoft)实现人脸识别
    1、在虹软的开发者中心创建一个自己的应用，将APP_ID与SDK_KEY记录下来，后面会用到。创建完后就可以下载SDK了。 2、下载完后，就可以根据SDK包里的开发说明文档和代码进...
    99+
    2024-04-02
  • 基于opencv和pillow怎么实现人脸识别系统
    这篇文章主要讲解了“基于opencv和pillow怎么实现人脸识别系统”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“基于opencv和pillow怎么实现人脸识别系统”吧！本文不涉及分类器、...
    99+
    2023-06-21
  • 基于python3+OpenCV实现人脸和眼睛识别
    基于python3+OpenCV的人脸和眼睛识别，供大家参考，具体内容如下 一、OpenCV人脸检测的xml文件下载 人脸检测和眼睛检测要用到haarcascade_eye.xml和...
    99+
    2024-04-02
  • 如何基于SpringBoot实现人脸识别功能
    目录前言需求分析一、人脸注册二、人脸登录具体实现一、人脸注册二、刷脸登录总结前言 去年在公司参与了一个某某机场建设智能机场的一个项目，人脸登机是其中的一个功能模块，当时只是写了后台的...
    99+
    2024-04-02
  • 基于OpenCV和Gradio怎么实现简单的人脸识别
    今天小编给大家分享一下基于OpenCV和Gradio怎么实现简单的人脸识别的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。环境...
    99+
    2023-07-05
  • Android 实例开发基于ArcSoft实现人脸识别
    目录效果图激活引擎第一步配置APP_ID和SDK_KEY第二步：判断是否添加动态链接库（so文件与jar包）第三步：判断是否申明所有权限人脸比对 1：N第一步：初始化本地人脸库第二步...
    99+
    2024-04-02
  • 基于Python实现简单的人脸识别系统
    目录前言基本原理代码实现创建虚拟环境安装必要的库前言 最近又多了不少朋友关注，先在这里谢谢大家。关注我的朋友大多数都是大学生，而且我简单看了一下，低年级的大学生居多，大多数都是为了完...
    99+
    2024-04-02
  • 基于opencv和pillow实现人脸识别系统(附demo)
    目录一。人脸检测和数据收集二.训练识别器三.人脸识别和显示本文不涉及分类器、训练识别器等算法原理，仅包含对其应用（未来我也会写自己对机器学习算法原理的一些观点和了解） 首先我们需要知...
    99+
    2024-04-02
  • 怎么用Python实现人脸识别
    这篇文章主要讲解了“怎么用Python实现人脸识别”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用Python实现人脸识别”吧！安装最好是使用 Linux 或 Mac 环境来安装，Win...
    99+
    2023-06-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作