以 mp4 格式录制 HTML5 画布动画

Question

我在将画布录制为 mp4 文件格式的视频时遇到问题。我设法使用 RecordRTC 将画布记录为 webm 格式。当我尝试提供 mimetype: video/mp4 时，它给出了一个错误，无法记录为 mimetype: video/mp4。

 var canvas = document.getElementById('canvas');
            var canvasStream = canvas.captureStream();

            var finalStream = new MediaStream();
            audioStream.getAudioTracks().forEach(function(track) {
                finalStream.addTrack(track);
            });
            canvasStream.getVideoTracks().forEach(function(track) {
                finalStream.addTrack(track);
            });

            var recorder = RecordRTC(finalStream, {
            type: 'video',
            mimeType: 'video/mp4'
            });

            recorder.startRecording();

上面的代码适用于 webM 格式。我看不到将 HTML5 画布录制为 mp4 格式的视频的方法。我只需要将它从 webm 转换为 mp4。这需要很多时间。有没有什么办法可以直接把canvas录制成mp4而不经过先制作webm然后再转换成mp4的过程？

谢谢。

Answer 1

查看这篇文章。其中，他们将canvas动画转换为mp4，通过使用socket.io将canvas帧图像保存到服务器，然后使用ffmpeg转换为mp4。使用此方法，无需先创建 webM 视频即可从捕获帧转换为 mp4。希望能帮助到你。

网络档案快照