$(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 = ''; $("#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 = ''; $("#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) { console.log(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); } }