Wie PWAs, WebAssembly und ChromeOS dabei helfen, einen webbasierten Video-Editor zu nutzen, um 12 Millionen Nutzern eine bessere Leistung und ein interaktiveres Erlebnis zu bieten.
97%
Monatliches Wachstum bei PWA-Installationen
2,3x
Leistungssteigerung
9 %
Höhere Bindung bei PWA-Nutzern
Clipchamp ist der im Browser integrierte Video-Editor, mit dem jeder Geschichten erzählen kann, die er in Videos teilen möchte. Weltweit nutzen mehr als 12 Millionen Creator Clipchamp zur einfachen Bearbeitung von Videos. Wir bieten einfache Lösungen zum Erstellen von Videos, von intuitiven Tools wie Zuschneiden und Zuschneiden bis hin zu praktischen Funktionen wie unserem Bildschirmrekorder und sogar einem Meme-Tool.
Wer nutzt Clipchamp?
Unsere Nutzer (oder alltägliche Editoren, wie wir sie nennen) sind vielfältig. Für die Arbeit als Video-Editor mit Clipchamp sind keine Vorkenntnisse erforderlich. Insbesondere für Vertriebs-, Support- und Produktmarketing-Teams verwenden wir unsere Webcam und unseren Bildschirmrekorder, um schnell erklärende Inhalte mit zusätzlichem Text und GIFs zu erstellen und so ansprechend zu gestalten. Wir beobachten auch, wie viele kleine Unternehmen soziale Videos bearbeiten und posten, wenn sie unterwegs sind.
Vor welchen Herausforderungen stehen sie?
Uns ist bewusst, dass die Videobearbeitung auf den ersten Blick einschüchternd wirken kann. Es wird angenommen, dass es schwierig ist, vermutlich aufgrund früherer frustrierender Erfahrungen mit komplexer Bearbeitungssoftware. Im Gegensatz dazu konzentriert sich Clipchamp auf Nutzerfreundlichkeit und Einfachheit und bietet Unterstützung durch Text-Overlays, Stockvideos und Musik, Vorlagen und mehr.
Die meisten Redakteure wollen keine Meisterwerke für Filme erstellen. Wir sprechen viel mit unseren Nutzern und werden ständig daran erinnert, dass sie viel zu tun haben und ihre Geschichte so schnell und einfach wie möglich veröffentlichen möchten. Daher ist dies unser Schwerpunkt.
Clipchamp-PWA entwickeln
Bei Clipchamp dreht sich alles darum, Menschen zu ermöglichen, ihre Geschichte in Videos zu erzählen. Um dieser Vision gerecht zu werden, haben wir schnell erkannt, dass es wichtig ist, unseren Nutzern die Möglichkeit zu geben, bei der Zusammenstellung eines Videoprojekts ihr eigenes Videomaterial zu verwenden.
Diese Erkenntnis setzte das Engineering-Team von Clipchamp unter Druck, eine Technologie zu entwickeln, mit der Mediendateien im Gigabyte-Maßstab effizient in einer Webanwendung verarbeitet werden können. Aufgrund von Einschränkungen der Netzwerkbandbreite konnten wir eine traditionelle cloudbasierte Lösung schnell ausschließen. Das Hochladen großer Mediendateien über eine Internetverbindung über den Einzelhandel würde unweigerlich lange Wartezeiten mit sich bringen, bevor die Bearbeitung überhaupt beginnt, was wiederum zu einer schlechten Nutzererfahrung führt.
Das hat uns dazu veranlasst, zu einer Browserlösung zu wechseln, bei der die ganze „schweren Arbeit“ der Videoverarbeitung lokal über die auf dem Gerät des Endnutzers verfügbaren Hardwareressourcen erfolgt. Wir setzen strategisch auf den Chrome-Browser und damit auch auf die ChromeOS-Plattform, um die unvermeidlichen Herausforderungen beim Aufbau einer browserinternen Videoerstellungsplattform zu bewältigen.
Die Videoverarbeitung ist extrem ressourcenintensiv und wirkt sich sowohl auf Computer- als auch auf Speicherressourcen aus. Wir begannen damit, die erste Version von Clipchamp auf dem Portable Native Client (PNaCl) von Google zu entwickeln. Obwohl PNaCl schließlich eingestellt wurde, war es eine hervorragende Bestätigung für unser Team, dass Webanwendungen schnell und mit niedriger Latenz arbeiten können, aber weiterhin auf Endnutzerhardware ausgeführt werden.
Beim Wechsel zu WebAssembly waren wir froh, dass Chrome die führende Rolle bei der Einbindung von Post-MVP-Funktionen wie Bulk-Speichervorgängen, Threading und zuletzt Vektorvorgängen mit fester Breite übernahm. Letzteres wurde von unserem Entwicklungsteam mit Spannung erwartet, sodass wir unseren Videoverarbeitungsstack so optimieren können, dass wir die Vorteile von SIMD-Vorgängen nutzen, die auf modernen CPUs üblich sind. Durch die Nutzung der WebAssembly-SIMD-Unterstützung von Chrome konnten wir einige besonders anspruchsvolle Arbeitslasten wie 4K-Videodecodierung und Videocodierung beschleunigen.
Mit wenig Erfahrung und in weniger als einem Monat Aufwand für einen unserer Entwickler konnten wir die Leistung um das 2, 3-Fache verbessern. Obwohl wir noch auf einen Chrome-Ursprungstest beschränkt waren, konnten wir diese SIMD-Verbesserungen bereits für die Mehrheit unserer Nutzer einführen. Obwohl unsere Nutzer sehr unterschiedliche Hardwarekonfigurationen ausführen, konnten wir eine entsprechende Leistungssteigerung in der Produktion bestätigen, ohne negative Auswirkungen auf die Fehlerquoten zu sehen.
Kürzlich haben wir die neu entstehende WebCodecs API integriert, die derzeit im Rahmen eines anderen Chrome-Ursprungstests verfügbar ist. Mit dieser neuen Funktion können wir die Leistung der Videodecodierung auf Low-Spezifikation-Hardware weiter verbessern, die in vielen gängigen Chromebooks zu finden ist.
Bei der Entwicklung einer PWA ist es wichtig, ihre Akzeptanz zu fördern. Wie bei vielen Webanwendungen legen wir großen Wert darauf, dass der Zugriff so einfach ist wie die Anmeldung über soziale Netzwerke, einschließlich Google. So gelangen Nutzer schnell an einen Ort, an dem sie Videos bearbeiten und exportieren können. Außerdem haben wir unsere PWA-Installationsaufforderungen in der Symbolleiste und als Pop-up-Hinweis in der Menünavigation beworben.
Ergebnisse
Unsere installierbare Chrome-PWA funktioniert sehr gut. Wir freuen uns sehr, dass PWA-Nutzer 9% höhere Nutzerbindung als Standard-Desktop-Nutzer verzeichnen. Die Installation der PWA ist seit der Einführung vor fünf Monaten um 97% pro Monat gestiegen. Und wie bereits erwähnt, verbesserte die WebAssembly-SIMD-Leistung die Leistung um das 2, 3-Fache.
Zukünftig
Wir sind positiv überrascht von dem Engagement und der Akzeptanz unserer PWA. Wir sind der Meinung, dass die Nutzerbindung von Clipchamp von Vorteil war, weil die PWA installiert und leichter zugänglich ist. Außerdem haben wir festgestellt, dass die PWA für den Editor besser funktioniert, sie dadurch ansprechender wird und die Nutzer immer wieder zurückkommen.
ChromeOS bietet künftig noch mehr Nutzern die Möglichkeit, mit weniger Aufwand mehr zu erledigen. Wir freuen uns insbesondere auf einige der bequemen Integrationen in das lokale Betriebssystem, wenn Sie mit Dateien arbeiten. Wir glauben, dass dies die Workflows für unsere vielbeschäftigten Editoren beschleunigen wird, und das ist eine unserer obersten Prioritäten.