web多媒体技术在视频编辑场景的应用

大家上午好，很高兴来到咱们腾讯LIVE开发者大会。我今天分享的web多媒体技术在视频编辑场景的应用是个非常有意思的主题，希望大家能有所收获。

首先介绍下自己，我是袁运辉，2010年就加入了腾讯，目前主要在腾讯云视频中心负责web团队。

视频云的web团队是一个偏多媒体前端技术的团队，致力于为客户提供更多创新的场景化云服务，近期我们在视频制作领域中有一些实践经验，我觉得和前端技术以及大会的主题都比较契合，所以非常有意愿来这与大家做一次分享。

我的分享主要分为四部分：第一部分介绍下业务背景；第二部分介绍云剪，这是一个web端的视频制作平台；第三部分介绍微剪，是一个小程序端的视频编辑插件；最后会分享后续的一些规划以及前端的技术挑战。

首先为大家介绍一下腾讯视频云正在大力发展的制作云框架。随着数字化的不断推进，可以看到内容媒体行业云端化、智能化变革已成趋势，制作云是依托于腾讯云强大的直播、点播、视频ai等能力，为行业提供的一体化内容制作分发云服务。包括有云剪辑、云导播、云转推、云媒资等丰富的场景化应用，助力客户实现"采、编、播、发、存"等全链路云化改造升级，提升从业者内容制作分发效率。我今天分享的云剪、微剪是这个大框架中的重要一环。

先介绍云剪，可以看到界面很酷，这是一个web端的在线视频剪辑工具，和Mac客户端iMovie类似，提供音视频剪切、画面调整，添加标题、音乐、字幕、贴片、特效、滤镜、转场等功能，能够满足绝大部分视频非线编需求。

说到视频剪辑，大家一般会联想到原生客户端的软件app，在原生端技术上一般是如何实现的呢，这里我以安卓的流程图为例介绍一下，其他平台基础原理上也类似。

首先对视频需要解封装，提取出视频轨进行解码，并使用opengl绘制画面数据。这是由于视频的后期处理，需要使用到opengl强大的图形渲染能力，便于添加特效、滤镜及更多多媒体元素等。然后将opengl绘制内容进行编码，最后与音频一起封装成媒体文件。这只一个基础原理，在实际应用中当然会复杂很多。

那么在浏览器端如何实现，浏览器原生并不支持编解码这种高级接口，与mediaExtractor、mediaMuxer相对应的倒是有mediaStream，是否能为之所用，整体如何设计？

带着疑问，我分享三个问题：如何渲染视频帧，如上述流程里如何将视频绘制在浏览器webgl中；如何实时操作预览，即如何设计代码架构，做到方便实时预览视频剪辑各种操作；以及分享导出的几种方式。

渲染视频帧的第一个方案，我们可以使用ffmpeg的webassembly版本对视频进行解码，解出yuv数据转rgb再绘制到canvas上，业界也有很多使用这种方案来播放h265编码和flv等不支持的格式视频。有两点需要注意的是：第一虽然wasm性能比js好，但也是软解，每帧需要耗时25-30ms左右；第二需要实现类似浏览器video的音画同步方案，整体会很复杂。

第二个方案是我们正在使用的，在webgl接口中，texImage2D指定纹理是可以接收video对象的，那么我们可以通过离屏video绘制到webgl中。浏览器video是原生硬件解码，性能更好，而wasm的方案只能做到30帧，在视频编辑场景肉眼就能看到并不流畅，加上比较复杂，所以video纹理的方案性价比更佳。当然大家会说也可以使用2d canvas drawImage，但是这不便于我们使用webgl的更多能力。

再来看如何实时操作预览，做过游戏的同学可能会意识到，其实视频编辑软件，和游戏或动画制作工具有一定相似性。都有时间轴序列，拖拽生成实时预览，并有一个主计时器去驱动。我们目前的播放器采用的就是游戏开发的思路，通过操作时间轴实时输入轨道数据，播放器管理调度场景中剪辑对象，最终形成影片序列。

说下最重要的导出，前端是否可以导出，答案是可以的！

我给大家介绍两种方案：

第一种通过ffmpeg wasm版本，可以完全模拟出原生端的处理流程，ffmpeg run指的是我们熟知的ffmpeg命令行接口，功能很强大；

第二种可以通过captureStream、mediaStream等浏览器原生接口实现。

这两个接口，一般用于做录屏之类的应用，云剪里也有使用到录屏素材。画面和声音都可以通过captureStream来得到mediaStream对象，然后通过它的addTrack方法合在一起。但是这个方法只能合入一个音频流，当有多个音频时就有点捉襟见肘，这时可以使用web audio的一些高级技巧，例如动态connect维持一个流，其实也能够实现。

整体对于前端导出来说，captureStream的方式简单，但在复杂场景下还得进一步验证，导出质量是一个问题。ffmpeg能力上会更强大，他们的共同问题是，ffmpeg受限于浏览器端性能，captureStream则必须等canvas正常播放完，所以导出性能可能只能做到1:1。

