WebWorker sind cool! Mit Whammy.js

Nach meinen ersten Erfahrungen mit WebWorkern beim http://www.webworkercontest.net/ hatte ich mich lange Zeit nicht mehr damit beschäftigt. Doch als ich anfing den WebM-Export in http://www.mp4togif.com zu implementieren, musste ich auf eine 3rd-Party Lib zum erstellen von WebP-Bildern zurück greifen, um am Ende mit Whammy.js das Video erstellen zu können. Das war für den Firefox zuviel und die Script brachen regelmässig ab, da diese zulange liefen (Chrome konnte zum Glück direkt WebP aus dem Cavnas als Data-URL erzeugen).
Das Script schnelelr zu bekommen war nicht groß möglich und es auf asm.js zu optimiren ging auch nicht, da mir doch etwas die Erfahrung damit fehlte. Also am Ende kamen mir die WebWorker wieder in den Kopf. Der Test lief schon sehr gut. Leider kann man kein Canvas-Context im WebWorker verwenden, weswegen der Chrome die WebWorker nicht verwendet sondern nur alle Browser, die auf die Lib angewiesen sind.
Aber momentan bin ich mehr als zufrieden. Keine Abbrüche mehr.. auch bei Laufzeit über einer Minute. Das Updaten des DOMs macht keine Probleme und so funktioniert der Dialog mit der Status-Anzeige auch wieder ohne Probleme.

Das Konzept ist sehr einfach. Ein Post mit dem Image-Data wird an den Worker geschickt (aus einer Schleife heraus) und dieser wandelt das Bild in ein Webp im Data-URL um und schickt es zurück. Das Bild wird ein Array geschireben (der Index wurde mitgegeben).
Wenn alle Bilder wieder da sind, werden die Webps in einer Schleife Whammy.js hinzugefügt und der rendert dann das Video.
Was sehr viel schneller geht als das Erzeugen der einzelnen Bilder.

Wenn man also viel zu rechnen hat, sollte man auf jedenfall WebWorker verwenden.

Zu finden ist das Projekt WebM-Maker.com nun unter http://www.webm-maker.com