以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的過程？

謝謝。

來源

2017-10-15 amaidhassan niazi

Chrome支持在webm中錄製h264編解碼器，可以將轉換轉換爲mp4容器。但FF只支持vp8 ... – Kaiido

查看這篇文章。其中，他們通過使用socket.io將畫布幀圖像保存到服務器，然後使用ffmpeg轉換爲mp4，將畫布動畫轉換爲mp4。使用這種方法，可以在沒有首先創建webM視頻的情況下從捕獲幀到mp4。希望能幫助到你。 http://www.tysoncadenhead.com/blog/exporting-canvas-animation-to-mov/

來源

2018-01-18 11:35:41

以mp4格式錄製HTML5畫布動畫

回答

相關問題