Этот код ниже работает в качестве теста для визуализации видеопотока камеры на элементе video
, затем записывает этот поток и передает его на другой элемент video
:
$(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)
})
Этот код выше работает, однако проблемы заключаются в следующем:
- «Разветвленное» видео на
guestPlayer
задерживается примерно на 5 секунд (проверено на Firefox, поскольку воспроизведение на guestPlayer
не работает с Chrome) это нормально? Я имею в виду, есть ли опция для MediaRecorder
для более быстрой записи? Учитывая, что guestPlayer
просто получает данные с рекордера в том же процессе браузера. (На данный момент нет потока на стороне сервера)