一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

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

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

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

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

渲染方式及优缺点

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

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

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

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

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

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

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

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

实时帧图展示

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

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

时间轴缩放会实时的展示帧图,如果是动态的去获取帧图,最快的技术方案是:解码->获取帧数据->绘图->输出帧图。但是如果视频比较大,这样的方案就会很慢。解码视频到绘制帧图,使用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个,不同的配置这个数据会有变化,一般不会太多。可以看到我们也会生成了很多帧图:

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

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

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

转场,特效,滤镜的实现

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

扩展性

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

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

整体技术栈

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

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

附上地址:video.h5ds.com

原文链接:https://juejin.cn/post/7320288137699442739 作者:馒头不想说话

(0)
上一篇 2024年1月5日 下午4:42
下一篇 2024年1月5日 下午4:53

相关推荐

发表评论

登录后才能评论