OpenCut 教程：如何用 3 条命令跑起来一款免费开源的 Web 视频编辑器-平芜编程栈

OpenCut 教程：如何用 3 条命令跑起来一款免费开源的 Web 视频编辑器

【免费下载链接】OpenCutThe open-source CapCut alternative项目地址: https://gitcode.com/GitHub_Trending/ap/OpenCut

你想在浏览器里顺手剪一段视频，却发现免费在线工具要么加水印，要么要会员收费？OpenCut 是一个开源、免费的 Web 视频编辑器：时间线、多轨道、实时预览全部跑在浏览器里，代码 MIT 协议，可看可改。如果你既想用它，又想知道视频编辑器到底是怎么实现的，它是当下最值得动手的一个项目。

快速上手：3 条命令在本地跑起 OpenCut

OpenCut 用 proto 作为构建入口，首次使用需要先装它，README 里给了 Linux/macOS/WSL 和 Windows 各自的一行安装命令。装好后，三条命令即可：

git clone https://gitcode.com/gh_mirrors/ap/OpenCut && cd OpenCut # 拉取源码 proto use # 自动安装项目锁定的工具链版本 moon run web:dev # 启动 Web 编辑器开发服务器

启动后在浏览器打开http://localhost:5173即可。后端和桌面版分别对应moon run api:dev和moon run desktop:dev。需要说明的是，当前仓库正在推倒重建，部分页面还是脚手架——但这正是看懂它架构的好时机。

核心能力：这款免费 Web 视频编辑器能做什么

浏览器内时间线剪辑：时间线像指挥台，每条轨道是乐队里一件乐器，各就各位、同步演奏。
- 片段拖拽、吸附对齐，多片段选中后可一起移动和缩放
- 轨道类型在代码层面被固定：主视频、叠加层、音频，结构上就不可能放错
关键帧与动画：像给提线木偶留指令——每个关键帧是一个舞台位置，曲线决定它走多快。
- 位置、缩放（宽高独立）、旋转都可单独做动画
- 内置图编辑器，拖贝塞尔手柄调节关键帧之间的缓动
- 关键帧可以在不同元素之间复制粘贴
特效、蒙版与贴纸：蒙版就像把图片剪成相框，决定画面哪部分露出来、哪部分藏起来。
- 矩形、椭圆、星形、心形等形状，位置、羽化、描边都能调
- 画布背景支持模糊、纯色、渐变，尺寸可自定义
- 贴纸面板内置国旗与图形，字体选择同时收录 Google Fonts 和系统字体
音频处理与导出：波形是声音的"心电图"，哪里响哪里闷，一眼定位。
- 音量、变速（可选保持音调），RMS 波形只渲染可见区域，不拖慢时间线
- 自动生成字幕，或直接导入文稿文件生成字幕
- 导出 MP4，Firefox 等浏览器均能正常完成
一套代码跑三个平台：一个大脑，三具身体。
- Rust 核心编译成 WASM，网页只是外壳，桌面版、移动版共用同一套逻辑
- 规划中的 Editor API 和插件架构，让第三方能力像插排一样接进来

原理速览：视频编辑器的时间与渲染怎么算

💡 先说时间。OpenCut 不用浮点秒，而是把时间记成整数"刻度"：每秒 120,000 刻。这个数字能被所有标准帧率的分数分母整除——23.976fps 恰好每帧 5005 刻，30fps 每帧 4000 刻。就像一把标满细格的尺子，只要按格子数，帧对齐永远精确，不会累积舍入误差。整套时间运算用 Rust 实现，经 WASM 暴露给前端。

🔍 渲染同理。它没有手写 WebGL 着色器，而是用一个 Rust wgpu 合成器编译成 WASM，画面分层绘制：背景、视频层、蒙版、文字、贴纸各占一层，最后合成一帧。像数字导演叠三明治：每层独立，改一层不必重画全片，蒙版的羽化边缘也是单独一层算出来的。

深入一步：在源码里找到你的第一次修改

源码分成三个应用，目录结构非常清晰：

apps/web/：Web 版，React + TanStack Router，界面组件集中在src/components/ui/，路由入口是src/routes/index.tsx
apps/desktop/：Rust 桌面版，基于 GPUI 框架，素材浏览器、预览、属性、时间线四个面板各自一个文件，都在src/panels/下
apps/api/：Cloudflare Workers 上的轻量后端，用 Elysia 搭建，单文件即可读完

最小改动建议：打开apps/web/src/routes/index.tsx，把首页第一句文案改掉，保存后开发服务器热更新，你的第一次修改就完成了。想往深里走，apps/desktop/src/panels/timeline.rs是时间线面板的绘制入口，配合src/shell.rs里四个面板的布局逻辑，半小时就能看懂整个界面是怎么拼起来的。

参与项目：新手友好的 3 条低门槛路径

项目正处于重建期，外部 PR 暂未全面开放，但以下路径现在就能走：

文档与 changelog：changelog/目录按版本各留一个文件，frontmatter 格式高度规律，是练习写发布说明的好地方。
跟踪并调研 issue：找标记为 good first issue 的问题，先把排查过程写清楚，社区明确欢迎这种参与方式。
UI 打磨：apps/web/src/components/ui/下有几十个标准组件，挑一个调整间距或配色，作为贡献窗口重新开放后的第一个 PR，非常合适。

OpenCut 证明了专业级视频编辑完全可以跑在浏览器里，而且每一行代码都对你开放。去克隆仓库吧——跑起来的那一刻，你就已经开始参与它了。

【免费下载链接】OpenCutThe open-source CapCut alternative项目地址: https://gitcode.com/GitHub_Trending/ap/OpenCut

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考