If i use the following code to record a canvas animation: The video plays fine and i can seek it in chrome/edge/firefox etc. When i download the video using the following code: 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

recording canvas animation playback issue with chromium browsers

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?

Answer

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.

Advertisement

Answer