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



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

这张图详细的解释了服务器集群中的消息和数据处理 , 其中有数据的同步 , 消息的请求和发送 。 总控服务器还负责集群的负载均衡处理 , 如果满负载之后则会进行任务排队 , 并且在某个任务失败之后 , 根据失败的类型区分是否需要重试 , 还要对任务的执行进程进行心跳监测 , 保证任务的正常进行 。

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

消息的具体实现流程图

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

上图展示了美摄云非编的简单使用流程 , 先是用户注册、登录 , 然后创建工程或者打开已有工程 , 接着加载WASM相关文件 , 并初始化WASM里面的流媒体上下文 , 然后创建时间线并连接到预览窗口 。 开始编辑时 , 上传视音频资源到服务器进行转码分片 , 生成相应的m3u8分片信息文件 , 使用m3u8文件上轨进行编辑 , WASM进行视音频分片预取及缓存处理 。 如果添加特效资源包 , 则下载并缓存资源包 , 再安装使用 , 编辑的工程所有数据通过xml形式保存到服务器 , 再通过合成任务生成出成片 , 供web端进行下载使用或预览 。

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

这张是美摄云非编的主编辑界面的展示图 。 主要有手绘粒子、拍唱词、波形展示以及多种编辑模式 。
4. 实际应用案例

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

图中是美摄在各个领域的合作伙伴 , 就不一一列举了 。 目前 , 美摄的云非编方案已经在Bilibili的web端应用并上线 。
最后对目前的技术做几个总结:
首先使用WebAssembly编程时 , 一定要对内存及时释放 , 因为WebAssembly并没有自动回收机制 , 尤其是前端的开发工程师 , 可能不太善于处理对象的释放 , 但是这里一定要记得手动释放内存 , 否则造成内存泄漏将是灾难性的;
其次是在开启Web Audio时 , 如果是chrome内核的浏览器 , 并且内核版本大于等于70 , 那么是不能自动开启的 , 需要在一个操作里面才能开启;目前美摄云非编需要多线程对内存做很多操作 , 所以就需要使用共享内存的机制 , 也就是浏览器要支持SharedArrayBuffer , 这对浏览器是有一些限制的 , 但是为了提高运行效率 , 只能牺牲一部分不支持的浏览器版本 。
此外 , 在WASM里面需要使用web端Dom节点或者需要JS来实现一些简单工作时 , 可以使用内嵌JS的方式 , 简单实用 , 但是要注意的是参数传递不要过于复杂;还有录音数据要分片并且做适当的偏移 。
我们对web端的一些期望和关注是:
浏览器对WebAssembly的支持 , 以及对SharedArrayBuffer等流媒体要使用的支持 , 不论是国内的浏览器还是国外的 , 包括移动端 , 都能对这些标准更加统一的对齐 , 这样对于web端的开发者将是一道福音 , 届时一定会有越来越多的web端应用使用WebAssembly 。
【|美摄云非编系统——网页端实时编辑渲染方案】


推荐阅读