前端PC人脸识别登录

程先生哈

已于 2023-02-24 19:53:12 修改

阅读量268

点赞数

文章标签：前端 javascript html html5 开发语言

于 2021-06-23 09:59:00 首次发布

本文链接：https://blog.csdn.net/qq_35073135/article/details/129153752

版权

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

特别注意的点

调用摄像头必须使用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)
}