Studio - 純前端的 Web 影片編輯器
開發契機
一直想做一個可以在瀏覽器中直接使用的影片編輯工具。傳統的影片處理往往需要依賴伺服器或安裝客戶端軟體，不僅麻煩，也受限於環境。
2024 年接觸到 WebCodecs API 後，發現瀏覽器已經具備了足夠的能力來處理影片編碼/解碼。搭配 WebAV 這個強大的庫，決定開始 Studio 這個專案。
技術架構
WebCodecs - 瀏覽器原生影片處理
Studio 的核心是基於 WebCodecs API，這是一組瀏覽器原生 API，可以直接操作影片和音訊的編碼/解碼單元：
// 使用 @webav/av-cliper 處理影片import { MP4Clip, AudioClip } from "@webav/av-cliper";
const videoClip = new MP4Clip(stream);await videoClip.ready;
// 取得影片縮圖const thumbnails = await videoClip.thumbnails(50, { step: 1e6 });為什麼選擇 WebCodecs？
- 效能：直接在瀏覽器中解碼影片，不需要伺服器處理
- 隱私：影片資料完全在客戶端處理，不會上傳到伺服器
- 即時性：可以實現真正的即時預覽，不用等待處理完成
目前 Studio 使用了 @webav/av-cliper 作為主要的核心庫，它封裝了 WebCodecs 的複雜操作，提供類似傳統影片編輯器的 API 體驗。
OPFS - 客戶端大容量儲存
處理影片檔案最大的挑戰是儲存。傳統的 localStorage 只有 5MB 左右，根本不夠用。這時 OPFS (Origin Private File System) 就派上用場了：
// 使用 opfs-tools 操作 OPFSimport { file, write } from "opfs-tools";
// 檢查檔案是否存在if (!(await file(id).exists())) { await write(id, stream);}
// 從 OPFS 讀取資料流stream = await file(id).stream();OPFS 的優勢：
- 儲存容量遠大於 localStorage（取決於硬碟剩餘空間）
- 可以儲存大型二進制檔案（影片、音訊、圖片）
- 客戶端永久儲存，關閉瀏覽器也不會丟失
- 支援串流操作，不需要把整個檔案載入記憶體
Studio 利用 OPFS 來儲存專案中的所有媒體資源，讓使用者可以處理較長的影片而不會遇到儲存瓶頸。
架構設計
┌─────────────────────────────────────────────────────────┐│ UI Layer (Vue3) │├─────────────┬─────────────┬─────────────┬──────────────┤│ Timeline │ Storyboard │ Preview │ MediaPanel │└─────────────┴─────────────┴─────────────┴──────────────┘ │┌─────────────────────────────────────────────────────────┐│ Business Logic │├─────────────┬─────────────┬─────────────┬──────────────┤│ VideoTrack │ AudioTrack │ TextTrack │ ImageTrack │└─────────────┴─────────────┴─────────────┴──────────────┘ │┌─────────────────────────────────────────────────────────┐│ Codec Layer │├─────────────┬─────────────┬─────────────┬──────────────┤│VideoDecoder │AudioDecoder │ImageDecoder │ │└─────────────┴─────────────┴─────────────┴──────────────┘ │┌─────────────────────────────────────────────────────────┐│ Storage Layer ││ OPFS (Origin Private File System) │└─────────────────────────────────────────────────────────┘前端技術選型
- Vue 3 + Composition API - 響應式開發體驗
- TypeScript - 型別安全
- Pinia - 狀態管理
- TailwindCSS - 樣式系統
- vue-i18n - 多語言支援
- Vite - 快速開發與建置
整個專案採用模組化設計，各個 Codec Decoder 獨立運作，通過統一的介面與上層溝通。這樣的好處是如果要替換底層技術（比如未來 WebCodecs 有更強的替代方案），只需要修改 Decoder 層即可。
開發心路
從 0 到 1
一開始只是想做一個簡單的影片裁切工具。沒想到實際做起來才發現影片編輯的複雜度遠超預期：
- 影片、音訊、圖片、文字的時間軸同步
- 多軌道的渲染邏輯
- 播放頭的精確定位
- 資源的載入與快取
這些問題一個一個解決，逐漸有了現在的雛形。
最具挑戰的部分
Timeline 的渲染效能：當軌道上有幾十個 clip 時，如何保持流暢的拖曳和滾動體驗？
最後採用了 virtual scrolling + canvas 預渲染的方案，解決了效能問題。
OPFS 的跨瀏覽器相容性：並非所有瀏覽器都支援 OPFS。Studio 做了降級處理，在不支援的瀏覽器中使用 IndexedDB 或 localStorage。
學到的事情
- WebCodecs 很強但還在發展中：目前只有 Chromium 瀏覽器有完整支援，Firefox 和 Safari 還在逐步實現中
- 影片處理需要耐心：debug 一個影片解碼問題可能需要好幾天
- 客戶端儲存的極限：OPFS 很棒，但清理機制需要自己設計
未來規劃：AI Agent 整合
Studio 的下一個重點是 AI Agent 的整合。
什麼是 AI 影片代理？
想像一下，你告訴 AI：
「帮我把这段影片中第 10 秒到第 20 秒的部分加上模糊效果，然後配上背景音乐」
AI Agent 就能自動理解指令，幫你完成這些操作。這就是 Storyboard 功能的目標：
實現規劃
User Input → AI Understanding → Task Planning → Tool Selection → Execution → Feedback │ │ │ │ │ ▼ ▼ ▼ ▼ ▼ 自然語言 LLM 理解意圖 拆分任務步驟 調用 WebCodecs 結果展示 │ ┌────────┴────────┐ │ │ Timeline API VideoDecoder API具體功能預期
- 自動剪輯：根據場景自動分割影片
- 智慧配樂：根據影片內容推薦背景音樂
- 文字生成語音：輸入文案自動轉換為配音
- 特效建議：根據影片風格推薦轉場特效
- 批次處理：一次處理多個檔案
技術挑戰
- 延遲控制：AI 推理需要時間，如何提供即時反饋？
- 多模態理解：影片、音訊、文字混合的複雜情境
- 錯誤處理：AI 生成的結果可能不符合預期，如何讓使用者方便修改
總結
Studio 是一個充滿可能性的專案。從最早的簡單裁切工具，到現在支援多軌道編輯的影片編輯器，每一步都是學習與突破。
WebCodecs 讓瀏覽器有能力處理過去只能在客戶端軟體中完成的任務，而 OPFS 則解決了儲存的問題。結合 AI Agent 的願景，未來的影片創作將會更加親民和智慧。
如果你對這個專案有興趣，歡迎 GitHub 上給我個 ⭐，或是直接貢獻程式碼！
NOTE目前 Studio 仍在積極開發中，部分功能可能不穩定。建議使用 Chrome 瀏覽器以獲得最佳體驗。