FFmpeg开发笔记（八十六）基于Node.js的国产视频编辑开源框架OpenCut
<span data-cke-copybin-start="1"><span data-cke-copybin-start="1"></span></span><span id="cke_bm_3774S">《FFmpeg开发实战：从零基础到短视频上线》一书的“第 12 章 FFmpeg的移动开发”介绍了如何使用FFmpeg在手机上剪辑视频，方便开发者更好地开发类似剪映那样的视频剪辑软件。那么在桌面系统上还有一款国产的开源视频编辑框架OpenCut，通过该框架可以更快地加工编辑视频文件，下面就来介绍如何在桌面系统中使用OpenCut。</span><p><span id="cke_bm_3774S"> OpenCut是一款开源、跨平台的新兴国产视频剪辑工具，支持时间轴、多轨编辑、色彩校正等功能，并支持硬件加速，界面简洁友好，特效资源库丰富且免费。虽然OpenCut的视频编辑操作用到了FFmpeg，但它基于Web服务，不论何时何地，只要能打开浏览器，就能使用OpenCut剪辑视频。<br>
OpenCut的官网地址为https://opencut.net/，源码托管地址为https://github.com/OpenCut-app/OpenCut（星星数32k），国内镜像地址是https://gitee.com/mirrors_trending/OpenCut。2025年7月10日，OpenCut被GitHub评为社区日榜最佳项目，可见该框架的源码更新十分及时。<br>
OpenCut采用Node.js开发，可在Node.js v18或更高版本上运行，详细的编译运行过程说明如下：</span></p>
<h1>一、安装Node.js</h1>
<p>Node.js的官网为https://nodejs.org/en/，下载页面为https://nodejs.org/en/download，找到对应系统的Node.js安装包，下载并安装到桌面系统。</p>
<h1>二、安装Bun</h1>
<p>除了安装Node.js之外，还要安装它的一体化工具Bun。打开桌面系统的命令行窗口，执行以下命令安装bun：</p>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-display-name="代码段" data-cke-filter="off" data-cke-widget-id="7" data-cke-widget-wrapper="1">
<pre class="cke_widget_element" data-cke-widget-data="%7B%22code%22%3A%22npm%20install%20bun%20-g%22%2C%22classes%22%3Anull%7D" data-cke-widget-keep-attr="0" data-cke-widget-upcasted="1" data-widget="codeSnippet"><code class="hljs">npm install bun -g</code></pre>
</div>
<p>有关Windows系统的命令行操作说明可参考《FFmpeg开发实战：从零基础到短视频上线》一书的“8.1 Windows环境编译FFmpeg”。</p>
<h1>三、启动OpenCut</h1>
<p>先解压下载后的OpenCut源码包，再打开桌面系统的命令行窗口，依次执行下列命令：</p>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-display-name="代码段" data-cke-filter="off" data-cke-widget-id="6" data-cke-widget-wrapper="1">
<pre class="cke_widget_element" data-cke-widget-data="%7B%22code%22%3A%22cd%20OpenCut%E6%BA%90%E7%A0%81%E7%9B%AE%E5%BD%95%5Cncd%20apps%2Fweb%5Cncopy%20.env.example%20.env.local%5Cn%23%20%E5%AE%89%E8%A3%85FFmpeg%E7%AD%89%E4%BE%9D%E8%B5%96%E5%8C%85%5Cnbun%20install%5Cn%23%20%E5%90%AF%E5%8A%A8%E5%BC%80%E5%8F%91%E6%9C%8D%E5%8A%A1%E5%99%A8%5Cnbun%20dev%22%2C%22classes%22%3Anull%7D" data-cke-widget-keep-attr="0" data-cke-widget-upcasted="1" data-widget="codeSnippet"><code class="hljs">cd OpenCut源码目录
cd apps/web
copy .env.example .env.local
# 安装FFmpeg等依赖包
bun install
# 启动开发服务器
bun dev</code></pre>
</div>
<p>命令行回显如下的启动日志，说明OpenCut的Web服务正常启动：</p>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-display-name="代码段" data-cke-filter="off" data-cke-widget-id="5" data-cke-widget-wrapper="1">
<pre class="cke_widget_element" data-cke-widget-data="%7B%22code%22%3A%22%24%20next%20dev%20--turbopack%5Cn%C2%A0%20%C2%A0%E2%96%B2%20Next.js%2015.4.5%20(Turbopack)%5Cn%C2%A0%20%C2%A0-%20Local%3A%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0http%3A%2F%2Flocalhost%3A3000%5Cn%C2%A0%20%C2%A0-%20Network%3A%20%C2%A0%20%C2%A0%20%C2%A0http%3A%2F%2F192.168.2.145%3A3000%5Cn%C2%A0%20%C2%A0-%20Environments%3A%20.env.local%5Cn%5Cn%C2%A0Starting...%22%2C%22classes%22%3Anull%7D" data-cke-widget-keep-attr="0" data-cke-widget-upcasted="1" data-widget="codeSnippet"><code class="hljs">$ next dev --turbopack
▲ Next.js 15.4.5 (Turbopack)
- Local: http://localhost:3000
- Network: http://192.168.2.145:3000
- Environments: .env.local
Starting...</code></pre>
</div>
<h1>四、访问OpenCut</h1>
<p>打开浏览器，输入OpenCut默认的Web地址http://localhost:3000，打开OpenCut的欢迎页面如下图所示：</p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-display-name="图像" data-cke-filter="off" data-cke-widget-id="4" data-cke-widget-wrapper="1"><span class="cke_reset cke_widget_drag_handler_container"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸"><span class="cke_widget_edit_container" title="编辑图片"><img src="https://img2024.cnblogs.com/blog/729938/202510/729938-20251005162226034-1695655351.png"></span></span></span></span></p>
<p>点击页面下方的“try early beta”按钮，打开OpenCut的项目页面如下图所示：</p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-display-name="图像" data-cke-filter="off" data-cke-widget-id="3" data-cke-widget-wrapper="1"><span class="cke_reset cke_widget_drag_handler_container"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸"><span class="cke_widget_edit_container" title="编辑图片"><img src="https://img2024.cnblogs.com/blog/729938/202510/729938-20251005162242979-209889616.png"></span></span></span></span></p>
<p>点击项目页面右上角的“New Project”按钮，打开OpenCut的编辑页面如下图所示：</p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-display-name="图像" data-cke-filter="off" data-cke-widget-id="2" data-cke-widget-wrapper="1"><span class="cke_reset cke_widget_drag_handler_container"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸"><span class="cke_widget_edit_container" title="编辑图片"><img src="https://img2024.cnblogs.com/blog/729938/202510/729938-20251005162306973-962287068.png"></span></span></span></span></p>
<p>编辑页面左上角的Upload区域可上传待编辑的视频文件，接下来就能对视频做各种编辑操作了。编辑完成后，点击页面右上角的Export按钮，即可保存修改后的视频文件。</p>
<p>更多详细的FFmpeg开发知识参见<span class="cke_widget_wrapper cke_widget_inline cke_widget_csdnlink cke_widget_selected" data-cke-display-name="a" data-cke-filter="off" data-cke-widget-id="1" data-cke-widget-wrapper="1">《FFmpeg开发实战：从零基础到短视频上线》一书。</span></p><br><br>
来源：https://www.cnblogs.com/aqi00/p/19126689
頁:
[1]