前端PC人脸识别登录
前端PC人脸识别登录
·
本文档主要是为了说明人脸登录的详细流程
特别注意的点
- 调用摄像头必须使用https协议,或者使用localhost的方式,以及直接双击打开html文件,直接使用IP的方式没办法访问
详细的流程
1、startFace()为入口函数,其中需要传参宽和高,也就是内容显示区域,也就是截图的图片的宽高
function startFace(width,height) {
// video.width = width + "px";
$(video).attr("width",width+"px").attr("height",height + "px");
$(canvas).attr("width",width+"px").attr("height",height + "px");
try {
if (navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia) {
getUserMediaToPhoto({
video: {
width: width,
height: height
},
audio: false
}, success, error);
} else {
alert('你的浏览器不支持访问用户媒体设备');
}
} catch (error) {
console.error(error);
console.log("请使用http+localhost的方式或者https域名的方式访问,暂不支持http的格式人脸登录");
}
}
-
这里面有两个判断,其中第一个try的判断是为了区分,页面访问的时候,必须是localhost的方式, 或者使用https的方式,直接使用http加上ip的方式是没有办法访问的。
-
第二个判断是根据浏览器的BOM来确定,支不支持新的接口,如果支持的话,进入getUserMediaToPhoto()函数,其中也会有一个传参,告诉浏览器,视频的大小,以及是不是需要调用音频(咱们的暂时用不到)
2、getUserMediaToPhoto()函数,是为了打开摄像头,然后会返回一个Promise对象,然后其中的success为成功之后,拿到一个视频流,然后,把这个视频流给video播放,
function success(stream) {
//兼容webkit核心浏览器
var CompatibleURL = window.URL || window.webkitURL;
//将视频流转化为video的源
// video.src = CompatibleURL.createObjectURL(stream);
try{
video.src = window.URL.createObjectURL(stream);
}catch(e){
video.srcObject = stream;
}
video.play(); //播放视频
//将视频绘制到canvas上
postFace();
}
- 这里的判断,是因为window.URL.createObjectURL这个新版本的浏览器不支持了,所以直接使用video.srcObject = stream;的方式
function error() {
console.error("获取视频设备失败");
$("#missDiver").addClass("isShowError");
setTimeout(function(){
$("#missDiver").removeClass("isShowError");
},3500)
setTimeout(function(){
$(".btnContent").click();
},800)
}
- 这里会有一个error函数,这个函数是为了监测,当用户没有摄像头,或者摄像头被其他程序占用的时候, 会进入到这个错误中,这里处理的逻辑时,给出提示,然后返回账号密码登录
3、postFace()函数时,给视频截图,然后发送给后台的函数
function postFace() {
setTimeout(function () {
context.drawImage(video, 0, 0, faceWidth, faceHeight);
img = canvas.toDataURL('image/jpg')
$("#faceImg").attr("src", img);
//将照片以base64用ajax传到后台
$.ajax({
type: 'post',
dataType: 'json',
url: '/sensetechTencentloginkit/tencentlogin',
contentType: 'application/text;charset=utf-8',
headers:{
},
data: JSON.stringify({
image: img
}),
success: function (response) {
$("#reading").hide();
if(response.result == "success"){
$("#faileInfo").hide();
$("#successInfo").show();
setTimeout(function(){
loginTrue(response.userName);
},800)
}else{
showError(decodeURIComponent(response.message))
}
}
});
}, 1*1000)
}
- 这里的第一个一秒的延时是为了,让用户有时间把自己的头像放在框中,然后开始截图;
- 截图使用的时canvas的截图功能,等到图片之后,把base64的图片直接传给后台;
- 成功之后,显示成功提示,然后等待800毫秒之后,继续做一个form表单的get提交,通过这个提交,就能正确的跳转了
- 如果失败,则给出错误提示,因为后台的原因,返回的错误是经过URL编码的,这里需要先解码,然后提示错误信息
更多推荐
已为社区贡献2条内容
所有评论(0)