web端在线视频剪辑工具技术分析

目前web端的视频编辑器并不多，做的比较好的有剪映网页版cupcut（国外），clipchamp（国外），FlexClip（国内），无界云剪（video.h5ds.com）。所用到的技术栈各异，有前端渲染，有服务端渲染。

下面截图是我开发的在线视频剪辑工具-无界云剪的软件截图。接下来会围绕做这个项目做技术分析，让想做类似项目的小伙伴们少走一些弯路。

渲染方式及优缺点

服务端渲染：前端编辑后数据提交到服务端进行渲染，优点是用户可以关闭浏览器做其他事情，等待渲染结束，缺点是如果用户多了就会排队等待，非常耗时，而且服务端渲染成本是非常高。

客户端渲染：编辑好视频后通过前端合成视频直接输出，优点是及时性高，服务器成本几乎为0，缺点是在渲染期间不能关闭浏览器。

无界云剪采用的是客户端的渲染方式，但是这种方式需要解决很多问题。

1、内存问题：比较明显的就是内存问题，渲染时长很长的视频会占用大量的内存，而浏览器内存占用过高的时候就会崩溃掉。目前该问题已经解决，灵感来源于vscode本地文件读写（window.showSaveFilePicker），合成视频有一个缓存数据，而这个缓存数据是非常大的，前端合成会不停往内存中写入帧数据，如果我们把数据实时的写入到硬盘中，那么理论上硬盘有多大数据就能存多大，浏览器中实时的清理掉缓存即可，目前通过测试，可以轻松写入十多个G的视频数据浏览器不会崩溃，内存占用也不是很高。

2、音频混合问题：在做视频剪辑的过程中，音频混合的业务是非常复杂的，目前浏览器提供的接口并不能满足我们的需求，所以这里我们需要借助第三方的库（ffmpeg.wasm）来实现音频的混合。

3、视频实时渲染问题：因为涉及到很多视频特效，比如转场，lut滤镜，特效等，我们采用的是webgl来做底层的渲染框架，这样可以使用shader来实现视频中的特效和滤镜，也为后续扩展提供了扩展性。

4、视频合成问题：视频的合成我们之前有调研过视频webRTC录屏的方式，但是这样有很多缺陷，比如视频是否流畅取决于用户电脑的配置，另外视频的清晰度也受用户的屏幕分辨率的限制，每次合成的结果都不一样，这样就没法商用了，而且帧率没法固定，所以我们果断放弃录屏的方案，采用截图编码成视频帧数据（使用的web原生接口：VideoEncoder，VideoFrame），然后合成MP4，这样就可以确保能得到高质量的视频，也不会出现掉帧的情况。

以上问题解决之后，在线的视频编辑器可行性是非常高的，只是需要谷歌浏览器98版本以上，对浏览器的版本有一些要求。

实时帧图展示

关于时间轴上的帧图，这块业务其实也是非常复杂的，看下面的交互效果，要确定实时性，又要确保准确度和速度，这里我们尝试了很多种方案，最终选择了一种认为是最佳的方案。

时间轴缩放会实时的展示帧图，如果是动态的去获取帧图，最快的技术方案是：解码->获取帧数据->绘图->输出帧图。但是如果视频比较大，这样的方案就会很慢。解码视频到绘制帧图，使用offscreenCanvas + worker 一秒钟也最多处理大概200帧数据，对于10分钟的视频60FPS来说，大概是10 * 60 * 60 / 200 = 大概需要180秒，也就是3分钟才可以生成帧图，这样的效率太低了，可以缓存数据到内存中吗？个人不推荐，因为你不知道用户会使用多少素材，很容易内存爆掉。

经过我们的不断尝试，这里最佳方案是提前抽取帧图，每隔1秒抽一帧，时间轴上用不了高清帧图，所以帧图的高度基本上是固定的，我们使用的50px，10分钟的视频就是10*60=600帧图，然后保存成base64数据，算下来base64数据大小差不多600kB，1小时的视频帧图数据也才3.6M，完全符合我们的业务需求。而抽取的base64帧图是无法直接使用的，我们还需要实时计算和绘制出帧图。因为单张canvas的尺寸也是有限制的，所以我们不能把帧图绘制到一个画布上，而是需要生成多张帧图，当然也不能直接使用canvas，因为谷歌浏览器对canvas的数量也是有限制的，一般不能超过12个，不同的配置这个数据会有变化，一般不会太多。可以看到我们也会生成了很多帧图：

这里的业务确实复杂，如果不是自己去踩过这些坑，真的会花特别多的时间去实践，到这里，时间轴的业务并没有完，因为还涉及到音频数据，所以音波数据也需要做处理，音波数据也是需要提前保存好，在使用的时候动态的绘制上去，音波数据相对会简单一点，只需要采用音波数据保存成一个数据即可。

转场，特效，滤镜的实现

转场特效滤镜其实都可以归为一类效果，因为我们技术选型的时候采用webgl做渲染，所以天生就支持shader，基于着色器语言，我们可以让视频编辑器实现更多酷炫的效果，其实滤镜也是一种名为lut的shader算法实现的，关于lut的说明，可以自行百度，至于剪映很多效果其实都是shader实现的，包括他的动画效果也是shader实现的，当然我们的动画效果是自己封装的一套动画类来实现的。

扩展性

考虑到我们的工具要做SAAS以及未来更强的扩展性，所以我还设计了插件功能，可以扩展插件来实现跟多的业务。比如动态图表动画功能，3D模型动画功能。

整体技术栈

整体技术栈：react + typescript + mobx + pixijs + ffmpeg + semi-ui，个人感觉项目中最困难的是如何设计和架构，如果前期没有设计好，你会发现后续开发会非常痛苦。

欢迎大家留言交流，期待有更好的技术方案！

附上地址：video.h5ds.com