recording canvas animation playback issue with chromium browsers

Question

If i use the following code to record a canvas animation:

        streamInput = parent.document.getElementById('whiteboard');
        stream = streamInput.captureStream();
        const recorder = RecordRTC(stream, {
             // audio, video, canvas, gif
            type: 'video',
            mimeType: 'video/webm',
            recorderType: MediaStreamRecorder,
            disableLogs: false,
            timeSlice: 1000,
            ondataavailable: function(blob) {},
            onTimeStamp: function(timestamp) {},
            bitsPerSecond: 3000000,
            frameInterval: 90,
            frameRate: 60,
            bitrate: 3000000,
        });

    recorder.stopRecording(function() {
            getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
                url = URL.createObjectURL(recorder.getBlob());
                $("#exportedvideo").attr("src", url);
                $("#exportedvideo").attr("controls", true);
                $("#exportedvideo").attr("autoplay", true);
            })                                      
        });

The video plays fine and i can seek it in chrome/edge/firefox etc.

When i download the video using the following code:

getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
        var file = new File([seekableBlob], "test.webm", {
            type: 'video/webm'
        });
        invokeSaveAsDialog(file, file.name);
}

The video downloads and plays fine, and the seekbar updates like normal.

If i then move the seekbar to any position, as soon as I move it I get a media player message: Can't play, Can't play because the item's file format isnt supported. Check store to see if this item is available here. 0xc00d3e8c

If i use firefox and download the file, it plays perfect and I can seek.

Do i need to do anything else to fix the Chromium webm?

i've tried using the following code to download the file:

            var file = new File([recorder.getBlob()], "test.webm", {
                type: 'video/webm'
            });
            invokeSaveAsDialog(file, file.name);

however, the file plays and i can move the seekbar but the video screen is black.

yet firefox works fine.

Here are the outputted video files:

First set were created without ts-ebml intervention:

1: https://lnk-mi.app/uploads/chrome.webm

2: https://lnk-mi.app/uploads/firefox.webm

Second set were created using ts-ebml:

1: https://lnk-mi.app/uploads/chrome-ts-ebm.webm

2: https://lnk-mi.app/uploads/firefox-ts-ebml.webm

both were created exactly the same way using ts-ebml.js to write the meta-data

recorder.addEventListener("dataavailable", async(e) => {
try {
const makeMediaRecorderBlobSeekable = await injectMetadata(e.data);
data.push(await new Response(makeMediaRecorderBlobSeekable).arrayBuffer());
blobData = await new Blob(data, { type: supportedType });
} catch (e) {
console.error(e);
console.trace();
}
});

is there a step I am missing?

Allanadale

Just a datapoint: the first set of videos both play fine in Chrome on OSX, but I can't seek at all (seek track is disabled). The second set both play fine in Chrome, with a functioning seek track. – Irs

Thanks, i ended up having to upload chromium created videos to the server and re-encode it with ffmpeg. Was hoping there was a solution to do this client side. I know it's by design because the the video is being created by the media stream which doesn't have an end time. So the problem is that the blob doesn't have the correct segment information. Plugins like ts-ebml and web-writer fix the chromium videos so they can be played in the browser, however they don't fix the underlying missing "segment" info issue. – Allanadale

Answer 1

Having tried all the plugins like ts-ebml and web-writer, I found the only reliable solution was to upload the video to my server and use ffmpeg with the following command

ffmpeg -i {$srcFile} -c copy -crf 20 -f mp4 {$destFile}

to convert the video to mp4.

Allanadale