问题描述
事实是,在代码正常工作之前,它的工作方式是这样的:当您单击按钮(开始)时,在成功通过请求访问(网络摄像头和麦克风)后,现在开始录制视频将无法工作该脚本记录视频并通过ajax传输
$(document).ready(function(){
/*
* copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
*
* Use of this source code is governed by a BSD-style license
* that can be found in the LICENSE file in the root of the source
* tree.
*/
// This code is adapted from
// https://rawgit.com/Miguelao/demos/master/mediarecorder.html
'use strict';
/* globals MediaRecorder */
let mediaRecorder;
let recordedBlobs;
// const errorMsgElement = document.querySelector('span#errorMsg');
const recordedVideo = document.querySelector('video#recorded');
const recordButton = document.querySelector('#record');
recordButton.addEventListener('click',() => {
document.getElementById("start").click();
if (recordButton.textContent === 'Start Recording') {
startRecording();
$('#start').css("display","none");
// setTimeout(stopRecording,50000);
} else {
stopRecording();
recordButton.textContent = 'Start Recording';
playButton.disabled = false;
downloadButton.disabled = false;
}
});
const playButton = document.querySelector('button#play');
playButton.addEventListener('click',() => {
const superBuffer = new Blob(recordedBlobs,{type: 'video/webm'});
recordedVideo.src = null;
recordedVideo.srcObject = null;
recordedVideo.src = window.URL.createObjectURL(superBuffer);
recordedVideo.controls = true;
recordedVideo.play();
});
const downloadButton = document.querySelector('#download');
downloadButton.addEventListener('click',() => {
const blob = new Blob(recordedBlobs,{type: 'video/webm'});
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'test.webm';
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
},100);
location.reload();
});
function handleDataAvailable(event) {
console.log('handleDataAvailable',event);
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
}
}
function startRecording() {
recordedBlobs = [];
let options = {mimeType: 'video/webm;codecs=vp9,opus'};
if (!MediaRecorder.isTypeSupported(options.mimeType)) {
console.error(`${options.mimeType} is not supported`);
options = {mimeType: 'video/webm;codecs=vp8,opus'};
if (!MediaRecorder.isTypeSupported(options.mimeType)) {
console.error(`${options.mimeType} is not supported`);
options = {mimeType: 'video/webm'};
if (!MediaRecorder.isTypeSupported(options.mimeType)) {
console.error(`${options.mimeType} is not supported`);
options = {mimeType: ''};
}
}
}
try {
mediaRecorder = new MediaRecorder(window.stream,options);
} catch (e) {
console.error('Exception while creating MediaRecorder:',e);
errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(e)}`;
return;
}
console.log('Created MediaRecorder',mediaRecorder,'with options',options);
recordButton.textContent = 'Stop Recording';
playButton.disabled = true;
downloadButton.disabled = true;
mediaRecorder.onstop = (event) => {
console.log('Recorder stopped: ',event);
console.log('Recorded Blobs: ',recordedBlobs);
};
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();
console.log('MediaRecorder started',mediaRecorder);
}
function stopRecording() {
//ERROR
mediaRecorder.stop();
//ERROR
//document.getElementById("download").click();
$('#record').css( "display","none" );
$('#download').attr( "style",'');
}
function handleSuccess(stream) {
recordButton.disabled = false;
console.log('getUserMedia() got stream:',stream);
window.stream = stream;
const gumVideo = document.querySelector('video#gum');
gumVideo.srcObject = stream;
}
async function init(constraints) {
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
handleSuccess(stream);
} catch (e) {
console.error('navigator.getUserMedia error:',e);
// errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
}
}
document.querySelector('#start').addEventListener('click',async () => {
$('#main_img').css('display','none');
$('#gum').attr('style','');
//const hasEchoCancellation = document.querySelector('#echoCancellation').checked;
const constraints = {
//audio: {
//echoCancellation: {exact: hasEchoCancellation}
//},video: {
width: 1280,height: 720
}
};
console.log('Using media constraints:',constraints);
await init(constraints);
});
});
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)