使用 chromium 浏览器录制 canvas 动画播放问题

Question

如果我使用下面的代码来录制一个canvas动画：

        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);
            })                                      
        });

视频播放正常，我可以在chrome/edge/firefox等中寻找

当我使用以下代码下载视频时：

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

视频下载和播放正常，搜索栏更新正常。

如果我随后将搜索栏移动到任何位置，我一移动它就会收到一条媒体播放器消息：不能玩，无法播放，因为项目的文件格式不受支持。检查商店，看看这里是否有此商品。 0xc00d3e8c

如果我用firefox下载文件，播放完美，我可以搜索。

我还需要做任何其他事情来修复 Chromium webm 吗？

我试过使用以下代码下载文件：

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

然而，文件播放，我可以移动搜索栏，但视频屏幕是黑色的。

但 firefox 工作正常。

输出的视频文件如下：

第一组是在没有 ts-ebml 干预的情况下创建的：

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

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

第二组是使用 ts-ebml 创建的：

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

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

两者的创建方式完全相同，使用 ts-ebml.js 编写元数据

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();
}
});

有没有我遗漏的步骤？

Answer 1

尝试了所有插件，如 ts-ebml 和 web-writer，我发现唯一可靠的解决方案是将视频上传到我的服务器并使用 ffmpeg 和以下命令

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

将视频转换为 mp4。

使用 chromium 浏览器录制 canvas 动画播放问题

recording canvas animation playback issue with chromium browsers

javascript

canvas

inputstream

mediarecorder

recordrtc