问题
This code below works as a test to render a camera video stream on a video
element then record that stream and render it to another video
element:
$(function () {
var handleSuccess = function(stream) {
var player = document.querySelector("#vid-user");
player.srcObject = stream;
console.log("Starting media recording")
var options = {
videoBitsPerSecond : 2500000,
mimeType: 'video/webm'
};
var mediaRecorder = new MediaRecorder(stream, options);
var guestPlayer = document.querySelector("#vid-guest");
var mediaSource = new MediaSource();
mediaSource.addEventListener('sourceopen', sourceOpen, false)
mediaSource.addEventListener('webkitsourceopen', sourceOpen, false);
guestPlayer.src = URL.createObjectURL(mediaSource);
function sourceOpen() {
//URL.revokeObjectURL(guestPlayer.src);
var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
mediaRecorder.ondataavailable = function(e) {
// Streaming video data is to be uploaded to a real-time server
if (e.data.size > 0) {
var bufferPromise = e.data.arrayBuffer();
bufferPromise.then(function(array){
sourceBuffer.appendBuffer(new Uint8Array(array));
})
}
}
}
mediaSource.addEventListener('webkitsourceended', function(e) {
}, false);
mediaRecorder.start(100);
};
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(handleSuccess)
})
This code above works, however, the issues are:
- The "forked" video to the
guestPlayer
is delayed for about 5 seconds (tested on Firefox, as playback onguestPlayer
does not work with Chrome), is that normal? I mean is there an option forMediaRecorder
to record faster? Considering theguestPlayer
is just getting data from the recorder in the same browser process. (No server-side stream at this point)
来源:https://stackoverflow.com/questions/61035109/html5-mediarecorder-capture-very-slow