OpenCut：开源浏览器端视频编辑器深度解析
Schwarz
مقال
OpenCut：开源浏览器端视频编辑器深度解析
OpenCut：开源浏览器端视频编辑器深度解析
CapCut 的免费开源替代品，你的视频永远不会离开你的设备
项目简介
OpenCut 是一个完全免费、开源的视频编辑器，可以在浏览器中运行。它致力于成为 CapCut 的开源替代方案，核心理念是 隐私优先——所有视频处理都在本地设备上完成，不上传、不订阅、不加水印。
- GitHub： OpenCut-app/OpenCut
- 官网： opencut.dev
- 许可证： MIT
- 赞助商： Vercel、fal.ai
为什么要做 OpenCut？
CapCut 等主流视频编辑器逐渐将基础功能（去水印、转场效果、基础导出）放入付费墙，同时将用户视频上传到服务器处理。OpenCut 的出发点：
- 隐私： 视频始终留在你的设备上
- 免费： 基础功能不收费，不搞订阅制
- 简单： 像CapCut一样易用的编辑体验
技术架构
整体架构
OpenCut 采用 Monorepo 结构，包含 Web 端和桌面端两个应用：
OpenCut/
├── apps/web/ # Next.js 15 Web 应用（主力）
├── apps/desktop/ # GPUI 原生桌面应用（开发中）
├── rust/ # 跨平台核心：GPU 合成器、特效、蒙版、WASM 绑定
├── docs/ # 架构文档
└── packages/ # 共享包
技术栈一览
| 层面 | 技术 |
|---|---|
| 前端框架 | Next.js 15 + React 18 |
| 语言 | TypeScript 5.8 |
| 包管理/运行时 | Bun |
| 状态管理 | Zustand |
| 构建工具 | Turbopack |
| 代码质量 | Ultracite + Biome（Rust-based linter） |
| 视频处理 | FFmpeg.wasm + MediaBunny |
| 本地存储 | IndexedDB + OPFS |
| 桌面端 | Rust GPUI（开发中） |
| 渲染核心 | Rust → WASM（迁移中） |
核心技术深度解析
1. 状态管理：Zustand
OpenCut 使用 Zustand 管理状态，按职责拆分为多个独立 Store：
| Store | 职责 |
|---|---|
| editor-store | 画布预设、布局辅助线 |
| timeline-store | 时间轴轨道、元素、播放控制 |
| media-store | 媒体文件和素材管理 |
| playback-store | 视频回放控制和时间 |
| project-store | 项目级数据和持久化 |
| panel-store | UI 面板可见性和布局 |
| keybindings-store | 键盘快捷键 |
| sounds-store | 音效管理 |
| stickers-store | 贴纸/图形管理 |
| scene-store | 场景管理和切换 |
| text-properties-store | 文字元素属性 |
Zustand 的优势是零模板代码——没有 Redux 的 actions/reducers 复杂性，状态更新直观简洁。
2. 隐私存储架构：双层存储
这是 OpenCut 的核心亮点——所有数据都在浏览器本地：
IndexedDB（结构化数据）
- 项目元数据（名称、创建时间、设置）
- 时间轴配置
- 保存的音效和特效
- 用户偏好和快捷键
OPFS（Origin Private File System，大文件）
- 视频文件
- 音频文件
- 图片和媒体素材
OPFS 是较新的浏览器 API，为大文件提供类文件系统访问，性能远超 IndexedDB。OpenCut 会自动检测浏览器支持情况并优雅降级。
3. 视频处理：浏览器端 FFmpeg
OpenCut 通过 WebAssembly 在浏览器中运行完整的 FFmpeg，实现：
- 视频编码/解码
- 格式转换
- 音频提取
- 帧提取
同时使用 MediaBunny 库处理重型任务：
- 硬件加速视频解码
- 逐帧渲染
- 音频处理
- 高效视频缓存
导出流程：
- 根据格式创建输出（WebM / MP4）
- 设置视频轨道（Canvas → VP9/AVC 编码）
- 处理音频（Opus/AAC 编码）
- 逐帧渲染时间轴
- 全部在浏览器中完成
4. Rust 核心：跨平台渲染引擎
OpenCut 正在将 TypeScript 中的渲染逻辑迁移到 Rust：
- GPU 合成器： 高性能视频合成
- 特效系统： 滤镜、转场
- 蒙版系统： 遮罩和蒙版
- WASM 绑定： 编译为 WebAssembly 在浏览器中使用
这意味着 Web 端和桌面端共享同一套 Rust 渲染核心，确保一致性和高性能。
快速上手
环境要求
- Bun
- Docker + Docker Compose（可选，用于本地数据库和 Redis）
安装步骤
# 1. 克隆仓库
git clone https://github.com/OpenCut-app/OpenCut.git
cd OpenCut
# 2. 配置环境变量
cp apps/web/.env.example apps/web/.env.local
# 3. 启动数据库和 Redis（可选）
docker compose up -d db redis serverless-redis-http
# 4. 安装依赖并启动
bun install
bun dev:web
访问 http://localhost:3000 即可使用。
Docker 自部署
docker compose up -d
访问 http://localhost:3100。
值得学习的设计模式
1. 浏览器端重型应用的架构范式
OpenCut 证明了浏览器可以承载视频编辑这种计算密集型任务。关键技术：
- WASM 运行原生 C 库（FFmpeg）
- OPFS 处理大文件存储
- Canvas 实现实时预览
- Web Worker 避免阻塞 UI
2. Rust + TypeScript 混合架构
将性能关键路径（渲染、合成、特效）用 Rust 实现，通过 WASM 暴露给 TypeScript 前端。这种模式兼顾了开发效率和运行性能。
3. Zustand Store 按职责拆分
每个 Store 职责单一、独立管理，避免了全局状态树的复杂性。适合大型交互式应用。
4. 隐私优先的存储设计
IndexedDB + OPFS 双层存储，根据数据类型选择最优方案。完全本地化，零服务端依赖。
当前状态与路线图
已完成：
- ✅ Web 端基础编辑功能
- ✅ 多轨道时间轴
- ✅ 浏览器端视频导出
- ✅ 本地项目持久化
开发中：
- 🚧 原生桌面应用（GPUI）
- 🚧 Rust 渲染核心迁移
- 🚧 二进制渲染架构重构
暂不建议贡献的区域：
- ⚠️ 预览面板（字体、贴纸、特效）
- ⚠️ 导出功能（正在重构）
总结
OpenCut 是一个值得关注的项目，它不仅是一个视频编辑工具，更是一个 浏览器端重型应用 的架构范例。从 FFmpeg.wasm 到 OPFS，从 Rust/WASM 到 Zustand 状态管理，它展示了现代 Web 技术的极限能力。
对于开发者而言，它提供了以下学习价值：
- 如何在浏览器中运行计算密集型任务
- Rust + TypeScript 的混合架构实践
- 隐私优先的本地存储方案
- 大型交互式应用的状态管理模式