基于HTML5 的人脸识别活体认证的实现方法
(编辑:jimmy 日期: 2024/12/25 浏览:3 次 )
近几年,人脸识别技术在身份认证领域的应用已经有了较多应用,例如:支付宝、招行的取款、养老金领取等方面,但在杜绝假冒、认证安全性等方面,目前还是一个比较需要进一步解决的课题,特别是在移动端的活体认证技术方面。
本文介绍了在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 的人脸识别活体认证的实现方法全部内容了,希望大家多多支持~
原文地址:http://www.cnblogs.com/lilies/archive/2016/06/21/5604212.html
下一篇:调用HTML5的Canvas API绘制图形的快速入门指南