江苏龙网

  1. 首页 > 资讯 > 科技 > >

|美摄云非编系统——网页端实时编辑渲染方案( 二 )


图中WASM就相当于美摄的SDK ， 除了浏览器本身对多线程的一些限制和渲染机制有些区别以外 ， 其他的功能都是无差别、可使用的 。 中间部分是web端的js业务逻辑层 ， 包括所有的非线性编辑处理逻辑及页面UI展示 ， 同时它支持从本地导入上传视音频文件 ， 合成的成片下载到本地等功能 。 下部是服务端 ， 主要包括两大业务功能：一是对上传的视音频文件进行分片转码 ， 二是对编辑完成的工程进行成片输出 。 这些视音频资源保存在云存储 ， 并和用户关联一起记录在数据库中 。
2.2 实现流程

|美摄云非编系统——网页端实时编辑渲染方案
本文插图

以下我将介绍web端的内部逻辑及实现流程 。 web端加载WASM并初始化完成之后 ， 用户便可以导入本地的视音频进行使用 ， 考虑到导入的视音频分辨率、码率、时长等信息不同 ， 甚至有一些gif图、tga序列等情况 ， 如果都只是用原视频来编辑 ， 就增加了对网络的要求 ， 无法保证实时性 ， 而且对于非线性编辑中经常使用的裁剪、移动、覆盖、多轨等要求 ， 这种方式也是低效的 ， 所以 ， 我们统一进行了转码 ， 并且进行了分片 。
转码成低分辨率的视音频切片 ， 既可以提高下载速度 ， 又便于缓存和读取使用 。 转码切片的信息文件 ， 我们采用了主流的m3u8文件格式 ， 这既考虑到其他播放需求 ， 又扩展了我们自己的一些私有信息 ， 比如分辨率 ， 时长等web端使用需要的信息 。 m3u8数据返回到web端之后 ， 会保存在IndexedDB中 。

|美摄云非编系统——网页端实时编辑渲染方案
本文插图

使用m3u8添加视音频素材上轨进行编辑时 ， WASM会检查FS缓存中是否有缓存过当前要编辑的切片 。 如果FS中没有缓存 ， 则检查IndexedDB中是否下载保存过这个切片；如果已经缓存过 ， 就可以直接读取FS中的缓存数据进行解码编辑 。 如果IndexedDB中也没有 ， 就需要从服务器的云存储上下载相应的切片 ， 并且保存在IndexedDB中供编辑使用 。
整个过程都是在预加载的过程中完成的 ， 这样既能按需加载 ， 又能保证播放预览的实时性要求 ， 即使是多轨视音频编辑 ， 也能流畅的播放、预览 。 而且 ， 使用了这套缓存机制后 ， 只要是曾经播放过或者加载过视音频片段 ， 就不再需要下载了 ， 完全可以离线进行编辑 ， 去网络化让用户感觉就像在本地使用一样流畅 ， 体验和以往的云非编完全不同 。

|美摄云非编系统——网页端实时编辑渲染方案
本文插图

同理 ， 云非编里面使用的字幕样式、动画贴纸、粒子、滤镜、字体、主题等特效包 ， 也是通过这样的缓存机制由web端进行管理和使用的 ， 同样是下载之后就缓存在web端了 ， 符合去网络化的设计思路 。 可能有些web端的开发者不太熟悉IndexedDB和FS ， 因为对于一般的web端应用 ， 其实很多时候是用不到它们的 。
IndexedDB作为浏览器端的数据库存储形式已经有一段时间了 ， 它以key-value的形式存储 ， 便于查找 ， value可以是复杂的数据结构 ， 用途很广 ， 更重要的是它的存储空间很大 ， 相对于LocalStorge的四五兆的存储 ， 可谓是天壤之别 ， 用于流媒体缓存数据再合适不过了 。 但是由于IndexedDB的操作大多是异步的 ， 所以在使用的时候 ， 需要把数据及时加载到FS中 ， 而FS其实就是web端的一个文件系统 ， 具有文件读写等操作的能力 ， 这个文件系统的路径也是WASM可识别的 ， 很适合用来作为中间的缓存区 。
2.3 云非编的数据结构及流媒体的工作流程

|美摄云非编系统——网页端实时编辑渲染方案
本文插图

其实云非编整体的结构和移动端的以及传统的非编是一样的 ， 主要还是基于时间线的一整套视音频流的处理 ， 添加特效等等 。 对于视音频编辑而言 ， 时间线是视音频编辑的一个大的框架和载体 ， 它就像播放器的控制滑杆一样 ， 承载着所有的视音频数据 。 时间线的内部其实是由很多的轨道组合成的 ， 这些轨道大概分为视频轨道、音频轨道和特效轨道 ， 其中视频轨道和特效轨道是有层级关系的 ， 层级决定了它们的渲染顺序 ， 也就是最终图像的效果哪个在视觉的最前端 。 而音频轨道因为是混音效果 ， 所以只分声道 ， 并没有层级关系 。 轨道上添加的视音频片段、字幕、贴纸等特效就构成了最终输出的图像 ， 输出到不同系统的预览窗口上 ， 对于云非编系统 ， 就是输出到web端的一个canvas上 。


推荐阅读


上一篇：第一财经|虚拟偶像“成团”，人类携手AI共同“撑腰”

下一篇：智能穿戴|Garmin 为旗下三大手表产品线加入太阳能充电功能