CapCut 使用 WebAssembly 和 WebCodecs 打造功能完整的網頁應用程式，讓自然流量增加 83%

Cecilia Cong
Cecilia Cong
Thomas Steiner

是 2023 年前 10 大 Android 應用程式下載， CapCut 是最熱門的影片編輯應用程式之一 行動裝置。更棒的是，這項功能完全免費。這項全方位影片編輯工具 許多特效和編輯功能，例如語音轉文字和圖片縮放 以及已完備的媒體庫，協助使用者製作高品質的內容 輕鬆快速地回答影片和圖片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 開發人員成功轉移超過一位 大量影片和圖片範本新增至新的網頁應用程式。Emscripten 的 強大的 CapCut 可將 C 和 C++ 程式碼編譯至 WebAssembly ，在平台專屬應用程式和網頁應用程式之間有效率地共用程式碼，協助應用程式 一些 CapCut 在新平台中最重要的功能，包括 包括自訂影片特效和影片編輯功能

CapCut 有許多特殊效果，可以在瀏覽器中執行演算法 在即時處理過程中，影片算繪作業會遇到瓶頸。感謝 WebAssemly 的平行處理功能，稱為「單一指令」、「多個」 資料 (SIMD)，CapCut 開發人員 與非 SIMD 相比，應用程式的處理效能提升近 300% 更有效預防瓶頸。

例外狀況處理 (EH) 是 C++ 的基本功能之一，但支援 Emscripten 的 EH 不完整。Emscripten 提供一系列 EH 機制 根據 JavaScript， 但這些做法可能會對應用程式的執行階段效能造成負面影響，並提高應用程式的執行階段效能 套件大小WebAssembly 的 EH 標準可避免這個問題。正在切換至 EH 適用的 WebAssembly 將 CapCut 的網頁應用程式套件大小縮減 15%，同時加入更多程式碼 高效能

WebCodecs

使用影片編輯功能時，CapCut 必須將使用者輸入的影片解碼為圖片 然後顯示在影片預覽畫面下方的編輯畫布中。即使有了 SIMD 最佳化解碼器，可將 4K 圖片解碼到 高效能電腦需要數十毫秒的時間 同時播放多組影片需要耗費大量電力。

使用 WebCodecs, CapCut 整合的硬體加速編碼與解碼功能，改善音訊品質 影片處理速度提升將近 300%大幅提高 CapCut 現在可以支援同時播放多個 4K 影片。此外， WebCodecs 支援更多影片格式，例如 H264、HEVC、VP8、VP9 等。 以及 AV1 格式

CapCut 應用程式相關統計資料：將超過一百萬份範本轉移至 CapCut 網頁應用程式。處理效能提升多達 300%。支援的影片格式增加 40%。

充分運用網頁應用程式

CapCut 團隊開始將平台專屬應用程式移植到網路上， 2022 年初CapCut 在今年 8 月正式上線 網頁版的電腦版網站。使用漸進式網頁應用程式 (PWA) 已啟用 CapCut 透過瀏覽器進行安裝。 推出新版網路後 應用程式採用這些技術後，CapCut 團隊的 SEO 成效提升了 83% 流量。

正在安裝 CapCut 應用程式。

將 CapCut 導入網路後，開發人員也能充分運用 使用者整合了強大的 Google 功能與應用程式，提供絕佳體驗 推出後的一個月內，許多使用者都能透過 登入 Google One Tap 函式，允許使用者使用 不必手動輸入資料。

透過網路拓展無限可能

透過網路提供 CapCut，讓數百萬名 為使用者提供更多使用軟體的方式。多虧 WebAssembly WebCodecs 和其他可用於打造先進網路技術的新型網路技術 網頁應用程式，因此 CapCut 開發人員成功導入一對一通訊埠 及維持應用程式的所有效能與效能

瞭解詳情

瞭解如何使用 WebAssembly 和 WebCodecs。

CapCut 影片編輯器。