我想以2秒的间隔记录本地和远程流并用Ajax上传到服务器。但问题是,ondataavailable 方法被调用了两次,因此同一个视频被上传到服务器两次。第一个视频可以正常播放,而其余视频要么已损坏,要么非常小(不到一秒)。所有视频的大小几乎相同!
我也尝试过 MediaRecorder API,但问题是一样的。我尝试过 5 秒的间隔,但仍然没有成功!
这就是我获取本地流的方式:
navigator.mediaDevices.getUserMedia({
video: false,
audio: true
}).then(function (myStream) {
localStream = myStream;
localStream.getTracks().forEach(function (track) {
yourConn.addTrack(track, localStream);
});
}).catch(function (error) {
streamAdded = false;
console.warn('Could not detect microphone');
return false;
});
这就是我执行录音的方式:
yourConn.ontrack = function (e) {
remoteVideo.srcObject = e.streams[0];
let recorder = RecordRTC([localStream, e.streams[0]], {
mimeType: 'video/webm;codecs=h264',
type: 'video',
timeSlice: 5000,
ondataavailable: function(blob) {
uploadBlob(blob);
},
});
recorder.startRecording();
}
上传Blob函数:
var formData = new FormData();
formData.append('recorded_file', mp4File);
$.ajax({
url: myURL,
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function (response) {
console.log(response);
}
});
如何才能毫无问题地录制两个流?