CapCut 是 2023 年 Android 上 10 大下載量最高的應用程式之一，也是行動裝置上最受歡迎的影片編輯應用程式之一。而且完全免費。這款多合一影片編輯工具提供多種特效和編輯功能，例如語音轉文字和圖片升級，以及豐富的媒體庫，可協助使用者快速流暢地製作高品質影片和圖像。CapCut 使用者完成內容創作後，只要按一下滑鼠，就能將內容發布到所選的社群媒體平台，包括 TikTok、YouTube、Instagram 和 Facebook。
CapCut 專注於讓使用者按照自己的方式製作內容，提供優質體驗。CapCut 團隊最近投入資源，為電腦使用者開發進階網頁應用程式，以提升使用者體驗。CapCut 線上版提供友善的使用者介面，為個人和企業使用者提供實用的功能，讓他們更輕鬆地創作內容，並與團隊成員協同合作。這項更新可讓使用者直接透過偏好的瀏覽器存取功能強大的影片編輯軟體，提供更便利且彈性的編輯體驗。
網路應用程式降低入門門檻
CapCut 推出了網頁應用程式，讓使用者有更多方式存取影片編輯平台，並新增了 Android 和 iOS 行動應用程式。提供更多入口點，讓使用者選擇最適合自己的平台，無論是從 Google Play 商店下載行動應用程式、透過喜愛的瀏覽器安裝為網頁應用程式，或是直接在瀏覽器分頁中使用，團隊認為，如果電腦版應用程式也能在瀏覽器中運作，就能提高使用者的留存率，並提升整體滿意度。
多虧開發人員可使用的一系列技術，CapCut 就能輕鬆將特定平台的行動應用程式轉譯及轉移為功能同樣強大的網頁版。過去幾年，WebAssembly 等網頁平台技術在開發人員中廣受歡迎，讓他們能夠以更快的速度製作功能強大的網頁應用程式。由於 CapCut 的編輯引擎大多是用 C++ 編寫，因此開發人員可以使用 Emscripten 將應用程式移植至電腦網頁版。
WebAssembly
有了 WebAssembly，CapCut 開發人員成功將超過一百萬個影片和圖形範本轉移至新的網路應用程式。Emscripten 提供強大的支援，可將 C 和 C++ 程式碼編譯為 WebAssembly，讓 CapCut 能夠在特定平台和網頁應用程式之間有效地共用程式碼，協助將 CapCut 部分最重要的功能移植到新平台，包括自訂影片效果和影片編輯功能。
CapCut 有許多特效會在瀏覽器中執行演算法，這可能會在即時處理期間造成影片轉譯瓶頸。多虧 WebAssemly 的並行處理函式 (稱為單指令多資料，簡稱 SIMD)，CapCut 開發人員將應用程式的處理效能提升了近 300%，相較於非 SIMD 解決方案，更能有效避免發生瓶頸。
例外狀況處理 (EH) 是 C++ 的基本功能之一，但 Emscripten 對 EH 的支援不完整。Emscripten 提供一組以 JavaScript 為基礎的 EH 機制，但這些機制可能會對應用程式的執行階段效能造成負面影響，並增加套件大小。WebAssembly 的 EH 標準可解決這個問題。改用 WebAssembly 進行 EH，可將 CapCut 網頁應用程式的套件大小縮減 15%，同時提升程式碼效能。
WebCodecs
針對影片編輯作業，CapCut 必須解碼使用者輸入至圖片的影片，然後在影片預覽畫面下方的編輯畫布上顯示這些影片。即使使用經過 SIMD 最佳化的解碼器，在高效能電腦上將 4K 圖片解碼至編輯畫布也需要數十毫秒的時間，也就是說，同時解碼多個影片軌需要大量電力。
使用 WebCodecs，CapCut 整合了硬體加速編碼和解碼功能，將音訊和影片處理速度提升近 300%。效能大幅提升後，CapCut 現可支援多個同時的 4K 串流。此外，WebCodecs 也支援更多影片格式，例如 H264、HEVC、VP8、VP9 和 AV1。
充分發揮網頁應用程式的強大威力
CapCut 團隊在 2022 年初開始將特定平台應用程式移植到網路。同年 8 月，CapCut 正式推出第一個桌面版網頁應用程式。透過漸進式網頁應用程式 (PWA) 技術，CapCut 可讓使用者透過瀏覽器安裝。使用這些技術推出新的網路應用程式後，CapCut 團隊發現搜尋引擎最佳化 (SEO) 流量提升了 83%。
將 CapCut 帶到網路上，開發人員就能將強大的 Google 功能與應用程式結合，盡可能提供最佳使用者體驗。在推出後一個月內，許多使用者都已開始使用 Google One Tap 登入功能登入，他們可以使用現有的 Google 憑證登入，而無需手動輸入資訊，讓登入程序更加簡便。
運用網路拓展可能性
將 CapCut 提供在網路上，為數百萬使用者帶來全新可能，讓他們有更多方式存取這款軟體。多虧 WebAssembly、WebCodecs 和其他可用於建構進階網頁應用程式的新式網頁技術，CapCut 開發人員成功實作一對一的端口，可維持應用程式的完整效能。
瞭解詳情
瞭解如何使用 WebAssembly 和 WebCodecs，將應用程式帶入網路。
