Непрерывный рендеринг BLOB-объектов в элемент Video

Question

Как показано ниже, видео обрезается преждевременно, есть ли способ непрерывного рендеринга в Видео холста захваченного видео большого двоичного объекта?

Вот код для этого:

$(function () {
    var handleSuccess = function(stream) {
        var player = document.querySelector("#vid-user");
        player.srcObject = stream;

        console.log("Starting media recording")
        var options = {mimeType: 'video/webm'};
        var recordedChunks = [];
        var mediaRecorder = new MediaRecorder(stream, options);

        var guestPlayer = document.querySelector("#vid-guest");

        mediaRecorder.ondataavailable = function(e) {
            console.log("data available")
            if (e.data.size > 0) {
                var blob = e.data;
                var src = URL.createObjectURL(blob);
                guestPlayer.src = src;
            }
        }
        mediaRecorder.start(1000);
    };

    navigator.mediaDevices.getUserMedia({ audio: true, video: true })
        .then(handleSuccess)
})

Что может отсутствовать в этом коде, что мешает непрерывному воспроизведению? Как я вижу из инспектора браузера , ondataavailable непрерывно срабатывает.

В то же время есть ли способ для видео-холста выводить видео из захваченного большого двоичного объекта?