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

问题描述

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

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

有没有我遗漏的步骤？

解决方法

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

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

将视频转换为 mp4。