CapCut steigert die organischen Zugriffe um 83% durch die Entwicklung einer voll funktionsfähigen Webanwendung mit WebAssembly und WebCodecs

Die App gehörte 2023 zu den 10 am häufigsten heruntergeladenen Android-Apps. CapCut ist eine der beliebtesten Apps zur Videobearbeitung. für Mobilgeräte. Außerdem ist die Nutzung völlig kostenlos. Das All-in-one-Tool zur Videobearbeitung verschiedene Effekte und Bearbeitungsfunktionen wie Spracherkennung und Bildskalierung, sowie eine voll bestückte Mediathek, in der Nutzer Videos und Grafiken schnell und flüssig ansehen. Wenn CapCut-Nutzende die Erstellung können sie diese auf der Social-Media-Plattform ihrer Wahl veröffentlichen. einschließlich TikTok, YouTube, Instagram und Facebook.

CapCut konzentriert sich darauf, seinen Nutzern eine positive Erfahrung zu bieten, Inhalte zu ihren Bedingungen zu erstellen. Kürzlich hat das CapCut-Team in Entwicklung einer erweiterten Webanwendung für Desktop-Nutzer, die die User Experience ausmacht. CapCut bietet eine nutzerfreundliche Oberfläche praktische Funktionen für private und geschäftliche Nutzer, sodass es einfacher ist, Inhalte zu erstellen und teamübergreifend zusammenzuarbeiten. Mit diesem Update können Nutzer auf die leistungsstarke Videobearbeitungssoftware direkt in ihrem bevorzugten Browser nutzen, sodass die Bearbeitung einfacher und flexibler wird.

Web-Apps senken die Einstiegsbarriere

CapCut startete eine Webanwendung, um den Nutzenden mehr Zugriffsmöglichkeiten Videobearbeitungsplattform zu ihren bestehenden mobilen Android- und iOS-Apps hinzufügen. Wenn mehr Einstiegspunkte zur Verfügung stehen, können Nutzer die Plattform auswählen, die am besten funktioniert. sei es der Download der mobilen App aus dem Google Play Store, als Webanwendung über ihren bevorzugten Browser installieren direkt auf einem Browsertab. Das Team war der Meinung, dass eine Desktop-App, die im Browser ausgeführt werden, könnte die Nutzerbindung erhöhen und sich insgesamt verbessern. die Zufriedenheit der Nutzenden.

Dank der Technologien, die Entwicklern zur Verfügung standen, war es für CapCut seine plattformspezifische mobile App in eine gleichermaßen leistungsstarken Webversion. Webplattform-Technologien wie WebAssembly haben sich in den letzten Jahren sehr beliebt, sodass sie machen Sie leistungsstarke Web-Apps schneller als zuvor. Da die meisten Bearbeitungen von CapCut in C++ geschrieben ist, könnten seine Entwickler mit Emscripten das auf eine Desktop-Webversion.

Zitat von James Williams von CapCut: „We used WebAssembly and WebCodecs to port Many of our entscheidend features from the native codebase to the web without compromising on
Leistung oder Funktionalität zu sehen.

WebAssembly

Mit WebAssembly übertragen CapCut-Entwickler mehr als eine Millionen Video- und Grafikvorlagen in die neue Webanwendung um. Emscriptens Dank leistungsstarker Unterstützung für die Kompilierung von C- und C++-Code in WebAssembly konnte CapCut Code effizient zwischen der plattformspezifischen App und der Web-App zu teilen, sodass diese einige der wichtigsten Funktionen von CapCut auf der neuen Plattform, z. B. mit benutzerdefinierten Videoeffekten und Videobearbeitung.

CapCut hat viele Spezialeffekte, mit denen Algorithmen im Browser ausgeführt werden, und Engpässe beim Videorendering während der Echtzeitverarbeitung. Dank der Die Parallelverarbeitungsfunktion von WebAssemly, bekannt als Single Instruction, Multiple Daten (SIMD), CapCut-Entwickler verbesserte die Verarbeitungsleistung der App um fast 300% im Vergleich zu Nicht-SIMD-Geräten Lösungen, um das Auftreten von Engpässen besser zu verhindern.

Exception Handling (EH) ist eine der grundlegenden Funktionen von C++. Die Unterstützung für EH in Emscripten war unvollständig. Emscripten bietet verschiedene EH-Mechanismen basierend auf JavaScript, aber diese können sich negativ auf die Laufzeitleistung einer App auswirken und die Paketgröße. Mit dem EH-Standard von WebAssembly wird dieses Problem umgangen. Wechsel zu WebAssembly für EH die Paketgröße der Webanwendung von CapCut um 15% reduzieren, während der Code

WebCodecs

Für die Videobearbeitung muss CapCut die vom Nutzer eingegebenen Videos in Bilder decodieren. und unter der Videovorschau im Bearbeitungsbereich angezeigt. Selbst mit einer SIMD-optimierter Decoder, der ein 4K-Bild auf einem Hochleistungscomputer dauert nur wenige Millisekunden. Das heißt, die Decodierung mehrere Videospuren gleichzeitig zu testen, erfordert viel Energie.

Mit WebCodecs, Hardwarebeschleunigte Codierung und Decodierung von CapCut zur Verbesserung der Tonqualität und Videoverarbeitungsgeschwindigkeit um fast 300%. Mit der stark verbesserten unterstützt CapCut jetzt mehrere gleichzeitige 4K-Streams. Außerdem WebCodecs ermöglichten die Unterstützung weiterer Videoformate wie H264, HEVC, VP8, VP9, und AV1.

Statistiken zur CapCut-App: Mehr als eine Million Vorlagen wurden an die CapCut-Web-App übertragen. Bis zu 300% bessere Verarbeitungsleistung. 40% Steigerung bei unterstützten Videoformaten

Das Potenzial einer Webanwendung voll ausschöpfen

Das CapCut-Team begann am 2022 abgeschlossen. Im August dieses Jahres brachte CapCut webbasierte Version der Desktop-App. Progressive Web-App (PWA) wird verwendet hat CapCut die Möglichkeit, Installation über den Browser. Nach der Einführung der neuen Webversion konnte das CapCut-Team die SEO um 83% verbessern. Traffic.

Die CapCut-App wird installiert.

Durch die Einführung von CapCut ins Web konnten Entwickler des Nutzers durch die Kombination leistungsstarker Google-Funktionen mit der App. Innerhalb eines Monats nach der Einführung konnten sich viele Nutzer mit Anmeldung in Google One Tap und den Anmeldeprozess durch die Nutzung Google-Anmeldedaten verwenden, anstatt Informationen manuell einzugeben.

Mit dem Web neue Möglichkeiten entdecken

Die Bereitstellung von CapCut im Web eröffnete neue Möglichkeiten für Millionen von Nutzenden und ihnen mehr Möglichkeiten für den Zugriff auf die Software bieten. Dank WebAssembly WebCodecs und die anderen modernen Webtechnologien, die zur Erstellung erweiterter Web-Apps implementiert haben, haben CapCut-Entwickler erfolgreich einen 1:1-Port implementiert, die volle Leistung und Leistung der App erhalten hat.

Weitere Informationen

Entdecken Sie, wie Sie Ihre Anwendungen mit WebAssembly und WebCodecs.

CapCut-Video-Editor.