告別命令行！我用 Electron + React 開發了一款 FFmpeg 可視化工具
視頻處理不應該這麼複雜。FFmpeg Studio 讓每個人都能輕鬆處理視頻和音頻。
前言
作為開發者，我們經常需要處理視頻和音頻文件：轉換格式、裁剪片段、提取音頻、添加水印……
雖然 FFmpeg 是最強大的多媒體處理工具，但它的命令行參數讓很多人望而卻步：
ffmpeg -i input.mp4 -ss 00:01:00 -t 00:00:30 -c:v libx264 -c:a aac -strict experimental output.mp4能不能有一個簡單直觀的界面，讓 FFmpeg 變得人人可用？
於是，我開發了 FFmpeg Studio —— 一款現代化的跨平台桌面視頻處理工具。
項目介紹
FFmpeg Studio 是一個基於 Electron + React + TypeScript 的桌面應用，為 FFmpeg 提供了一個簡潔美觀的可視化界面。
核心特性
| 功能 | 描述 |
|---|---|
| 🎬 格式轉換 | 支持 MP4、MKV、AVI、MOV、WebM 等主流格式互轉 |
| ✂️ 視頻剪輯 | 可視化時間軸裁剪、畫面裁剪、自動分段、多視頻合併 |
| 🎵 音頻提取 | 從視頻中提取音頻，支持 MP3、AAC、WAV、FLAC 等格式 |
| 💧 水印添加 | 支持文字/圖片水印，自定義位置、大小、透明度 |
| 📝 字幕處理 | 嵌入或燒錄字幕，支持樣式自定義 |
| 📡 流媒體下載 | 下載 M3U8/HLS 流媒體視頻 |
| 🖼️ 工具箱 | 視頻截圖、批量幀提取、GIF 動圖製作 |
| 🌍 多語言 | 支持中文和英文界面切換 |
亮點功能
1. 可視化時間軸編輯
告別手動計算時間戳！拖動時間軸即可精確選擇裁剪範圍，支持關鍵幀吸附，確保無損剪輯。
2. 實時進度反饋
所有任務都有實時進度條和狀態顯示，支持多任務隊列管理和一鍵取消。
3. 智能預設
針對不同場景提供智能預設：
- 高質量：適合存檔和專業用途
- 平衡：質量與體積的最佳平衡
- 小體積：適合網絡分享和移動設備
4. 拖拽操作
支持拖拽文件到窗口直接處理，也支持拖拽調整視頻合併順序。
技術架構
作為一個技術項目，FFmpeg Studio 採用了現代化的技術棧：
┌─────────────────────────────────────────────┐
│ Electron │
│ ┌─────────────────────────────────────┐ │
│ │ React Frontend │ │
│ │ ┌─────────┐ ┌─────────┐ ┌───────┐ │ │
│ │ │ Pages │ │ Stores │ │ Hooks │ │ │
│ │ └─────────┘ └─────────┘ └───────┘ │ │
│ │ Tailwind CSS + Lucide │ │
│ └─────────────────────────────────────┘ │
│ ↕ IPC │
│ ┌─────────────────────────────────────┐ │
│ │ Main Process │ │
│ │ ┌─────────────────────────────┐ │ │
│ │ │ FFmpeg Wrapper │ │ │
│ │ │ (fluent-ffmpeg + static) │ │ │
│ │ └─────────────────────────────┘ │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
技術棧
- 前端框架: React 18 + TypeScript
- 桌面框架: Electron 28
- 樣式方案: Tailwind CSS
- 狀態管理: Zustand（輕量級，無 Redux 的繁瑣）
- 構建工具: Vite（開發體驗極佳）
- 媒體處理: fluent-ffmpeg + ffmpeg-static
為什麼選擇這套技術棧？
- TypeScript: 類型安全，減少運行時錯誤，提升開發效率
- Zustand: 相比 Redux 更簡潔，學習成本低，性能優秀
- Tailwind CSS: 原子化 CSS，快速構建美觀界面
- Vite: 極速的開發服務器和熱更新
- ffmpeg-static: 內置 FFmpeg 二進制文件，用户無需額外安裝
項目結構
ffmpeg-studio/
├── electron/ # Electron 主進程
│ ├── main.ts # 窗口管理、IPC 處理
│ ├── preload.ts # 安全的 API 暴露
│ └── ffmpeg/ # FFmpeg 操作封裝
├── src/ # React 前端
│ ├── components/ # 可複用組件
│ ├── pages/ # 頁面組件
│ ├── stores/ # Zustand 狀態
│ ├── hooks/ # 自定義 Hooks
│ └── locales/ # i18n 翻譯
└── ...
快速開始
方式一：下載安裝包
前往 GitHub Releases 下載適合你係統的安裝包：
- macOS:
.dmg - Windows:
.exe - Linux:
.AppImage
方式二：從源碼構建
# 克隆項目
git clone https://github.com/igo9go/ffmpeg-studio.git
cd ffmpeg-studio
# 安裝依賴
npm install
# 開發模式
npm run dev
# 打包
npm run electron:build使用場景
場景 1：視頻格式轉換
收到一個 .mkv 文件但播放器不支持？拖進來，選擇 MP4，一鍵轉換。
場景 2：提取視頻中的音頻
想把視頻裏的背景音樂提取出來？選擇音頻格式，秒級完成。
場景 3：裁剪視頻片段
只需要視頻中的一小段？拖動時間軸選擇範圍，無需記憶複雜的時間參數。
場景 4：批量截圖
需要從視頻中提取多張截圖做封面？設置間隔時間，批量導出。
場景 5：製作 GIF
想把精彩片段做成動圖分享？選擇時間範圍，一鍵生成 GIF。
場景 6：下載直播回放
遇到 M3U8 格式的直播回放？粘貼地址，自動下載合併。
開發心得
1. Electron IPC 通信設計
為了安全和解耦，採用了嚴格的 IPC 通信模式：
// preload.ts - 安全暴露 API
contextBridge.exposeInMainWorld('electronAPI', {
convert: (options) => ipcRenderer.invoke('ffmpeg:convert', options),
onProgress: (callback) => {
const subscription = (_event, data) => callback(data)
ipcRenderer.on('ffmpeg:progress', subscription)
return () => ipcRenderer.removeListener('ffmpeg:progress', subscription)
}
})2. 任務隊列管理
使用 Zustand 實現任務隊列，支持進度追蹤和取消：
// taskStore.ts
const useTaskStore = create((set) => ({
tasks: [],
addTask: (task) => set((state) => ({
tasks: [...state.tasks, task]
})),
updateTask: (id, updates) => set((state) => ({
tasks: state.tasks.map(t => t.id === id ? {...t, ...updates} : t)
}))
}))3. 國際化方案
採用輕量級的自定義 i18n 方案，無需引入額外依賴：
// useTranslation.ts
export function useTranslation() {
const { settings } = useSettingsStore()
return settings.language === 'en' ? en : zh
}未來計劃
- [ ] 🎨 更多視頻濾鏡（調色、模糊、鋭化）
- [ ] 📊 視頻壓縮預估（預測輸出大小）
- [ ] 🔄 批量處理模式
- [ ] 🎵 音頻波形可視化
- [ ] 📱 移動端適配（Capacitor）
- [ ] 🔌 插件系統
寫在最後
FFmpeg Studio 是一個完全開源的項目，代碼託管在 GitHub：
🔗 GitHub: https://github.com/igo9go/ffmpeg-studio
如果這個項目對你有幫助，歡迎：
- ⭐ 給項目 Star
- 🐛 提交 Issue 反饋問題
- 🔧 提交 PR 貢獻代碼
- 📢 分享給需要的朋友
讓視頻處理變得簡單，從 FFmpeg Studio 開始！
技術棧：Electron + React + TypeScript + Tailwind CSS
開源協議：MIT
相關鏈接
- GitHub 倉庫
- 下載地址
- 問題反饋
如果你也在開發 Electron 應用，歡迎在評論區交流！
