FFmpeg WebCLI: 透過 WebAssembly 進行瀏覽器端影片編輯

FFmpeg WebCLI 是一款基於瀏覽器的影片編輯器，利用 ffmpeg.wasm 在使用者的裝置上本地執行所有媒體處理。透過使用 WebAssembly (WASM)，該工具提供了一套完整的影片與音訊處理工具，且無需將檔案上傳至伺服器，確保了完全的數據隱私與離線功能。

本地處理與隱私

FFmpeg WebCLI 完全在客戶端運行，這意味著影片或音訊數據永遠不會傳輸到遠端伺服器。應用程式在首次載入時會下載約 31 MB 的 ffmpeg-core WASM 二進位檔，隨後會進行快取以供後續使用。所有的檔案 I/O 都在瀏覽器的虛擬檔案系統中進行，處理過程由 Web Workers 處理，以確保在進行繁重的編碼任務時，使用者介面仍能保持響應能力。

核心影片與音訊功能

該工具提供超過 30 種預定義的操作，範圍從簡單的格式轉換到複雜的濾鏡鏈。

影片處理

  • 格式轉換： 支援重新編碼為 MP4 (H.264/AAC), WebM (VP9/Opus), MKV, MOV, 和 AVI。
  • 壓縮： 包含 CRF (Constant Rate Factor) 滑桿 (18 到 51) 以及編碼預設值 (ultrafast 到 veryslow) 以平衡檔案大小與品質。
  • 視覺效果： 提供旋轉、翻轉、裁剪、反轉以及添加淡入/淡出效果的工具。
  • 色彩調整： 提供亮度、對比度與飽和度的滑桿，包括一鍵切換灰階模式。
  • 進階佈局： 支援並排（水平/垂直）佈局、畫中畫疊加，以及針對特定長寬比（例如 TikTok 的 9:16 或電影感的 21:9）的自定義填充/信箱模式 (letterboxing)。
  • GIF 製作： 使用兩次掃描的調色盤生成過程，以確保在動畫 GIF 中實現高品質的色彩還原。

音訊處理

  • 提取與轉換： 將音軌提取為 MP3, AAC, WAV, OGG, 或 FLAC 格式。
  • 混音與標準化： 允許透過 amix 濾鏡將背景音樂與原始音訊混合，並使用 loudnorm 濾鏡將感知響度標準化至廣播標準（例如 YouTube/Spotify 的 -14 LUFS）。
  • 音量控制： 提供倍數滑桿 (0 到 4x) 以調整音量，同時透過 stream-copying 影片來避免品質損失。

工具程式

  • 元數據移除： 使用 -map_metadata -1 移除所有嵌入的元數據（GPS、時間戳記）以提高隱私性。
  • 字幕嵌入： 將 .srt, .vtt, 或 .ass 檔案作為軟字幕軌道在 MP4 或 MKV 容器中進行封裝 (Mux)。
  • 縮圖提取： 在特定時間點擷取單一影格作為 JPEG 或 PNG。

進階使用者控制：Raw FFmpeg 存取

對於進階使用者，FFmpeg WebCLI 包含一個 Raw FFmpeg 面板。此介面允許使用者輸入自定義參數，這些參數會插入在 -i input 與輸出檔名之間。

  • 指令預覽： 即時預覽正在執行的確切指令。
  • 範例庫： 內建的範例庫提供進階任務的配方，例如降噪 (hqdn3d), 銳化 (unsharp), 動態穩定 (deshake), 以及無損重新封裝 (-c copy)。
  • 次要輸入： 使用者可以上傳第二個檔案（引用為 input2.<ext>）來執行如替換音軌等操作。

透過 PWA 實現離線功能

FFmpeg WebCLI 是以漸進式 Web 應用程式 (PWA) 的形式實現，使其能夠像原生應用程式一樣安裝在桌機與行動裝置上。

  • 離線存取： 一旦 WASM 二進位檔與靜態資源被 Service Worker 快取後，該應用程式可以在完全沒有網路連接的情況下運作。
  • 螢幕喚醒鎖定 (Screen Wake Lock)： 為了防止行動裝置或桌機在進行長時間編碼時進入睡眠模式，應用程式使用了 Screen Wake Lock API 來保持顯示器處於啟動狀態。
  • 相容性： PWA 與桌機、Android 與 iOS 上的 Chrome, Edge, Firefox, 和 Safari 均具備相容性。

技術實作與需求

若要本地運行此專案，必須配置伺服器以啟用特定的安全標頭 (Security Headers)，以支援 ffmpeg.wasm 所需的 SharedArrayBuffer。這些標頭為：

  • Cross-Origin-Opener-Policy: same-origin
  • Cross-Origin-Embedder-Policy: require-corp

社群社群見解與討論

雖然該工具因其易用性而受到讚譽，但部分社群成員就效能與優化提出了技術問題：

"How does performance compare to the native app? Is any form of hardware decoding/encoding like h264_nvenc available?"

目前，該工具依賴於基於 CPU 的 FFmpeg WASM 實作，這意味著它無法使用如 NVENC 等硬體加速編碼器。此外，部分使用者指出，UI 介面術語（例如 "Click to upload"）可能會產生誤導，因為實際上並沒有進行任何伺服器端的上傳動作。 ",

Sources