以mp4格式录制HTML5画布动画

问题描述：

我在录制画布时遇到了mp4文件格式的视频问题。我设法使用RecordRTC将画布记录为webm格式。当我试图给mimetype：video/mp4时，它给出了无法记录为mimetype：video/mp4的错误。以mp4格式录制HTML5画布动画

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格式。我看不到以MP4格式录制HTML5画布到视频的方式。我只需要将它从webm转换为mp4。这需要很多时间。有没有什么办法可以直接将画布记录为mp4，而无需经过先制作webm然后将其转换为mp4的过程？

谢谢。

Chrome支持在webm中录制h264编解码器，可以将转换转换为mp4容器。但FF只支持vp8 ... – Kaiido

答

查看这篇文章。其中，他们通过使用socket.io将画布帧图像保存到服务器，然后使用ffmpeg转换为mp4，将画布动画转换为mp4。使用这种方法，可以在没有首先创建webM视频的情况下从捕获帧到mp4。希望能帮助到你。 http://www.tysoncadenhead.com/blog/exporting-canvas-animation-to-mov/

以mp4格式录制HTML5画布动画

相关推荐