Augani/openreel-video

来源：https://github.com/Augani/openreel-video

OpenReel Video

开源的 CapCut 替代品。在浏览器中完成专业视频编辑。无需上传、无需安装、100% 开源。

OpenReel Video 是一款功能完善的浏览器端视频编辑器，完全在客户端运行。基于 React、TypeScript、WebCodecs 和 WebGPU 构建，提供专业级视频编辑体验，无需昂贵软件或云端处理。

立即使用 (https://openreel.video) | 文档 | 讨论区 (https://github.com/Augani/openreel-video/discussions) | Twitter (https://x.com/python_xi)

OpenReel 编辑器 许可证状态 开源

为什么选择 OpenReel？

• 100% 客户端处理 - 你的视频永远不会离开你的设备。无需上传，无需云端处理，完全保护隐私。
• 无需安装 - 在 Chrome/Edge 中即可使用。打开浏览器即可开始编辑。
• 专业功能 - 多轨道时间线、关键帧动画、色彩分级、音频特效等。
• GPU 加速 - 依托 WebGPU 和 WebCodecs，流畅编辑 4K 视频并快速导出。
• 永久免费 - MIT 许可证，无订阅、无水印。

功能特性

视频编辑

• 多轨道时间线 - 无限数量的视频、音频、图片、文字和图形轨道
• 实时预览 - GPU 加速的流畅播放
• 精确编辑 - 帧级精确的拖拽、剪切、修整、分割、波纹删除
• 转场效果 - 淡入淡出、淡黑/白、擦除、滑动等效果
• 视频特效 - 亮度、对比度、饱和度、模糊、锐化、发光、暗角、色度抠像
• 混合模式 - 正片叠底、滤色、叠加、相加、减去等
• 速度控制 - 0.25倍 至 4倍，保持音频音调
• 裁剪与变换 - 位置、缩放、旋转以及 3D 透视

图形与文字

• 专业文字编辑器 - 丰富的样式、阴影、描边、渐变
• 20+ 种文字动画 - 打字机效果、淡入、滑动、弹跳、弹出、弹性、故障效果
• 卡拉 OK 式字幕 - 逐词高亮并与音频同步
• 形状工具 - 矩形、圆形、箭头、多边形、星形，支持填充/描边
• SVG 支持 - 导入 SVG 并支持颜色染色和动画
• 贴纸和表情符号 - 内置素材库
• 背景生成器 - 纯色、渐变、网格渐变、图案
• 关键帧动画 - 对任意属性添加时间轴动画，支持 20+ 种缓动曲线

音频

• 多轨道混音 - 无限音频轨道，实时混音
• 波形可视化 - 可视化音频编辑
• 音频特效 - 均衡器、压缩器、混响、延迟、合唱、镶边、失真
• 音量与声像 - 每个剪辑独立控制，支持淡入/淡出
• 节拍检测 - 自动生成与音乐同步的标记
• 音频闪避 - 对白播放时自动降低背景音乐音量
• 降噪 - 三段式降噪（音调、宽带、隆隆声）

色彩分级

• 色彩轮 - 暗部、中间调、亮部控制
• HSL 调整 - 精细调整色相、饱和度、明度
• 曲线编辑器 - RGB 及单独通道曲线
• LUT 支持 - 导入并应用 3D LUT
• 内置预设 - 一键色彩分级

导出

• MP4 (H.264/H.265) - 通用兼容格式
• WebM (VP8/VP9/AV1) - 网络优化格式
• ProRes - 专业中间格式（代理、LT、标准、HQ、4444）
• 质量预设 - 4K @ 60fps、1080p、720p、480p
• 自定义设置 - 比特率、帧率、编码器选项、色彩深度
• 硬件编码 - 利用 WebCodecs 快速导出
• AI 超分辨率 - 使用 WebGPU 着色器提升分辨率
• 音频导出 - MP3、WAV、AAC、FLAC、OGG
• 图像序列 - 导出 JPG、PNG、WebP 帧
• 进度追踪 - 实时进度显示，支持取消

专业工具

• 无限撤销/重做 - 完整历史记录，支持恢复
• 自动保存 - 永不丢失工作（使用 IndexedDB 存储）
• 快捷键 - 专业工作流
• 吸附到网格 - 磁性对齐
• 轨道管理 - 显示/隐藏、锁定/解锁、重新排序
• 字幕支持 - 导入 SRT 并自定义样式
• 屏幕录制 - 录制屏幕、摄像头或两者同时
• 项目分享 - 导出/导入项目文件

性能

• WebGPU 渲染 - GPU 加速合成
• WebCodecs API - 硬件视频解码/编码
• 帧缓存 - LRU 缓存实现流畅播放
• Web Workers - 后台处理
• 4K 支持 - 编辑和导出 4K 分辨率

快速开始

在线尝试

访问 openreel.video (https://openreel.video) 即可立即开始编辑。

本地运行

# 克隆仓库
git clone https://github.com/Augani/openreel-video.git
cd openreel-video

# 安装依赖（需要 Node.js 18+）
pnpm install

# 启动开发服务器
pnpm dev

# 打开 http://localhost:5173

构建生产版本

pnpm build
pnpm preview

浏览器要求

所有主流浏览器现已支持 WebCodecs，可实现硬件加速的视频编码/解码。

推荐配置：

• 8GB 以上内存
• 独立 GPU 用于 4K 编辑
• 现代多核 CPU

架构

单体仓库结构

openreel/
├── apps/web/              # React 前端（约 6.6 万行）
│   └── src/
│       ├── components/    # UI 组件
│       │   └── editor/    # 编辑器面板（时间线、预览、检视器）
│       ├── stores/        # Zustand 状态管理
│       ├── services/      # 自动保存、快捷键、屏幕录制
│       └── bridges/       # 引擎协调
│
└── packages/core/         # 核心引擎（约 5.9 万行）
    └── src/
        ├── video/         # 视频处理、WebGPU 渲染
        ├── audio/         # Web Audio API、特效、节拍检测
        ├── graphics/      # Canvas/THREE.js、形状、SVG
        ├── text/          # 文字渲染、动画
        ├── export/        # MP4/WebM 编码
        └── storage/       # IndexedDB、序列化

关键技术

• React 18 + TypeScript - 类型安全 UI
• Zustand - 轻量级状态管理
• MediaBunny - 视频/音频处理
• WebCodecs - 硬件编码/解码
• WebGPU - GPU 加速渲染
• Web Audio API - 专业音频处理
• THREE.js - 3D 变换和特效
• IndexedDB - 本地项目存储

设计原则

• 基于动作的编辑 - 每次编辑都是可撤销的动作
• 不可变状态 - 通过 Zustand 实现可预测的更新
• 引擎分离 - 视频、音频、图形引擎相互独立
• 渐进增强 - 优雅降级（WebGPU → Canvas2D）

AI 管理开发

OpenReel 是 AI 辅助开源开发的一次实验。Claude AI 帮助管理：

• 问题分类 - 审查并回复 issue
• 代码实现 - 编写功能并修复 bug
• 代码审查 - 维护质量标准
• 文档编写 - 保持文档更新

人类监督由 Augustus 负责，确保战略方向并对重大变更进行最终审批。所有代码公开、经过测试并遵循最佳实践。

对贡献者的意义：

• Issue 通常会在 24 小时内得到快速审查
• Bug 修复快速发布
• 对问题给出清晰详细的回复
• 高质量代码标准

贡献指南

欢迎贡献！请查看 CONTRIBUTING.md 了解指南。

参与方式：

• 报告 bug（附带复现步骤）
• 在讨论区提出功能建议
• 提交 PR 修复 bug 或添加功能
• 改进文档
• 编写测试
• 分享特效预设

开发工作流：

# Fork 并克隆
git clone https://github.com/Augani/openreel-video.git

# 创建功能分支
git checkout -b feat/你的功能

# 修改代码，然后测试
pnpm typecheck
pnpm test
pnpm lint

# 使用约定式提交提交
git commit -m "feat: 添加你的功能"

# 推送并创建 PR
git push origin feat/你的功能

路线图

已完成

• 多轨道时间线（拖放支持）
• GPU 加速的实时视频预览
• 完整编辑套件（剪切、修整、分割、转场）
• 文字编辑器（20+ 种动画）
• 图形（形状、SVG、贴纸、背景）
• 音频混音（特效和节拍检测）
• 色彩分级（LUT 支持）
• 关键帧动画系统
• 导出 MP4/WebM（支持 4K）
• 屏幕录制
• AI 超分辨率
• 撤销/重做及自动保存

进行中

• 嵌套序列（时间线中的时间线）
• 运动跟踪
• 更多导出格式（ProRes、GIF）
• 插件系统

计划中

• 调整图层
• 高级遮罩
• 音频频谱编辑
• 协作编辑
• 移动端优化

许可证

MIT 许可证 - 可自由用于个人和商业项目。

详见 LICENSE。

致谢

基于以下技术构建：

• MediaBunny (https://mediabunny.dev) - 媒体处理
• React (https://react.dev) - UI 框架
• Zustand (https://zustand-demo.pmnd.rs/) - 状态管理
• THREE.js (https://threejs.org) - 3D 渲染
• TailwindCSS (https://tailwindcss.com) - 样式

灵感来源：

• DaVinci Resolve - 专业工具的正确方式
• CapCut - 人人可用的编辑工具
• Figma - 浏览器中的专业软件

支持

• GitHub Issues - Bug 报告和功能请求
• GitHub Discussions - 问题和社区聊天
• Twitter/X - @python_xi (https://x.com/python_xi)

由 @python_xi (https://x.com/python_xi) 与 AI 携手精心打造。

让专业视频编辑人人触手可及。永远免费。永远开源。