js MediaRecorder not having scrub bar when playing back

Question

Hi I've created code that records audio and video as mp4. Everything works but i don't have the scrub bar when playing back in VLC or windows media player. The UI for the scrub bar is there but when I click on it nothing happens. Anyone have suggestions?

Here is my code

let stopVar = false;
let stopped = false;
const downloadBTN = document.getElementById('downloadRec');
const stopBtn = document.getElementById('stop');

var saveData = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (data, fileName) {
            url = window.URL.createObjectURL(data);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());


function startRecord() {
    $('.btn-info').prop('disabled', true);
    $('#stop').prop('disabled', false);
    $('#stop').css('display', 'block')
    $('#downloadRec').css('display', 'none')
    $('#startRecording').css('display', 'none')
    
}

function stopRecord() {
    $('.btn-info').prop('disabled', false);
    $('#stop').prop('disabled', true);
    $('#stop').css('display', 'none')
    $('#downloadRec').css('display', 'block')
    $('#startRecording').css('display', 'block')
    
    
}

stopBtn.addEventListener('click', function () {
    stopVar = true;
});

const handleRecording = function ({
    stream,
    mimeType
}) {
    startRecord()
    let chunks = [];
    stopped = false;
    const mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = function (e) {
        if (e.data.size > 0) {
            chunks.push(e.data);
        }
        if (stopVar === true && stopped === false) {
            mediaRecorder.stop();
            stopped = true;
        }
    };

    mediaRecorder.onstop = function () {
        const blob = new Blob(chunks, {
            type: mimeType
        });
        chunks = []
        const filename = "RTS_recording.mp4"
        saveData(blob, filename);
        stopRecord();
    };
    mediaRecorder.start(200);
};





async function recordScreen() {
    const mimeType = {
        audioBitsPerSecond: 128000,
        videoBitsPerSecond: 2500000,
        mimeType: 'video/mp4'
    };
    stopVar = false;
    if (!navigator.mediaDevices.getDisplayMedia) {
        return window.alert('Change browser to new chrome or fox')
    }
    let stream = null;
    const streamedData = await navigator.mediaDevices.getDisplayMedia({
        video: {
            cursor: "motion"
        },
        audio: {
            'echoCancellation': true
        }
    });
    stream = streamedData;
    handleRecording({
        stream,
        mimeType
    });
}

I was thinking about mmieTypes so I've removed

audioBitsPerSecond: 128000,
videoBitsPerSecond: 2500000,

Tried with only mp4 then changed to avi and issue is still there

score 0 · Answer 1 · answered Feb 27 '23 at 12:40

MediaRecorder generates an open-ended stream of a/v data, not a seekable stream. To implement scrubbing, players need to be able to seek the data stream in the file to various time-offsets in the file. But MediaRecord's output doesn't contain the elements needed to do that seeking.

You can make MediaRecorder output seekable, but only be post-processing it (probably with ffmpeg).

js MediaRecorder not having scrub bar when playing back

1 Answers1