kmall-pt-doc/50静态页面demo/face-check/js/face-check-index.js

$(function () {
    // let lodingMsg = this.$Message.loading('视频加载中....', 6000);
    // alert(1);
    startVideo();
});

function startVideo(){
    // let lodingMsg = that.$Message.loading('视频加载中....', 6000);
    $('#startBtn').attr('disabled', true);
    $('#stopBtn').attr('disabled', true);
    $('#ppBtn').attr('disabled', true);
    $("#outVideo-div").html('');
    //判断浏览器
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    var constraints = { audio: true, video: { width: 480, height: 320 } };
    var aa = '' ; //防止两次上传
    //调用摄像头  成功后获取视频流：mediaStream
    navigator.mediaDevices.getUserMedia(constraints)
        .then(function(mediaStream) {
            var video = document.querySelector('video');
            // 赋值 video 并开始播放
            video.srcObject = mediaStream;
            video.onloadedmetadata = function(e) {
                video.play();
                $('#startBtn').attr('disabled', false);
                alert('视频已加载成功');
            };
            //录像api的调用
            var mediaRecorder = new MediaStreamRecorder(mediaStream);
            mediaRecorder.mimeType = 'video/webm';
            //  停止录像以后的回调函数
            mediaRecorder.ondataavailable = function (blob) {
                //  停止以后调用上传
                if(aa == ""){
                    uploadToPHPServer(blob);
                    aa = blob;
                }
            };
            $("#startBtn").click(function(){
                showTime(4);
                $('#commentDiv').html('活体人脸识别音频开始录制...录制3秒后自动上传转为base64，录制倒计时：');
                $('#startBtn').attr('disabled',true);
                $('#ppBtn').attr('disabled',true);
                $('#stopBtn').attr('disabled',true);
                //开始录像
                mediaRecorder.start();
                setTimeout(function(){
                    //停止录像
                    mediaRecorder.stop();
                },4000);
            });
            //停止录像
            $("#stopBtn").click(function(){
                $('#commentDiv').html('');
                mediaRecorder.stop();
            });
            //重新开始录像
            $("#ppBtn").click(function(){
                if(aa !== ""){
                    showTime(4);
                    $('#commentDiv').html('活体人脸识别音频开始录制...录制3秒后自动上传转为base64，录制倒计时：');
                    // $('#startBtn').attr('disabled',false);
                    $('#stopBtn').attr('disabled',true);
                    $('#ppBtn').attr('disabled',true);
                    aa = "";
                    mediaRecorder.start();
                    setTimeout(function(){
                        //  4秒后停止录像
                        mediaRecorder.stop();
                    },4000);
                }
            });
            // 上传
            function uploadToPHPServer(blob) {
                var file = new File([blob], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.webm', {
                    type: 'video/webm'
                });
                var formData = new FormData();
                formData.append('videoFilename', file.name);
                formData.append('file', file);
                console.log(formData.get("file"));
                $('#ppBtn').attr('disabled', false);

                var src = getObjectURL(formData.get("file"));//这里的objURL就是file的真实路径
                $("#outVideo-div").html('');
                var video = '<video id="outVideo" controls="" autoplay="" name="media" style="width: 480px !important;height: 320px !important;">\n' +
                    '<source src=\"' + src +
                    '\"></video>';
                $("#outVideo-div").html(video);
                $('#commentDiv').html('');
                alert("录像结束，临时路径："+src,function () {
                    // $("#outVideo-div").html('');
                    /*$.ajax({
                        url:'../sys/oss/uploadAndBase64',
                        dataType:'json',
                        type:'POST',
                        async: false,
                        data: formData,
                        processData : false, // 使数据不做处理
                        contentType : false, // 不要设置Content-Type请求头
                        success: function(data){
                            console.log(data);
                            if(data.code==0){
                                var src = getObjectURL(formData.get("file"));
                                var video = '<video id="outVideo" controls="" autoplay="" name="media" style="width: 480px !important;height: 320px !important;">\n' +
                                    '<source src=\"' + src +
                                    '\"></video>';
                                $("#outVideo-div").html(video);

                                $('#ppBtn').attr('disabled', false);
                                $('#commentDiv').html('');

                                vm.faceLivenessRecognition.videoBase64 = data.base64EncoderImg;
                            }else{
                                alert(data.msg);
                                $('#ppBtn').attr('disabled', false);
                            }
                        },
                        error:function(response){
                            console.log(response);
                        }
                    });*/
                });
            }
            //  上传结束
        }).catch(function(err) {
        alert(err.name + ": " + err.message);
    });
}
function getObjectURL(file) {
    var url = null;
    if (window.createObjcectURL != undefined) {
        url = window.createOjcectURL(file);
    } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}
// 计时开始
function startTimer(){
    let self = this;
    this.si = setInterval(function () {
        self.timer++;
    }, 1000);
}
// 比赛结束，停止计时
function stopTimer(){
    let self = this;
    clearInterval(self.si);
}

//显示倒数秒数
function showTime(countdown){
    let self = this;
    self.isShareCount = true;
    self.isShowBtn = false;
    self.isShowFalseBtn = true;
    document.getElementById('showtimes').innerHTML = countdown;
    if (countdown == 0) {
        self.isShareCount = false;
        self.isShowTimer = true;
        self.isShowFalseBtn = false;
        document.getElementById('showtimes').innerHTML = "";
        // 计时器开始计时
        self.startTimer();
    } else {
        countdown -= 1;
        setTimeout(function () {
            self.showTime(countdown);
        }, 1000);
    }
}