Aufnahme von HTML5-Canvas-Animationen im mp4-Format

Question

Ich habe Probleme mit der Aufnahme von Canvas als Video im mp4-Dateiformat. Mit RecordRTC konnte ich die Leinwand als Webm-Format aufnehmen. Als ich versuchte, Mimetype zu geben: video/mp4 gibt es einen Fehler, der nicht als Mimetype aufzeichnen kann: 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(); 

Der obige Code funktioniert für das WebM-Format. Ich sehe keine Möglichkeit, HTML5 Canvas auf Video im MP4-Format aufzuzeichnen. Ich muss es nur von Webm in MP4 konvertieren. Es benötigt viel Zeit. Gibt es eine Möglichkeit, Canvas direkt als mp4 aufzunehmen, ohne zuerst webm zu erstellen und dann in mp4 umzuwandeln?

Danke.

Answer 1

Überprüfen Sie diesen Artikel aus. Darin konvertieren sie Canvas-Animationen in mp4, indem sie mithilfe von socket.io Canvas-Frame-Images auf dem Server speichern und dann mithilfe von ffmpeg in mp4 konvertieren. Mit dieser Methode ist es möglich, von der Aufnahme von Bildern zu MP4 zu gehen, ohne zuerst ein WebM-Video zu erstellen. Ich hoffe es hilft. http://www.tysoncadenhead.com/blog/exporting-canvas-animation-to-mov/