javascript - 以mp4格式录制HTML5 canvas动画

Question

我在将 Canvas 录制为 mp4 文件格式的视频时遇到问题。我设法使用 RecordRTC 将 Canvas 记录为 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 canvas 录制成 mp4 格式的视频。我只需要将它从 webm 转换为 mp4。这需要很多时间。有什么办法可以直接把canvas录制成mp4而不用先做webm再转成mp4的过程吗？

谢谢。

Answer 1

查看这篇文章。在其中，他们将 Canvas 动画转换为 mp4，通过使用 socket.io 将 Canvas 帧图像保存到服务器，然后使用 ffmpeg 转换为 mp4。使用这种方法，可以在不首先创建 webM 视频的情况下从捕获帧到 mp4。希望对您有所帮助。

Web Archive snapshot