javascript - 使用 Chrome 浏览器录制 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。