$(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);
}
}