html5人脸登录,基于HTML5 的人脸识别活体认证
近幾年，人臉識別技術(shù)在身份認(rèn)證領(lǐng)域的應(yīng)用已經(jīng)有了較多應(yīng)用，例如：支付寶、招行的取款、養(yǎng)老金領(lǐng)取等方面，但在杜絕假冒、認(rèn)證安全性等方面，目前還是一個比較需要進(jìn)一步解決的課題，特別是在移動端的活體認(rèn)證技術(shù)方面。
本文介紹了在HTML5 環(huán)境下可以采用clmtrackr.js 檢測工具，結(jié)合人臉模型，實現(xiàn)人臉的跟蹤檢測。同時采用動作識別實現(xiàn)活體認(rèn)證。
但本方案只能夠在Firefox 或者Chrome中使用。并且只適合研究學(xué)習(xí)，實際場景中不太理想，需要進(jìn)一步優(yōu)化才能夠應(yīng)用。
如果有人有相關(guān)的技術(shù)，可以推薦介紹給我。
#container {
position : relative;
}
#canvas {
position : absolute;
left : 0;
top : 0;
}
你的瀏覽器不支持audio標(biāo)簽。
您的瀏覽器不支持video標(biāo)簽
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('用戶拒絕了瀏覽器請求媒體的權(quán)限', '提示');
} else if (error.NOT_SUPPORTED_ERROR) {
jAlert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器', '提示');
} else if (error.MANDATORY_UNSATISFIED_ERROR) {
jAlert('指定的媒體類型未接收到媒體流', '提示');
} else {
jAlert('系統(tǒng)未能獲取到攝像頭，請確保攝像頭已正確安裝。或嘗試刷新頁面，重試', '提示');
}
};
// 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 的人臉識別技術(shù)
基于 HTML5 的人臉識別技術(shù) https://github.com/auduno/headtrackr/
基于node.js人臉識別之人臉對比
基于node.js人臉識別之人臉對比 Node.js簡介 Node.js 是一個基于 Chrome V8 引擎的?JavaScript?運行環(huán)境. Node.js 使用了一個事件驅(qū)動.非阻塞式 I/O ...
基于MATLAB的人臉識別算法的研究
基于MATLAB的人臉識別算法的研究 作者:lee神 現(xiàn)如今機(jī)器視覺越來越盛行,從智能交通系統(tǒng)的車輛識別,車牌識別到交通標(biāo)牌的識別:從智能手機(jī)的人臉識別的性別識別:如今無人駕駛汽車更是應(yīng)用了大量的機(jī)器 ...
基于 OpenCV 的人臉識別
基于 OpenCV 的人臉識別 一點背景知識 OpenCV 是一個開源的計算機(jī)視覺和機(jī)器學(xué)習(xí)庫.它包含成千上萬優(yōu)化過的算法,為各種計算機(jī)視覺應(yīng)用提供了一個通用工具包.根據(jù)這個項目的關(guān)于頁面,OpenC ...
【計算機(jī)視覺】基于OpenCV的人臉識別
一點背景知識 OpenCV?是一個開源的計算機(jī)視覺和機(jī)器學(xué)習(xí)庫.它包含成千上萬優(yōu)化過的算法,為各種計算機(jī)視覺應(yīng)用提供了一個通用工具包.根據(jù)這個項目的關(guān)于頁面,OpenCV 已被廣泛運用在各種項目上,從 ...
java基于OpenCV的人臉識別
基于Java簡單的人臉和人眼識別程序 使用這個程序之前必須先安裝配置OpenCV詳細(xì)教程見:https://www.cnblogs.com/prodigal-son/p/12768948.html 注 ...
使用 HTML5, javascript, webrtc, websockets, Jetty 和 OpenCV 實現(xiàn)基于 Web 的人臉識別
這是一篇國外的文章,介紹如何通過 WebRTC.OpenCV 和 WebSocket 技術(shù)實現(xiàn)在 Web 瀏覽器上的人臉識別,架構(gòu)在 Jetty 之上. 實現(xiàn)的效果包括: 還能識別眼睛 人臉識別的核心 ...
基于PCA的人臉識別步驟
代碼下載:基于PCA(主成分分析)的人臉識別 人臉識別是一個有監(jiān)督學(xué)習(xí)過程,首先利用訓(xùn)練集構(gòu)造一個人臉模型,然后將測試集與訓(xùn)練集進(jìn)行匹配,找到與之對應(yīng)的訓(xùn)練集頭像.最容易的方式是直接利用歐式距離計算測 ...
知物由學(xué) | 基于DNN的人臉識別中的反欺騙機(jī)制
"知物由學(xué)"是網(wǎng)易云易盾打造的一個品牌欄目,詞語出自漢·王充.人,能力有高下之分,學(xué)習(xí)才知道事物的道理,而后才有智慧,不去求問就不會知道."知物 ...
隨機(jī)推薦
Ubuntu14.04安裝CMake3.6.3
準(zhǔn)備工作:官網(wǎng)下載cmake-3.6.3.tar.gz(https://cmake.org/download/) 1.解壓文件tar -xvf cmake-3.6.3.tar.gz,并修改文件權(quán)限ch ...
python里的del變量無法立刻釋放內(nèi)存的解決辦法
最近在python開發(fā)的時候,用到了一些很占用內(nèi)存的操作,導(dǎo)致后續(xù)程序執(zhí)行很慢甚至無法執(zhí)行.探索了一下,最終解決了這個問題. 截圖解釋: python變量占用了內(nèi)存,僅僅通過del變量的方式,只是讓這 ...
Object C學(xué)習(xí)筆記18-SEL,@ selector,Class,@class
本章是對上一章<>的一點補(bǔ)充,所以比較簡單點. 一. SEL 類型 在上一篇介紹了幾個方法,都只是介紹了其使用方式但是沒有具體 ...
多用less命令，不會輸入h查看對應(yīng)的詳細(xì)文檔
在開發(fā)項目時候,難免要查看日志排查錯誤.之前只會用cat , more, less, tac, tail的簡單功能, 但在實際工程中還是不夠用的,至少效率很低.今天抽空看了下以下的博客,并實際進(jìn)行了簡 ...
C#關(guān)于值類型和引用類型的備忘
值類型 引用類型 內(nèi)存分配地點 分配在棧中 分配在堆中 效率 效率高,不需要地址轉(zhuǎn)換 效率低,需要進(jìn)行地址轉(zhuǎn)換 內(nèi)存回收 使用完后,立即回收 使用完后,不是立即回收,等待GC回收 賦值操作 進(jìn)行復(fù) ...
不用找了,比較全的signalR例子已經(jīng)為你準(zhǔn)備好了.
這幾天想著將一個winform的工具上線到web上,因為對時時性的要求比較高,找朋友咨詢了一下推薦了SignlarR 框架,比較強(qiáng)大.昨天才看到,今天研究了一下將里面的例子都拿出來共享. 最全的參考: ...
PADSPOWERPCB中怎樣去隱藏一些PIN腳
由于一些板,尤其是U盤等面積很小的板,FLASH中只使用了為數(shù)不多的幾個PIN,為了可以讓其它PIN下面可以走線,增加GND網(wǎng)絡(luò)的面積,所以實際操作中要隱藏一些PIN.這就需要怎么操作呢! 我們要做的 ...
MaterialEditText 控件學(xué)習(xí)
這個視圖原始框架地址:https://github.com/rengwuxian/MaterialEditText 指導(dǎo)手冊:http://www.rengwuxian.com/post/materi ...
Python基礎(chǔ)學(xué)習(xí)參考(五)：字符串和編碼
一．字符串 前面已經(jīng)介紹過字符串,通過單引號或者雙引號表示的一種數(shù)據(jù)類型.下面就再來進(jìn)一步的細(xì)說一下字符串.字符串是不可變的,當(dāng)你定義好以后就不能改變它了,可以進(jìn)一步的說,字符串是一種特殊的元組,元 ...
洛谷p3799：妖夢切木棒
題意:任選四段木板拼正三角形 因為是正三角形 所以我們可以想到至少是兩個相同的,剩下兩個拼成最后一條邊 我們只需要枚舉邊長即可 那么我們對每次讀入的x,使他的cnt++ 考慮用一個二重循環(huán) 外層枚舉邊 ...
總結(jié)
以上是生活随笔為你收集整理的html5人脸登录,基于HTML5 的人脸识别活体认证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 分析分布式服务框架
- 下一篇： html5+前端脸部识别采集,前端人脸识