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

2023 年に Android で最もダウンロードされたアプリのトップ 10 に入って、 CapCut は、非常に人気の高い動画編集アプリです。 説明します。こちらも完全に無料でご利用いただけます。オールインワンの動画編集ツールでは、 音声入力や画像のアップスケーリングなど、多数のエフェクトや編集機能 充実したメディア ライブラリで、高品質の 動画とグラフィックを高速でスムーズなものにできます。CapCut ユーザーがメッセージの作成を完了すると、 コンテンツを作成したソーシャル メディア プラットフォームに公開するだけです。 TikTok、YouTube、Instagram、Facebook などです。

CapCut は、ユーザーに優れたエクスペリエンスを提供することで、ユーザーに優れたエクスペリエンスを提供することに重点を置いています。 コンテンツを作成できます最近、CapCut チームは、 デスクトップ ユーザー向けの高度なウェブ アプリケーションを開発することで、 向上させることができますCapCut オンラインの UI はユーザー フレンドリーで、 実用的な機能で、個人ユーザーとビジネス ユーザーの両方に コンテンツ作成やチーム間での共同作業を行えます。この更新により、ユーザーは お好みのブラウザからでも直接パワフルな動画編集ソフトを 便利で柔軟な編集が可能です

ウェブアプリは導入のハードルを下げる

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

デベロッパーが利用できる一連のテクノロジーのおかげで、 CapCut は、プラットフォーム固有のモバイルアプリを同等の本番環境に翻訳し、 説明します。WebAssembly のようなウェブ プラットフォーム テクノロジーによって ここ数年間でデベロッパーの間で人気が高まり、 ウェブアプリを高速化しCapCut のほとんどの編集は、 が C++ で記述されている場合、開発者は Emscripten を使用して アプリをデスクトップ ウェブ バージョンに移行する。

CapCut の James Williams 氏は次のように述べています。「WebAssembly と WebCodecs を使用して、ネイティブ コードベースからウェブに多くの重要な機能を効率的に移植しました。
パフォーマンスや機能性に重点を置いています。

WebAssembly

WebAssembly を使用して、CapCut のデベロッパーは複数の 100 万個の動画テンプレートとグラフィック テンプレートを新しいウェブ アプリケーションにデプロイします。Emscripten's C / C++ コードを WebAssembly にコンパイルするための強力なサポートにより、 プラットフォーム固有のアプリとウェブアプリの間でコードを効率的に共有し、 CapCut の特に重要な機能の一部を新しいプラットフォームに導入しました。たとえば、 カスタマイズすることができます。

CapCut には、ブラウザでアルゴリズムを実行する多くの特殊効果があり、 動画レンダリングのボトルネックになりますありがとう WebAssemly の並列処理機能(単一命令、複数命令) Data(SIMD)、CapCut デベロッパー アプリの処理パフォーマンスを SIMD 以外と比較して約 300% 向上 ボトルネックの発生を より効果的に防止できます

例外処理(EH)は C++ の基本的な機能の一つですが、例外処理 Emscripten の EH は不完全でした。Emscripten は一連の EH メカニズムを これらはアプリのランタイムパフォーマンスに 悪影響を与え 指定します。WebAssembly の EH 標準では、この問題を回避できます。移行中: EH 用 WebAssembly CapCut のウェブアプリのパッケージ サイズを 15% 削減し、コードを 実現します。

WebCodecs

動画編集の場合、CapCut はユーザーが入力した動画を画像にデコードする必要がある 動画プレビューの下の編集キャンバスに表示しますたとえ SIMD 最適化デコーダ、4K 画像を編集キャンバスにデコードする 高パフォーマンスのコンピュータでは数十ミリ秒かかるため、 大量の電力を消費します。

使用 WebCodecs, CapCut は、ハードウェア アクセラレーションによるエンコードとデコードを統合し、音声を改善 動画処理速度が約 300%向上しました大幅に改善された 処理できるため、CapCut は複数の 4K ストリーミングを同時にサポートできるようになりました。また WebCodec では、H264、HEVC、VP8、VP9、 AV1.

CapCut アプリに関する統計情報: 100 万以上のテンプレートが CapCut のウェブアプリに転送されました。処理パフォーマンスが最大 300% 向上。サポートされる動画フォーマットが 40% 増加。

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

CapCut のチームは、 開始しました。同年 8 月、CapCut は初の試みとして ウェブベースのバージョンですプログレッシブ ウェブアプリ(PWA)の使用 CapCut を活用して、 ブラウザからインストールできます。 新しいウェブの立ち上げ後 これらのテクノロジーを使用したアプリのおかげで、CapCut チームは、SEO が 83% 向上しました。 トラフィックです。

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

また CapCut をウェブに導入したことで、デベロッパーは ユーザーGoogle の優れた機能とアプリケーションを組み合わせて、より快適にご利用いただけます。 リリースから 1 か月以内に、多くのユーザーが Google One Tap サインイン ログイン プロセスが簡素化され、ログイン プロセスが 認証情報を手動で入力する必要はありません。

ウェブで可能性を広げる

CapCut をウェブで利用可能にしたことで、何百万人もの人々に新たな可能性を創出 ソフトウェアにアクセスできる手段が増えます。WebAssembly のおかげで WebCodecs などの最新のウェブ テクノロジーを取り入れて、高度な ウェブアプリ用に、CapCut のデベロッパーは 1 対 1 のポートを実装して、 アプリの機能とパフォーマンスが維持されました。

その他の情報

アプリケーションをウェブに移行する方法 WebAssemblyWebCodecs

CapCut 動画エディタ。