告别命令行！我用 Electron + React 开发了一款 FFmpeg 可视化工具告别命令行！我用 Electro

视频处理不应该这么复杂。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: github.com/igo9go/ffmp…

如果这个项目对你有帮助，欢迎：

⭐ 给项目 Star
🐛 提交 Issue 反馈问题
🔧 提交 PR 贡献代码
📢 分享给需要的朋友

让视频处理变得简单，从 FFmpeg Studio 开始！

技术栈：Electron + React + TypeScript + Tailwind CSS

开源协议：MIT

告别命令行！我用 Electron + React 开发了一款 FFmpeg 可视化工具

前言