那第三种方法就是后端导出了，ffmpeg、opencv、opengl都是后端很成熟的组件了。后端的好处是原生编译型程序性能更好，同时便于通过api调用或ai批量化生产。不太方便的是，前后端实现的效果要对齐统一挺麻烦。我们处于整体业务考虑，目前选择的是这一种方案。

在整体架构方面，我们也充分考虑了各种客户使用场景。可以支持多种层次的paas集成方案，如使用我们的SDK，可以用iframe方式完整嵌入云剪编辑器，同时配合完善的云api接口打通开发者业务流程。而对于有能力的开发者，我们也能够提供如播放器等核心组件给开发者二次开发。同时，也支持通过saas换皮的方式使用，在saas版本中，能够使用导播台、媒资管理等更多场景化应用打通整个制作链路。

性能方面，可以看到我们的编辑器在核心的预览播放场景下，有接近60帧渲染效率。素材导入上，也尽可能利用到浏览器的本地file能力，即传即编，云端同步，保证编辑的效率和随处使用。

接下来介绍一下微剪。微剪是一个小程序端的视频剪辑插件，开发者可以嵌入到自己的小程序中，完成视频编辑业务逻辑。搜索微剪或者扫描二维码可以体验，目前实现了一个简版的类原生短视频剪辑能力。

先说一下大家感兴趣的技术原理，从图中可以看到和前面介绍的原生处理流程很像，这里的核心是微信近期提供了一个decoder模块的小程序接口，编辑预览可以利用这个方式拿到视频帧画面绘制到webgl上。

在导出上，则提供了一个MediaRecorder可以录制canvas画面，最后与音频合成封装。这是小程序的一个基本原理，在官方文档上都能看到。

在前端方案上，同样作为web的一个方案，基于webgl，它与云剪是一脉相承的。但是呢，事情也没有这么简单。

我们遇到了各种各样的挑战，说下印象比较深刻的：第一点是环境适配，我们这个类游戏而形式又是小程序插件，微信的小程序和小游戏是完全隔离的，意味着在小游戏里发展了好几年的接口和做法，在这里都不能用，例如不能动态创建canvas、video，不能使用worker等，需要使用各种方式去规避和兼容；第二点是在渲染播放上面，微信的底层接口如decoder暂时还不是很完善，会遇到许多如seek错乱和音画同步等问题；第三点做视频编辑的话，少不了需要用到类微视抖音的特效，这个需要用到shader着色器，这一块也是前端接触得较少的领域，传统设计师根本做不了，需要花费大量的精力去攻关；第四点就是复杂导出了，多视频图片合并、多音频位置等，这些微信还没有准备好，暂时只是给了一个最基础的原子能力，需要使用到很多技巧来实现，比较零散就不细说了。我们通过努力，基本上解决了这些问题。

成果方面，我们在小程序上率先实现了从媒体选择、摄像，到多个视频图片的裁切合并，文字、特效、滤镜、音乐的添加，客户端导出这一整套完整核心流程，未来会持续增强能力，性能体验方面也会与微信的同事一起持续打磨。

微剪插件架构设计上，对于开发者，可以使用我们开箱即用的一个clip组件，能够配置丰富的参数如裁切时间、UI样式、水印等。同时，也可以使用我们的子组件做二次开发，例如相机、裁切器、播放器等，可以按需使用，开发出符合自己业务场景的编辑工具。我们这是一个组件集，即使不做编辑工具，也有许多业务场景，例如拿播放器组件作为一个多媒体展示方案等，欢迎大家试用。

最后分享下规划展望。在这一块的技术上，我觉得可能有这么几个方向：

第一点：编辑体验

我们目前的编辑工具能力还不是很完善，如何做到能媲美专业原生工具，让更多用户愿意使用，需要下很多功夫。编辑能力、易用性以及一些技术和体验的创新非常重要。

第二点：内容生态

我们做为to b的服务商，如何为客户提供素材方案，例如一些图文动画、动态贴纸等。其实这块挺难的，首先在技术上就不是一个标准的东西，有较多细节，它是设计与平台技术架构的融合体现。我们自己做都难，客户就更难，所以我认为这里会产生很大用户价值。

第三点：智能化

前端与AI/AR的结合在移动端已经很常见了，那么在web和小程序端是否可能大规模使用，需要持续探索场景，这里也会有很大的性能挑战。以及一些场景化的模版、后端智能生产等也是必不可少。

第四点：在线协同

因为疫情，这个词现在特别火，任何行业都需要协同，包括内容媒体行业，我们可以看到业界已经有一些如审查、修改批注等工作流应用出现，这里可能涉及比较复杂的协作、多端同步和许多媒体技术细节等。

这些对前端技术都是较大的挑战，同时也充满机遇。发现现在很多前端在研究serverless，这是往后，那么往前，可能就是webgl、媒体技术、webassembly等，例如webgl，我们熟知的前端AI、VR、AR、游戏等都离不开它。光shader就足够复杂，它可以用来做很多高级的特效、动画等可视化的东西，涉及到程序语言知识、数学知识、图形学知识，甚至需要一定审美。所以，学无止境，前端技术的天花板一直就很高。

最后，感谢大家，我今天的分享就是这些。

后台回复关键词【TLC】可获取嘉宾分享PPT。