CapCut aumenta il traffico organico dell'83% creando un'app web completamente funzionale con WebAssembly e WebCodecs

CapCut è una delle 10 app più scaricate su Android nel 2023 ed è una delle app di editing video più apprezzate disponibili per il mobile. Inoltre, è completamente senza costi. Lo strumento di editing video all-in-one offre numerosi effetti e funzionalità di editing, come la conversione da voce a testo e l'upscaling delle immagini, nonché una raccolta multimediale completa per aiutare gli utenti a creare video e immagini di alta qualità in modo rapido e semplice. Quando gli utenti di CapCut hanno finito di creare i contenuti, possono pubblicarli sulla piattaforma di social media che preferiscono con un solo clic, tra cui TikTok, YouTube, Instagram e Facebook.

CapCut si impegna a offrire ai propri utenti un'esperienza eccezionale consentendo loro di creare contenuti in piena autonomia. Di recente, il team di CapCut ha investito nello sviluppo di un'applicazione web avanzata per gli utenti desktop che migliora l'esperienza utente. CapCut online ha un'interfaccia facile da usare che offre funzionalità pratiche sia per gli utenti privati che aziendali, semplificando la creazione di contenuti e la collaborazione tra team. Questo aggiornamento consente agli utenti di accedere al potente software di editing video direttamente dal browser preferito, offrendo un'esperienza di modifica più comoda e flessibile.

Le app web abbassano la soglia di ingresso

CapCut ha lanciato un'applicazione web per offrire agli utenti più modi per accedere alla sua piattaforma di editing video, che si aggiunge alle app mobile per Android e iOS esistenti. Fornire più punti di accesso consente agli utenti di scegliere la piattaforma più adatta alle loro esigenze, che si tratti di scaricare l'app mobile dal Google Play Store, di installarla come applicazione web tramite il browser preferito o di utilizzarla direttamente in una scheda del browser. Il team ha ritenuto che avere un'app desktop che funziona anche nel browser potesse potenzialmente aumentare la fidelizzazione e migliorare la soddisfazione complessiva dei propri utenti.

Grazie alla suite di tecnologie a disposizione degli sviluppatori, è stato facile per CapCut tradurre e trasferire la propria applicazione mobile specifica per piattaforma in una versione web altrettanto potente. Negli ultimi anni, le tecnologie della piattaforma web come WebAssembly hanno acquisito una popolarità significativa tra gli sviluppatori, consentendo loro di creare app web potenti più velocemente di prima. Inoltre, poiché la maggior parte del motore di editing di CapCut è scritto in C++, gli sviluppatori potrebbero utilizzare Emscripten per eseguire il porting dell'applicazione a una versione web desktop.

Citazione di James Williams di CapCut: Abbiamo utilizzato WebAssembly e WebCodecs per eseguire il porting efficiente di molte delle nostre funzionalità critiche dalla base di codice nativa al web senza compromettere le prestazioni o le funzionalità.

WebAssembly

Con WebAssembly, gli sviluppatori di CapCut hanno trasferito correttamente più di un milione di modelli video e grafici alla nuova applicazione web. Il potente supporto di Emscripten per la compilazione del codice C e C++ in WebAssembly ha consentito a CapCut di condividere in modo efficiente il codice tra le app web e quelle specifiche della piattaforma, aiutando a eseguire il porting di alcune delle funzioni più importanti di CapCut sulla nuova piattaforma, inclusi gli effetti video personalizzati e l'editing video.

CapCut ha molti effetti speciali che eseguono algoritmi nel browser, il che può creare un collo di bottiglia durante il rendering dei video durante l'elaborazione in tempo reale. Grazie alla funzione di elaborazione parallela di WebAssembly nota come Single Instruction, Multiple Data (SIMD), gli sviluppatori di CapCut hanno migliorato le prestazioni di elaborazione dell'app di quasi il 300% rispetto alle soluzioni non SIMD, impedendo meglio la formazione di colli di bottiglia.

La gestione delle eccezioni (EH) è una delle funzionalità di base del C++, ma il supporto per la gestione delle eccezioni in Emscripten era incompleto. Emscripten fornisce un insieme di meccanismi EH basati su JavaScript, ma questi possono influire negativamente sulle prestazioni di runtime di un'app e aumentare le sue dimensioni del pacchetto. Lo standard EH di WebAssembly aggira questo problema. Il passaggio a WebAssembly per EH ha ridotto le dimensioni del pacchetto dell'app web di CapCut del 15%, migliorando al contempo il rendimento del codice.

WebCodecs

Per il montaggio video, CapCut deve decodificare i video inseriti dagli utenti nelle immagini e poi visualizzarli nell'area di modifica sotto l'anteprima del video. Anche con un decodificatore ottimizzato per SIMD, la decodifica di un'immagine 4K nella tela di modifica su un computer ad alte prestazioni richiede decine di millisecondi, il che significa che la decodifica di più tracce video contemporaneamente richiede molta potenza.

Utilizzando WebCodecs, CapCut ha integrato la codifica e la decodifica con accelerazione hardware, migliorando la velocità di elaborazione audio e video di quasi il 300%. Grazie alle prestazioni notevolmente migliorate, CapCut ora supporta più stream 4K simultanei. Inoltre, WebCodecs ha consentito il supporto di più formati video, come H264, HEVC, VP8, VP9 e AV1.

Statistiche sull'app CapCut: più di un milione di modelli trasferiti all'app web di CapCut. Rendimento di elaborazione migliorato fino al 300%. Aumento del 40% dei formati video supportati.

Sfruttare al meglio la potenza di un'applicazione web

All'inizio del 2022, il team di CapCut ha iniziato a eseguire il porting dell'applicazione specifica per la piattaforma sul web. Nell'agosto dello stesso anno, CapCut ha lanciato ufficialmente la sua prima versione basata su web dell'app per computer. Utilizzando le tecnologie PWA (Progressive Web App), CapCut ha attivato l'installazione tramite il browser. Dopo aver lanciato la nuova app web utilizzando queste tecnologie, il team di CapCut ha registrato un miglioramento dell'83% del traffico SEO.

Installazione dell'app CapCut.

La disponibilità di CapCut sul web ha anche consentito agli sviluppatori di sfruttare al meglio l'esperienza degli utenti combinando le potenti funzionalità di Google con l'applicazione. Entro un mese dal lancio, molti utenti sono riusciti ad accedere utilizzando la funzione di accesso One Tap di Google, semplificando la procedura di accesso consentendo loro di utilizzare le credenziali Google esistenti anziché digitare manualmente le informazioni.

Ampliare le possibilità con il web

La disponibilità di CapCut sul web ha creato nuove possibilità per milioni di utenti, offrendo loro più modi per accedere al software. Grazie a WebAssembly, WebCodecs e alle altre moderne tecnologie web disponibili per la creazione di app web avanzate, gli sviluppatori di CapCut hanno implementato con successo una porta uno a uno che manteneva tutta la potenza e le prestazioni dell'app.

Scopri di più

Scopri come portare le tue applicazioni sul web utilizzando WebAssembly e WebCodecs.

Editor video CapCut.