CapCut boosts organic traffic by 83% by building a fully-functional web app using WebAssembly and WebCodecs

As one of the top 10 most downloaded apps on Android in 2023, CapCut is one of the most popular video editing apps available for mobile. It's also completely free. The all-in-one video editing tool offers numerous effects and editing features, like speech-to-text and image upscaling, as well as a fully stocked media library to help users create high-quality videos and graphics quickly and smoothly. When CapCut users finish creating their content, they can publish it to their social media platform of choice with just one click, including TikTok, YouTube, Instagram, and Facebook.

CapCut focuses on providing its users with a great experience by enabling them to create content on their terms. Recently, the CapCut team has invested in developing an advanced web application for its desktop users that enhances the user experience. CapCut online has a user-friendly interface that offers practical features for both personal and business users, making it easier to create content and collaborate across teams. This update enables users to access the powerful video editing software directly from their preferred browser, providing a more convenient and flexible editing experience.

Web apps lower the entry barrier

CapCut launched a web application to give its users more ways to access its video editing platform, adding to their existing Android and iOS mobile apps. Providing more points of entry lets users choose the platform that works best for them, whether that be downloading the mobile app from the Google Play Store, installing it as a web application through their favorite browser, or using it directly in a browser tab. The team felt that having a desktop app that also works in the browser could potentially increase retention and improve overall satisfaction of their users.

Thanks to the suite of technologies available to developers, it was straightforward for CapCut to translate and transfer its platform-specific mobile application into an equally powerful web version. Web platform technologies like WebAssembly have gained significant popularity with developers over the past few years, allowing them to make powerful web apps faster than before. And since most of CapCut's editing engine is written in C++, its developers could use Emscripten to port the application to a desktop web version.

Quote by James Williams from CapCut saying: We used WebAssembly and WebCodecs to efficiently port many of our critical features from the native codebase to the web without compromising on
performance or functionality.

WebAssembly

With WebAssembly, CapCut developers successfully transferred more than one million video and graphic templates to the new web application. Emscripten's powerful support for compiling C and C++ code to WebAssembly allowed the CapCut to efficiently share code between the platform-specific and web apps, helping them port some of CapCut's most important functions to the new platform, including customized video effects and video editing.

CapCut has many special effects that run algorithms in the browser, which can bottleneck video rendering during real-time processing. Thanks to WebAssemly's parallel processing function known as Single Instruction, Multiple Data (SIMD), CapCut developers improved the app's processing performance by nearly 300% compared to non-SIMD solutions, better preventing bottlenecks from occurring.

Exception Handling (EH) is one of the basic capabilities of C++, but support for EH in Emscripten was incomplete. Emscripten provides a set of EH mechanisms based on JavaScript, but these can negatively impact an app's runtime performance and increase its package size. WebAssembly's EH standard circumvents this issue. Switching to WebAssembly for EH reduced the package size of CapCut's web app by 15% while making the code more performant.

WebCodecs

For video editing, CapCut must decode the videos that users input into images and then display them on the editing canvas below the video preview. Even with a SIMD-optimized decoder, decoding a 4K image to the editing canvas on a high-performance computer takes tens of milliseconds, meaning that decoding multiple tracks of video simultaneously requires a lot of power.

Using WebCodecs, CapCut integrated hardware-accelerated encoding and decoding, improving audio and video processing speed by nearly 300%. With the greatly improved performance, CapCut now supports multiple simultaneous 4K streams. Additionally, WebCodecs allowed support for more video formats, such as H264, HEVC, VP8, VP9, and AV1.

Stats about the CapCut app: More than one million templates transferred to CapCut's web app. Up to 300% better processing performance. 40% increase in supported video formats.

Harnessing the full power of a web application

The CapCut team began porting the platform-specific application over to the web at the beginning of 2022. In August of that year, CapCut officially launched its first web-based version of the app for desktop. Using progressive web app (PWA) technologies, CapCut enabled installation through the browser. After launching its new web app using these technologies, the CapCut team saw an 83% improvement in SEO traffic.

Installing the CapCut app.

Bringing CapCut to the web also allowed developers to make the most of their users' experience by combining powerful Google features with the application. Within one month of launch, many users were able to sign in using Google One Tap sign in function, streamlining the sign in process by allowing them to use their existing Google credentials instead of manually typing in their information.

Expanding possibilities with the web

Making CapCut available on the web created new possibilities for millions of users, providing them more ways to access the software. Thanks to WebAssembly, WebCodecs, and the other modern web technologies available for building advanced web apps, CapCut developers successfully implemented a one-to-one port that maintained the app's full power and performance.

Learn more

Discover how to bring your applications to the web using WebAssembly and WebCodecs.

CapCut video editor.