--- title: "Studio - 基於 WebCodecs 的網頁影片編輯器" url: https://geminixiang.com/posts/studio/ description: "深入探討 Studio 專案的技術架構：WebCodecs、OPFS 儲存策略，以及未來 AI Agent 整合的規劃。" published: 2025-12-21 category: "技術分享" tags: ["WebCodecs", "Vue3", "OPFS", "影片編輯", "AI Agent", "前端開發"] --- # Studio - 基於 WebCodecs 的網頁影片編輯器 # Studio - 純前端的 Web 影片編輯器 > 線上體驗：https://studio.geminixiang.com ## 開發契機 一直想做一個可以在瀏覽器中直接使用的影片編輯工具。傳統的影片處理往往需要依賴伺服器或安裝客戶端軟體，不僅麻煩，也受限於環境。 2024 年接觸到 [WebCodecs API](https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_API) 後，發現瀏覽器已經具備了足夠的能力來處理影片編碼/解碼。搭配 [WebAV](https://github.com/hughfenghen/WebAV) 這個強大的庫，決定開始 Studio 這個專案。 ## 技術架構 ### WebCodecs - 瀏覽器原生影片處理 Studio 的核心是基於 **WebCodecs API**，這是一組瀏覽器原生 API，可以直接操作影片和音訊的編碼/解碼單元： ```typescript // 使用 @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？** 1. **效能**：直接在瀏覽器中解碼影片，不需要伺服器處理 2. **隱私**：影片資料完全在客戶端處理，不會上傳到伺服器 3. **即時性**：可以實現真正的即時預覽，不用等待處理完成 目前 Studio 使用了 `@webav/av-cliper` 作為主要的核心庫，它封裝了 WebCodecs 的複雜操作，提供類似傳統影片編輯器的 API 體驗。 ### OPFS - 客戶端大容量儲存 處理影片檔案最大的挑戰是**儲存**。傳統的 localStorage 只有 5MB 左右，根本不夠用。這時 [OPFS (Origin Private File System)](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system) 就派上用場了： ```typescript // 使用 opfs-tools 操作 OPFS import { 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。 ### 學到的事情 1. **WebCodecs 很強但還在發展中**：目前只有 Chromium 瀏覽器有完整支援，Firefox 和 Safari 還在逐步實現中 2. **影片處理需要耐心**：debug 一個影片解碼問題可能需要好幾天 3. **客戶端儲存的極限**：OPFS 很棒，但清理機制需要自己設計 ## 未來規劃：AI Agent 整合 Studio 的下一個重點是 **[AI Agent](https://en.wikipedia.org/wiki/AI_agent)** 的整合。 ### 什麼是 AI 影片代理？ 想像一下，你告訴 AI： > 「帮我把这段影片中第 10 秒到第 20 秒的部分加上模糊效果，然後配上背景音乐」 AI Agent 就能自動理解指令，幫你完成這些操作。這就是 **Storyboard** 功能的目標： ![Storyboard - AI 影片代理](@assets/images/posts/storyboard-ai.png) ### 實現規劃 ``` User Input → AI Understanding → Task Planning → Tool Selection → Execution → Feedback │ │ │ │ │ ▼ ▼ ▼ ▼ ▼ 自然語言 LLM 理解意圖 拆分任務步驟 調用 WebCodecs 結果展示 │ ┌────────┴────────┐ │ │ Timeline API VideoDecoder API ``` ### 具體功能預期 1. **自動剪輯**：根據場景自動分割影片 2. **智慧配樂**：根據影片內容推薦背景音樂 3. **文字生成語音**：輸入文案自動轉換為配音 4. **特效建議**：根據影片風格推薦轉場特效 5. **批次處理**：一次處理多個檔案 ### 技術挑戰 - **延遲控制**：AI 推理需要時間，如何提供即時反饋？ - **多模態理解**：影片、音訊、文字混合的複雜情境 - **錯誤處理**：AI 生成的結果可能不符合預期，如何讓使用者方便修改 ## 總結 Studio 是一個充滿可能性的專案。從最早的簡單裁切工具，到現在支援多軌道編輯的影片編輯器，每一步都是學習與突破。 WebCodecs 讓瀏覽器有能力處理過去只能在客戶端軟體中完成的任務，而 OPFS 則解決了儲存的問題。結合 AI Agent 的願景，未來的影片創作將會更加親民和智慧。 如果你對這個專案有興趣，歡迎 [GitHub](https://github.com/geminixiang/studio) 上給我個 ⭐，或是直接貢獻程式碼！ --- > [!NOTE] > 目前 Studio 仍在積極開發中，部分功能可能不穩定。建議使用 Chrome 瀏覽器以獲得最佳體驗。 ## 相關連結 - [WebAV - 瀏覽器端的影音處理庫](https://github.com/hughfenghen/WebAV) - [WebCodecs API 文件](https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_API) - [OPFS 文件](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system) - [線上體驗](https://studio.geminixiang.com) --- ## About the author **Ying Xiang Zhao** (geminixiang) — DevOps Engineer, Taipei, Taiwan. Ying Xiang Zhao（geminixiang）是住在台北的 DevOps 工程師，工作橫跨雲原生基礎設施、CI/CD、ML 模型部署與全端開發。這個部落格記錄 infra、資安與 AI coding agent 的實戰筆記；作品包含開源專案 mikan（把 AI coding agent 帶進 Slack / Telegram / Discord）與 tiny-agent（用四種語言實作的極簡 coding agent），瀏覽器內的影片編輯器 Studio，並經營旅遊分帳工具 SentriPay。 **Open to work** — DevOps Engineer / Platform Engineer / Site Reliability Engineer / AI Infrastructure Engineer · Taipei, Taiwan / Remote. Résumé: https://geminixiang.com/about/ (JSON: https://geminixiang.com/resume.json) Topics: DevOps, Cloud Native, Kubernetes, Docker, Terraform, Google Cloud, CI/CD, Security, AI coding agents, ML model deployment, TypeScript, Python Projects: - [mikan](https://github.com/geminixiang/mikan) — Self-hosted AI coding agent for Slack, Telegram, Discord and GitHub with per-conversation sandboxes - [tiny-agent](https://github.com/geminixiang/tiny-agent) — Minimal AI coding agents in TypeScript, Go, Python and Rust, plus a book on how they work - [SentriPay](https://sentripay.com) — Travel expense splitter with multi-currency conversion and shareable, live-synced trip ledgers - [Studio](https://studio.geminixiang.com) — Browser-based video editor built on WebCodecs [About](https://geminixiang.com/about/) · [Résumé](https://geminixiang.com/about/) · [LinkedIn](https://linkedin.com/in/geminixiang/) · [GitHub](https://github.com/geminixiang) · [Twitter](https://x.com/geminixiang)