Augani/openreel-video

# OpenReel 视频 OpenReel Video 是一款功能齐全、基于浏览器的视频编辑器，完全在客户端运行。它使用 React、TypeScript、WebCodecs 和 WebGPU 构建，可提供专业级视频编辑，无需昂贵的软件或云端处理。 **[在线体验](https://openreel.video)** | **[文档](CONTRIBUTING.md)** | **[讨论](https://github.com/Augani/openreel-video/discussions)** | **[Twitter](https://x.com/python_xi)**     ## 为什么选择 OpenReel？ - **100% 客户端** - 您的视频永远不会离开您的设备。无需上传，无需云端处理，完全保护隐私。 - **无需安装** - 在 Chrome/Edge 中即可运行。打开即可开始编辑。 - **专业功能** - 多轨道时间轴、关键帧动画、色彩分级、音频特效等。 - **GPU 加速** - 使用 WebGPU 和 WebCodecs 实现流畅的 4K 编辑和快速导出。 - **永久免费** - MIT 许可，无订阅，无水印。 ## 功能特性 ### 视频编辑 - **多轨道时间轴** - 无限的视频、音频、图像、文本和图形轨道 - **实时预览** - 通过 GPU 加速实现流畅播放 - **精准编辑** - 逐帧精确浏览、剪切、修剪、拆分、波纹删除 - **转场** - 交叉淡化、黑/白场过渡、擦除、滑动效果 - **视频特效** - 亮度、对比度、饱和度、模糊、锐化、发光、暗角、色度键 - **混合模式** - 正片叠底、滤色、叠加、相加、相减等 - **速度控制** - 0.25倍到4倍，并保留音频音调 - **裁剪与变换** - 位置、缩放、旋转以及 3D 透视 ### 图形与文本 - **专业文本编辑器** - 丰富的样式、阴影、描边、渐变 - **20多种文本动画** - 打字机、淡入淡出、滑动、弹跳、弹出、弹性、故障 - **卡拉OK式字幕** - 逐词高亮并与音频同步 - **形状工具** - 矩形、圆形、箭头、多边形、星形，支持填充/描边 - **SVG 支持** - 导入带有颜色着色和动画的 SVG - **贴纸与表情符号** - 内置素材库 - **背景生成器** - 纯色、线性渐变、网格渐变、图案 - **关键帧动画** - 使用 20 多种缓动曲线随时间推移为任何属性制作动画 ### 音频 - **多轨混音** - 无限音频轨道与实时混音 - **波形可视化** - 可视化音频编辑 - **音频特效** - EQ、压缩器、混响、延迟、合唱、镶边、失真 - **音量与声像** - 带有淡入/淡出效果的单片段控制 - **节拍检测** - 自动生成与音乐同步的标记 - **音频闪避** - 播放对话时自动降低音乐音量 - **降噪** - 3次pass降噪（音调、宽带、低频轰鸣） ### 色彩分级 - **色轮** - Lift、Gamma、Gain 控制 - **HSL 调整** - 色相、饱和度、亮度微调 - **曲线编辑器** - RGB 及独立通道曲线 - **LUT 支持** - 导入并应用 3D LUT - **内置预设** - 一键色彩分级 ### 导出 - **MP4 (H.264/H.265)** - 通用兼容性 - **WebM (VP8/VP9/AV1)** - 针对Web优化的格式 - **ProRes** - 专业中间格式（Proxy、LT、Standard、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)** 立即开始编辑。 ### 本地运行 ``` # Clone repository git clone https://github.com/Augani/openreel-video.git cd openreel-video # Install dependencies (requires Node.js 18+) pnpm install # Start development server pnpm dev # Open http://localhost:5173 ``` ### 生产环境构建 ``` pnpm build pnpm preview ``` ## 浏览器要求 | 浏览器 | 版本 | 状态 | |---------|---------|--------| | Chrome | 94+ | 完全支持 | | Edge | 94+ | 完全支持 | | Firefox | 130+ | 完全支持 | | Safari | 16.4+ | 完全支持 | 所有主流浏览器现在都支持 WebCodecs 进行硬件加速的视频编码/解码。 **推荐配置：** - 8GB+ 内存 - 用于 4K 编辑的独立 GPU - 现代多核 CPU ## 系统架构 ### Monorepo 结构 ``` openreel/ ├── apps/web/ # React frontend (~66k lines) │ └── src/ │ ├── components/ # UI components │ │ └── editor/ # Editor panels (Timeline, Preview, Inspector) │ ├── stores/ # Zustand state management │ ├── services/ # Auto-save, shortcuts, screen recording │ └── bridges/ # Engine coordination │ └── packages/core/ # Core engines (~59k lines) └── src/ ├── video/ # Video processing, WebGPU rendering ├── audio/ # Web Audio API, effects, beat detection ├── graphics/ # Canvas/THREE.js, shapes, SVG ├── text/ # Text rendering, animations ├── export/ # MP4/WebM encoding └── storage/ # IndexedDB, serialization ``` ### 核心技术 - **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 分类** - 审查并响应 Issue - **代码实现** - 编写功能和修复 Bug - **代码审查** - 维护质量标准 - **文档编写** - 保持文档最新 来自 Augustus 的人工监督确保了战略方向以及对重大更改的最终审批。所有代码都是公开的、经过测试的，并遵循最佳实践。 **这对贡献者意味着什么：** - Issue 会得到快速审查（通常在 24 小时内） - Bug 修复发布迅速 - 对问题提供清晰、详细的回复 - 高标准的代码质量 ## 贡献 我们欢迎各种贡献！请参阅 [CONTRIBUTING.md](CONTRIBUTING.md) 获取指南。 **贡献方式：** - 提供复现步骤以报告 Bug - 在 Discussions 中提出功能建议 - 提交用于修复 Bug 或增加功能的 PR - 改进文档 - 编写测试 - 分享特效预设 **开发工作流：** ``` # Fork and clone git clone https://github.com/Augani/openreel-video.git # Create feature branch git checkout -b feat/your-feature # Make changes, then test pnpm typecheck pnpm test pnpm lint # Commit with conventional commits git commit -m "feat: add your feature" # Push and open PR git push origin feat/your-feature ``` ## 路线图 ### 已完成 - 支持拖放的多轨道时间轴 - GPU 加速的实时视频预览 - 完整的编辑套件（剪切、修剪、拆分、转场） - 带有 20 多种动画的文本编辑器 - 图形（形状、SVG、贴纸、背景） - 带有特效和节拍检测的音频混音 - 支持 LUT 的色彩分级 - 关键帧动画系统 - 导出为 MP4/WebM（支持 4K） - 屏幕录制 - AI 超分辨率 - 带有自动保存的撤销/重做 ### 进行中 - 嵌套序列（时间轴中的时间轴） - 运动追踪 - 更多导出格式（ProRes、GIF） - 插件系统 ### 计划中 - 调整图层 - 高级蒙版 - 音频频谱编辑 - 协同编辑 - 移动端优化 ## 许可证 MIT 许可证 - 可免费用于个人和商业项目。 详情请参见 [LICENSE](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 共同精心打造。** *让所有人都能触达专业视频编辑。永久免费。永久开源。*

标签：4K视频编辑, MIT协议, React, Syscalls, TypeScript, WebCodecs, WebGPU, Web前端工具, 免费开源, 关键帧动画, 多媒体处理, 多轨时间线, 字幕特效, 安全插件, 客户端渲染, 开源CapCut替代, 无水印, 本地处理, 浏览器端, 网络安全, 自动化攻击, 色彩校正, 视频剪辑, 视频编辑器, 视频转场, 隐私保护, 音视频同步, 音频效果