CapCut: WebAssembly と WebCodecs を使用して完全に機能するウェブアプリを構築することで、オーガニック トラフィックを 83% 増加

2023 年に Android で最もダウンロードされたアプリのトップ 10 にランクインした CapCut は、モバイルで利用できる最も人気のある動画編集アプリの 1 つです。費用はすべて無料です。このオールインワンの動画編集ツールには、音声文字変換や画像のアップスケーリングなどのさまざまな効果と編集機能が用意されています。また、充実したメディア ライブラリにより、ユーザーは高品質の動画やグラフィックを迅速かつスムーズに作成できます。CapCut ユーザーは、コンテンツの作成が完了したら、TikTok、YouTube、Instagram、Facebook など、任意のソーシャル メディア プラットフォームにワンクリックで公開できます。

CapCut は、ユーザーが自分の条件でコンテンツを作成できるようにすることで、優れたエクスペリエンスを提供することに重点を置いています。最近、CapCut チームは、ユーザー エクスペリエンスを向上させる、デスクトップ ユーザー向けの高度なウェブ アプリケーションの開発に投資しています。CapCut オンラインは、個人ユーザーとビジネス ユーザーの両方に実用的な機能を提供する使いやすいインターフェースを備えており、コンテンツの作成やチーム間のコラボレーションを容易にします。この更新により、ユーザーは任意のブラウザから直接強力な動画編集ソフトウェアにアクセスできるため、より便利で柔軟な編集体験が可能になります。

ウェブアプリは参入障壁を低くする

CapCut は、既存の Android および iOS モバイルアプリに加えて、ユーザーが動画編集プラットフォームにアクセスできる方法を増やすために、ウェブ アプリケーションをリリースしました。複数のエントリ ポイントを提供することで、ユーザーは Google Play ストアからモバイルアプリをダウンロードしたり、お気に入りのブラウザからウェブ アプリケーションとしてインストールしたり、ブラウザのタブで直接使用したりなど、自分に最適なプラットフォームを選択できます。チームは、ブラウザでも動作するデスクトップ アプリがあれば、ユーザーの維持率を高め、ユーザーの全体的な満足度を高めることができると考えました。

デベロッパーが利用できる一連のテクノロジーにより、CapCut はプラットフォーム固有のモバイルアプリを翻訳して、同様に強力なウェブ バージョンに移行できました。WebAssembly などのウェブ プラットフォーム テクノロジーは、ここ数年でデベロッパーの間で大きな人気を集め、デベロッパーは以前よりも迅速に強力なウェブアプリを作成できるようになりました。また、CapCut の編集エンジンのほとんどは C++ で記述されているため、デベロッパーは Emscripten を使用して、アプリケーションをパソコンのウェブ バージョンに移植できました。

CapCut の James Williams 氏の引用: パフォーマンスや機能性を損なうことなく、WebAssembly と WebCodecs を使用して、重要な機能の多くをネイティブ コードベースからウェブに効率的に移植しました。

WebAssembly

WebAssembly により、CapCut デベロッパーは 100 万を超える動画テンプレートとグラフィック テンプレートを新しいウェブ アプリケーションに正常に移行しました。Emscripten の C コードと C++ コードを WebAssembly にコンパイルする強力なサポートにより、CapCut はプラットフォーム固有のアプリとウェブアプリ間でコードを効率的に共有できるようになりました。これにより、カスタマイズされた動画エフェクトや動画編集など、CapCut の最も重要な機能の一部を新しいプラットフォームに移植できました。

CapCut には、ブラウザでアルゴリズムを実行する多くの特殊効果があり、リアルタイム処理中に動画レンダリングがボトルネックになる可能性があります。WebAssembly の単一命令複数データ(SIMD)と呼ばれる並列処理機能により、CapCut のデベロッパーは、SIMD 以外のソリューションと比較してアプリの処理パフォーマンスを約 300% 向上させ、ボトルネックの発生を防ぐことができました。

例外処理(EH)は C++ の基本機能の 1 つですが、Emscripten での EH のサポートは不完全でした。Emscripten には、JavaScript ベースの EH メカニズムのセットが用意されていますが、これらはアプリの実行時のパフォーマンスに悪影響を及ぼし、パッケージ サイズを増やす可能性があります。WebAssembly の EH 標準では、この問題を回避できます。EH 用の WebAssembly に切り替えることで、CapCut のウェブアプリのパッケージ サイズが 15% 削減され、コードのパフォーマンスが向上しました。

WebCodecs

動画編集では、ユーザーが画像に入力した動画をデコードし、動画プレビューの下の編集キャンバスに表示する必要があります。SIMD 最適化デコーダを使用している場合でも、高性能コンピュータで 4K 画像を編集キャンバスにデコードするには数十ミリ秒かかります。つまり、複数の動画トラックを同時にデコードするには、大量の電力が必要になります。

WebCodecs を使用して、CapCut にハードウェア アクセラレーションによるエンコードとデコードを統合し、音声と動画の処理速度を約 300% 向上させました。パフォーマンスが大幅に向上し、CapCut で複数の 4K ストリームを同時にサポートできるようになりました。さらに、WebCodecs により、H264、HEVC、VP8、VP9、AV1 などのより多くの動画形式をサポートできるようになりました。

CapCut アプリに関する統計情報: 100 万を超えるテンプレートが CapCut のウェブアプリに移行されました。処理パフォーマンスが最大 300% 向上しました。サポートされている動画形式が 40% 増加しました。

ウェブ アプリケーションの機能を最大限に活用する

CapCut チームは、2022 年の初めにプラットフォーム固有のアプリケーションをウェブに移植し始めました。その年の 8 月に、CapCut はパソコン向けの最初のウェブベースのバージョンを正式にリリースしました。プログレッシブ ウェブアプリ(PWA)テクノロジーを使用して、CapCut でブラウザ経由のインストールが可能になりました。これらのテクノロジーを使用して新しいウェブアプリをリリースした後、CapCut チームはSEO トラフィックが 83% 増加しました。

CapCut アプリのインストール。

CapCut をウェブに移行したことで、デベロッパーは強力な Google 機能をアプリケーションと組み合わせて、ユーザー エクスペリエンスを最大限に活用できるようになりました。リリースから 1 か月以内に、多くのユーザーが Google One Tap サインイン機能を使用してログインできるようになりました。これにより、情報を手動で入力する代わりに既存の Google 認証情報を使用してログインできるため、ログイン プロセスが効率化されました。

ウェブで可能性を広げる

CapCut をウェブで利用できるようにすることで、何百万人ものユーザーがソフトウェアにアクセスできるようになりました。WebAssembly、WebCodecs、その他の最新のウェブ技術を使用して高度なウェブアプリを構築できるため、CapCut のデベロッパーは、アプリのすべての機能とパフォーマンスを維持した 1 対 1 のポートを正常に実装できました。

その他の情報

WebAssemblyWebCodecs を使用してアプリケーションをウェブに移行する方法を確認する。

CapCut 動画エディタ。