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

html>

#container {

position : relative;

}

#canvas {

position : absolute;

left : 0;

top : 0;

}

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

您的浏览器不支持video标签

Snap Photo

Start

显示

不显示

张嘴验证

摇头验证

眨眼验证

varshowpos=false;

// Put event listeners into place

//window.addEventListener("DOMContentLoaded", function() {

// Grab elements, create settings, etc.

varcanvas = document.getElementById("canvas"),

context = canvas.getContext("2d"),

video = document.getElementById("video"),

videoObj = {"video":true},

errBack =function(error) {

if(error.PERMISSION_DENIED) {

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

}elseif(error.NOT_SUPPORTED_ERROR) {

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

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

}elseif(navigator.webkitGetUserMedia) {// WebKit-prefixed

try{

navigator.webkitGetUserMedia(videoObj,function(stream){

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

video.play();

}, errBack);

}catch(error){

alert(error);

}

}

elseif(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("clic