OpenVid 瀏覽器免安裝產品 Demo 錄影與 3D 鏡頭後製工具教學
想要為你的產品錄製精美的演示影片？OpenVid 讓你直接在瀏覽器中套用 3D 鏡頭、縮放與精美背景，一鍵導出高質感的 Demo 影片。
為什麼選擇 OpenVid？
在產品推廣或文章撰寫時，錄影畫面通常比較單調。雖然市面上有一些付費軟體可以製作精美的 Mockup 影片，但這些工具通常有著不低的訂閱費用，或是需要下載特定的應用程式。
OpenVid 是一個開源的產品演示影片製作工具。它最引人的地方在於，它完全在瀏覽器端運行，不需安裝任何軟體。你只需錄製螢幕或上傳現有影片，就能在幾秒鐘內為其套用 3D 透視旋轉、時間軸平滑縮放、精美裝置外框（Mockup）以及各種現代感十足的背景，最後匯出成高品質的 Demo。
編輯器介面與成果展示
編輯器介面
下面是 OpenVid 的網頁端編輯器介面，左側是強大的功能調整面板，包含 3D 變換、時間軸縮放與圖層管理，右側則是即時預覽畫面：
OpenVid 網頁端編輯器介面與功能展示
錄製成果展示
以下是使用 OpenVid 實際錄製並導出的 Demo 影片。你可以看到其自動跟隨、縮放以及背景陰影的流暢表現：
OpenVid 錄製成果實際展示
線上使用與本地部署
線上免安裝使用
如果你只是需要快速製作影片，可以直接使用官方提供的線上編輯器：
本地安裝與部署
OpenVid 基於 Next.js、TypeScript 與 Supabase 開發，並利用 WebAssembly 技術（FFmpeg.wasm）在瀏覽器本地處理影片。如果你想在本地執行或進行二次開發，可以按照以下步驟安裝：
1. 複製專案倉庫
git clone https://github.com/CristianOlivera1/openvid.git
cd openvid
2. 安裝套件依賴
你可以使用 pnpm 進行安裝：
pnpm install
3. 設定環境變數
複製環境變數範本檔案，並根據需要填入你的 Supabase 憑證以啟用雲端備份與身份驗證：
cp .env.example .env
4. 啟動本機開發伺服器
pnpm dev
啟動後，在瀏覽器打開 http://localhost:3000 即可開始在本機使用。
核心功能說明
OpenVid 提供了許多功能，讓你可以自由設計你的 Demo 影片：
| 功能分類 | 支援項目 | 技術細節與特點 |
|---|---|---|
| 影片輸入 | 螢幕錄影或本地影片上傳 | 支援 MP4, WebM, MOV, MKV 格式拖放上傳 |
| 裝置外框 | 瀏覽器與行動裝置 Mockup | Safari, Chrome, Arc, Samsung 等專業外框 |
| 3D 相機 | 3D 空間透視變換 | 支援 X/Y 軸旋轉、傾斜及視角調整 |
| 動態縮放 | 時間軸關鍵影格 (Zoom) | 可在時間軸任意點加入平滑放大與縮小鏡頭 |
| 視覺背景 | 100+ 內建背景與特效 | 支援單色、漸層、自訂圖片、Unsplash 及背景模糊 |
| 畫布疊加 | 多圖層元素編輯 | 支援加入文字、形狀、SVG、圖片並控制圖層順序 |
| 輸出格式 | 高畫質多格式匯出 | 支援 4K/2K/1080p 輸出為 MP4、WebM 或 GIF |
個人心得
在使用過許多錄影與 Demo 後製軟體後，我認為 OpenVid 的體驗非常驚艷。
它最棒的一點在於隱私與安全性。因為它結合了 Canvas API 與 FFmpeg.wasm，所有的影片錄製、編輯、3D 渲染和最終導出都是在你的瀏覽器本地完成，影片數據不會被上傳到任何第三方伺服器。這對於需要展示內部系統或敏感資料的開發者來說非常安心。
不過也因為如此，在匯出 4K 等高解析度影片時，FFmpeg.wasm 對電腦記憶體與 CPU 的消耗會比較大。建議製作 Demo 時影片長度控制在 10 到 30 秒之間，這樣不僅匯出速度快，也能保證最佳的傳播效果。
小建議：如果你的影片不需要透明背景，匯出時選擇 MP4 格式的相容性是最好的。如果需要透明背景，則可以使用 WebM 格式。
相關連結：
本文實作與安裝基於 OpenVid 開源版本，所有處理皆在瀏覽器本地完成。