背景
人脸识别技术目前已经非常成熟，但主要流行在移动终端和专有设备应用上，在Web端上很少见。 出于学习目的，从头实现了Web端的人脸登录功能。
视频流
使用navigator.getUserMedia方法获取浏览器中的视频流+音频流（通过摄像头耳机），以后可以用来获取任何数据流，比如光盘、传感器等。
识别工具百度人脸识别库
1. 分析图片中人脸的遮挡、模糊、光照硬度、姿势角度、完整性、大小等特征，并根据符合质量标准的输出图片返回准确的相似度得分。 2. 比较两张图片。 人脸相似度并返回相似度得分 3. 支持四种图片类型的人脸比对：日常生活照片、身份证照片、身份证芯片照片、网格照片 4. 分析单张图片中人像缺陷（摩尔皱纹、成像畸形）等）判断图片中的目标物体是否为真人，保证比对效果真实可靠
人脸识别
被誉为世界上最简单的人脸识别库（真的很好用）。 您可以通过Python参考或命令行使用它来管理和识别人脸。 该软件包采用了dlib中最先进的人脸识别深度学习算法，使得在“Labled Faces in the world”测试基准下识别准确率达到99.38%。 它还提供了一个名为face_recognition的命令行工具人脸识别 html5，以便您可以使用命令行来识别文件夹中的图像。
整体流程启动Web服务，使用face_recognition对基础库图像进行建模，并将建模结果（识别出的人脸在图像中的位置和面部特征）加载到显存中。 前端通过h5页面的getUserMedia方法调用摄像头获取视频流。 通过canvas抓取一帧视频并转换为图片（base64），使用http或websocket发送到后台。 后台接受base64参数并将其转换为图像进行存储。 调用face_recognition.locations和face_recognition.face_encodings进行图像建模。 调用face_recognition.compare_faces将图像建模结果与基础库结果进行比较。 根据定义的比较阈值（称为容差，通常为0.6）返回比较结果。 如果阈值大于该值，则判断为该用户，允许登录人脸识别 html5，并返回系统界面。 否则会返回人脸识别失败的信息。流程图时序图参考案例前段代码
检测实时数据
年龄：
颜值：
性别：
人种：
是否戴眼镜：
表情：
//判断浏览器是否支持HTML5 Canvas
window.onload = function () {
try {
//动态创建一个canvas元 ，并获取他2Dcontext。如果出现异常则表示不支持 document.createElement("canvas").getContext("2d");
document.getElementById("support").innerHTML = "浏览器支持HTML5 CANVAS";
}
catch (e) {
document.getElementByIdx("support").innerHTML = "浏览器不支持HTML5 CANVAS";
}
};
var timer = null;
//这段代 主要是获取摄像头的视频流并显示在Video 签中
window.addEventListener("DOMContentLoaded", function () {
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
// videoObj = { "video": true },
//调用用户媒体设备，访问摄像头
mediaConstraints = {
audio: false,
video: {
width: { ideal: 1280 },
height: { ideal: 720 },
frameRate: {
ideal: 10,
max: 15
},
facingMode: "environment"
}
};
errBack = function (error) {
console.log("Video capture error: ", error.code);
};
//拍照按钮
// $("#snap").click(function () {
// context.drawImage(video, 0, 0, 330, 250);
// })
//拍照每秒一次
timer = setInterval(function () {
context.drawImage(video, 0, 0, 330, 250)
CatchCode();
}, 3000);
//navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow
//更新兼容火狐浏览器
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
navigator.getUserMedia(mediaConstraints, function (stream) {
video.srcObject = stream;
video.play();
}, errBack);
}
}, false);
/**
* Base64 数据处理
*/
function dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);
else
byteString = unescape(base64Data.split(',')[1]);
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], { type: mimeString });
}
/**
* 上传服务器
*/
function CatchCode() {
var canvans = document.getElementById("canvas");
//获取浏览器页面的画布对象
//以下开始编 数据
var imageBase64 = canvans.toDataURL();
var blob = dataURItoBlob(imageBase64);
var fd = new FormData(document.forms[0]);
fd.append("the_file", blob, 'image.png');
//将图像转换为base64数据
$.ajax({
type: "POST",
url: "{:url('/index/Index/faceVerifyVideo')}",
processData: false, // 必须
contentType: false, // 必须
data: fd,
datatype: "json",
success: function (res) {
console.log(res);
if (res.code == 0) {
// layer.msg(JSON.stringify(res.data.face_list));
var jsonObj = res.data.face_list[0];
var age = jsonObj.age;
var beauty = jsonObj.beauty;
var gender = jsonObj.gender;
var race = jsonObj.race;
var glasses = jsonObj.glasses;
var expression = jsonObj.expression
$("#age").html(age);
$("#beauty").html(beauty);
if (gender.type == 'male') {
$("#gender").html("男");
} else {
$("#gender").html("女");
}
if (race.type == 'yellow') {
$("#race").html("黄种人");
} else if (race.type == 'white') {
$("#race").html("白种人");
} else if (race.type == 'black') {
$("#race").html("黑种人 ");
} else {
$("#race").html("阿拉伯人");
}
if (glasses.type == 'none') {
$("#glasses").html("未戴眼镜");
} else if (glasses.type == 'common') {
$("#glasses").html("戴了普通眼镜");
} else {
$("#glasses").html("戴了墨镜");
}
if (expression.type == 'none') {
$("#expression").html("不笑");
} else if (expression.type == 'smile') {
$("#expression").html("微笑");
} else {
$("#expression").html("大笑");
}
// layer.alert(res.msg, { icon: 6 });
clearInterval(timer);
} else {
layer.msg(res.msg, { icon: 5 });
}
},
error: function () {
layer.alert('接口异常', { icon: 5 });
}
});
}
服务器代码
微信公众号轻松回复百度人脸识别码即可获取
