使用 Chrome 浏览器记录画布动画播放问题

Question

如果我使用以下代码录制画布动画：

        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。