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

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

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

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

#container {

position : relative;

}

#canvas {

position : absolute;

left : 0;

top : 0;

}

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

Snap Photo

Start

显示

不显示

张嘴验证

摇头验证

眨眼验证

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);

//

//活体

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) +"]
";

}

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();

}

基于 HTML5 的人脸识别技术

基于 HTML5 的人脸识别技术 https://github.com/auduno/headtrackr/

基于node&period;js人脸识别之人脸对比

基于node.js人脸识别之人脸对比 Node.js简介 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O ...

基于MATLAB的人脸识别算法的研究

基于MATLAB的人脸识别算法的研究 作者:lee神 现如今机器视觉越来越盛行,从智能交通系统的车辆识别,车牌识别到交通标牌的识别:从智能手机的人脸识别的性别识别:如今无人驾驶汽车更是应用了大量的机器 ...

基于 OpenCV 的人脸识别

基于 OpenCV 的人脸识别 一点背景知识 OpenCV 是一个开源的计算机视觉和机器学习库.它包含成千上万优化过的算法,为各种计算机视觉应用提供了一个通用工具包.根据这个项目的关于页面,OpenC ...

【计算机视觉】基于OpenCV的人脸识别

一点背景知识 OpenCV 是一个开源的计算机视觉和机器学习库.它包含成千上万优化过的算法,为各种计算机视觉应用提供了一个通用工具包.根据这个项目的关于页面,OpenCV 已被广泛运用在各种项目上,从 ...

java基于OpenCV的人脸识别

基于Java简单的人脸和人眼识别程序 使用这个程序之前必须先安装配置OpenCV详细教程见:https://www.cnblogs.com/prodigal-son/p/12768948.html 注 ...

使用 HTML5&comma; javascript&comma; webrtc&comma; websockets&comma; Jetty 和 OpenCV 实现基于 Web 的人脸识别

这是一篇国外的文章,介绍如何通过 WebRTC.OpenCV 和 WebSocket 技术实现在 Web 浏览器上的人脸识别,架构在 Jetty 之上. 实现的效果包括: 还能识别眼睛 人脸识别的核心 ...

基于PCA的人脸识别步骤

代码下载:基于PCA(主成分分析)的人脸识别 人脸识别是一个有监督学习过程,首先利用训练集构造一个人脸模型,然后将测试集与训练集进行匹配,找到与之对应的训练集头像.最容易的方式是直接利用欧式距离计算测 ...

知物由学 &vert; 基于DNN的人脸识别中的反欺骗机制

"知物由学"是网易云易盾打造的一个品牌栏目,词语出自汉·王充.人,能力有高下之分,学习才知道事物的道理,而后才有智慧,不去求问就不会知道."知物 ...

随机推荐

Ubuntu14&period;04安装CMake3&period;6&period;3

准备工作:官网下载cmake-3.6.3.tar.gz(https://cmake.org/download/) 1.解压文件tar -xvf cmake-3.6.3.tar.gz,并修改文件权限ch ...

python里的del变量无法立刻释放内存的解决办法

最近在python开发的时候,用到了一些很占用内存的操作,导致后续程序执行很慢甚至无法执行.探索了一下,最终解决了这个问题. 截图解释: python变量占用了内存,仅仅通过del变量的方式,只是让这 ...

Object C学习笔记18-SEL&comma;&commat; selector&comma;Class&comma;&commat;class

本章是对上一章<>的一点补充,所以比较简单点. 一. SEL 类型 在上一篇介绍了几个方法,都只是介绍了其使用方式但是没有具体 ...

多用less命令，不会输入h查看对应的详细文档

在开发项目时候,难免要查看日志排查错误.之前只会用cat , more, less, tac, tail的简单功能, 但在实际工程中还是不够用的,至少效率很低.今天抽空看了下以下的博客,并实际进行了简 ...

C&num;关于值类型和引用类型的备忘

值类型 引用类型 内存分配地点 分配在栈中 分配在堆中 效率 效率高,不需要地址转换 效率低,需要进行地址转换 内存回收 使用完后,立即回收 使用完后,不是立即回收,等待GC回收 赋值操作 进行复 ...

不用找了&comma;比较全的signalR例子已经为你准备好了&period;

这几天想着将一个winform的工具上线到web上,因为对时时性的要求比较高,找朋友咨询了一下推荐了SignlarR 框架,比较强大.昨天才看到,今天研究了一下将里面的例子都拿出来共享. 最全的参考: ...

PADSPOWERPCB中怎样去隐藏一些PIN脚

由于一些板,尤其是U盘等面积很小的板,FLASH中只使用了为数不多的几个PIN,为了可以让其它PIN下面可以走线,增加GND网络的面积,所以实际操作中要隐藏一些PIN.这就需要怎么操作呢! 我们要做的 ...

MaterialEditText 控件学习

这个视图原始框架地址:https://github.com/rengwuxian/MaterialEditText 指导手册:http://www.rengwuxian.com/post/materi ...

Python基础学习参考(五)：字符串和编码

一．字符串 前面已经介绍过字符串,通过单引号或者双引号表示的一种数据类型.下面就再来进一步的细说一下字符串.字符串是不可变的,当你定义好以后就不能改变它了,可以进一步的说,字符串是一种特殊的元组,元 ...

洛谷p3799：妖梦切木棒

题意:任选四段木板拼正三角形 因为是正三角形 所以我们可以想到至少是两个相同的,剩下两个拼成最后一条边 我们只需要枚举边长即可 那么我们对每次读入的x,使他的cnt++ 考虑用一个二重循环 外层枚举边 ...