前端PC人脸识别登录

本文档主要是为了说明人脸登录的详细流程

特别注意的点

1. 调用摄像头必须使用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,
                    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编码的，这里需要先解码，然后提示错误信息