Ich habe eine Reihe von Animationen, die ich in Canvas (fabric.js) oder WebGL (three.js) machen kann. Ich muss sie automatisch serverseitig über ein Skript aufzeichnen und eine Videodatei ausgeben.
Die Animationen umfassen:
Ich habe in den letzten Monaten viel darüber recherchiert.
Ergebnisse
1. Benutzer PhantomJS + FFMPEG
Führen Sie HTML-Canvas-Animationen im kopflosen Browser (PhantomJS) aus und zeichnen Sie mit FFMPEG auf. Hier ist das Problem, dass PhantomJS weder WebGL noch Video unterstützt. Ссылка
< br>
2. Verwenden Sie Websockets, um Daten mithilfe von DataURL an den Server zu senden.
Auch hier müssen wir die Animationen im Browser ausführen ( was wir nicht können, weil wir alles auf dem Server machen müssen )
3. Verwenden Sie node-canvas
Dies ist eine Bibliothek von TJ Holowaychuk, die das Rendern von HTML Canvas auf Node.js ermöglicht. Aber es hat seine eigenen Grenzen und ich habe dieses Gebiet nicht wirklich erforscht.
(Wenn jemand mehr Licht auf diese Bibliothek werfen könnte)
Wenn irgendjemand es vorher getan hat oder mich irgendwo nützlich führen kann.
Alles, was wir tun müssen, ist einige Daten zu verwenden, um Animationen zu erstellen und sie in ein Video aufzunehmen, alles auf Serverseite.
Ich glaube nicht, dass node-canvas den Webgl-Kontext unterstützt Ich muss eine Bibliothek verwenden, die um die 2D-Zeichnung herum gebaut ist, und das ist sicher wird keine Unterstützung für Videocodecs haben.
Wenn Sie Ihre Animation mit node-canvas arbeiten können, können Sie greifen Sie die animierten Bilder mit einer für Ihren Inhalt geeigneten Geschwindigkeit auf, etwas wie das:
Offenlegung : Ich habe erfolgreich FFmpeg verwendet, um eine Sequenz zu kodieren von extern generierten Bildern, aber habe das SetInterval () nicht ausprobiert Methode unten. Zusätzlich zu dem Animationsoverhead selbst, tue ich das nicht weiß, wie man einen Canvas in PNG-Dateien mit 30 FPS exportiert.
%Vor% Und dann FFmpeg verwenden, um eine Folge von Bildern in ein Video zu kodieren.
Den Code hinter encodeVideo() finden Sie in diesem Beispiel .
Bearbeiten : Möglicherweise liegt ein Problem mit canvas.pngStream() writing vor
falsche Bilder, während die Animationsschleife kontinuierlich anzieht
diese eine Leinwand - vielleicht muss eine Kopie der Leinwand erstellt werden
pro Rahmen? Das würde sicherlich einen erheblichen Erinnerungsdruck erzeugen.
Ich denke, dass der Chrome Headless-Modus WebGL bereits unterstützt und eine weitere Möglichkeit ist. Der Video-Rendering-Teil soll noch kommen: Ссылка
Tags und Links node.js ffmpeg phantomjs three.js node-canvas