webcodes vs ffmpeg 哪个更适合做在线云剪辑？

概述

webcodes vs ffmpeg 哪个更适合做在线云剪辑？这里我从渲染能力、可交互性、可扩展性三个方面进行分析。综合评估出我们最终的选择方案。

渲染能力

最新的webcodes和webgl技术做视频编码和渲染处理，和传统的ffmpeg.wasm + canvas做音视频编解码渲染来进行对比，我做了一张对比图。

特性	WebCodecs API	ffmpeg.wasm	优势方
性能	极高。直接调用浏览器原生编译的编解码引擎（通常用 C/C++ 编写并针对特定硬件优化），效率接近原生应用。	中等。虽然 WebAssembly 性能在快速提升，但它本质上是在浏览器的沙箱中运行一个完整的、非优化的 FFmpeg 实例，开销较大，尤其是在复杂操作时。	WebCodecs
启动速度	极快。API 只是一个接口，无需加载任何额外的库或模块。	较慢。需要先下载体积庞大的 WASM 模块（通常几 MB 到十几 MB），然后浏览器还要花时间编译和实例化它。	WebCodecs
内存占用	极低。仅占用必要的 JavaScript 堆内存来处理数据结构。编解码操作的内存由浏览器内部管理，不计入 JS 内存限制。	较高。WASM 模块本身会占用大量内存，且 FFmpeg 在运行时也需要分配可观的内存来处理音视频流。容易触及浏览器的内存限制。	WebCodecs
文件体积	极小。无需打包任何额外代码，只需要你的业务逻辑 JS 文件。	较大。必须将巨大的 WASM 文件（.wasm）和其 JavaScript 胶水代码（.js）一起打包到你的应用中，显著增加了应用的初始加载体积。	WebCodecs
格式支持	依赖浏览器。支持的编解码器（如 H.264, VP9, AV1, MP3, AAC）和容器格式取决于浏览器的实现。通常是主流和标准化的格式。	几乎全部支持。FFmpeg 支持的格式和编码标准非常广泛，包括许多老旧或冷门的格式。你可以在任何支持 WebAssembly 的浏览器中获得一致的、强大的格式支持。	ffmpeg.wasm
浏览器兼容性	一般。是较新的 API，在 Chrome、Edge 等 Chromium 浏览器中支持良好，但在 Firefox 和 Safari 中支持有限或正在逐步实现。	良好。只要浏览器支持 WebAssembly（现在几乎所有现代浏览器都支持），ffmpeg.wasm 就能运行。兼容性问题较少。	ffmpeg.wasm

可以看到，做云剪辑 ffmpeg.wasm 的优势有：格式支持多、浏览器兼容性好，但是除开这两个有点其他都是缺点。所以我们的无云剪辑选择了webcodes技术，可以看到基于webcodes的云剪辑只能做H.264, VP9, AV1, MP3, AAC编解码，安全起见建议兼容谷歌98及以上版本。

可交互性

采用webcodes+webgl技术大大提升了渲染性能，所以可以看到在编辑视频的时候交互非常流畅，内存的使用量也非常小，可以编辑1G以上的视频，相比其他方案将视频解码存到内存中，大一点视频直接会导致页面崩溃。

基于ffmpeg封装的wasm包在渲染视图的时候会有很高的延迟，比如在拖动元素或者修改文字后，可以明显感觉更新延迟了（延迟大概在1s左右），而基于webgl的渲染方案就不会有延迟，及时快速拖动时间轴，也可以快速更新视图不卡顿。

所以我们的云剪辑的用户体验也会比较好。

可扩展性

要开发ffmpeg的扩展是非常困难的，比如开发一个特效、或者开发一个插件。

插件开发

比如拿动态图表来说，要基于ffmpeg开发一个echart一样的动态图表，先不说性能如何，单单是开发这个插件就是非常困难的。我们的云剪辑采用webgl，可以天然支持canvas动画编码成视频，所以直接集成echarts图表就可以了，无需过多的开发，官方也提供了插件开发的教程[video.h5ds.com/docs/plugin…

特效开发

ffmpeg内置了一些滤镜，但是实际上客户的需求是无止境的，我们需要开发更多的特效，如果要开发ffmpeg滤镜，也是一个非常庞大的工程量，后续也会让ffmpeg包变的越来越大。我们的云剪辑提供了基于webgl的特效开发教程，可以让前端开发快速上手开发特效，特效也是按需加载不用考虑项目臃肿的问题，官方提供了特效开发的教程[video.h5ds.com/docs/effect…

渲染问题

基于webcodes做在线视频渲染也是一种挑战，我们做了服务端渲染和客户端渲染两套解决方案。客户端渲染可以大大降低云剪辑的渲染成本，在制作一些短视频完全可以做到0成本渲染，当前也有缺点，缺点就是受客户端机器性能的影响，有的渲染快，有的慢，服务端基于webcodes + webgl 渲染也有性能上限，我们的测试数据如下：

测试服务器配置如下，单台服务器支持最大并发数量12个：

• 内存：128G
• 显卡：4080super 16G
• CPU：i9

1080P 60FPS视频渲染速度：200帧左右/S，5并发。

1080P 60FPS视频渲染速度：100帧左右/S，10并发。

结束语

webcodes + webgl 是一项非常具有挑战的云剪辑方案，稳定性、内存控制、交互体验 无一不是做到极致，后续也会集成更多的AI功能，做更多的插件和特效，让云剪辑能更好的为大家提供服务，谢谢！

下图是我们的产品无界云剪辑[video.h5ds.com]。