Currently I am recording video from a HTML source using the following way. The blobs are of length 500ms and then I'm logging the array form of the Blob. This is because I don't have access to the storage but I have access to the log, and I plan to recreate the video from the log output.

let recorder = new MediaRecorder(stream);
let data = [];

recorder.ondataavailable = (event) => {
    event.data.arrayBuffer().then(buffer => {
            console.log("[" + new Uint8Array(buffer) + "]")
    })
}
recorder.start(500);

On the reconstruction side, I am using the following code:

let data = [];

rl.on('line', (line) => {
    let match = line.match(regex) || [];
    if (match != []) {
        for (const m of match) {
            const [, value] = m.split(' ');
            let arrUint8 = new Uint8Array(value.split(','))
            data.push(new Blob([arrUint8], { type: "video/x-matroska;codecs=avc1,opus" }))
        }
    }
})

rl.on('close', () => {
    const blob = new Blob(data, { type: "video/vp8" });
    console.log(blob);
    blob.arrayBuffer().then(buffer => {
        let buff = Buffer.from(buffer);
        fs.writeFile('video.webm', buff, () => console.log('video saved!'));
    })
})

The video file is getting generate but it doesn't seem to playback. Am I missing something in the reading and reconstruction?

P.S. the regex is just to isolate the uint8array in the log output.