江苏龙网

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

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


美摄云非编是一款新型网页端非线性编辑工具 ， 应用WebAssembly技术实现网页端直接渲染图像 。 本次LiveVideoStackCon 2020线上峰会我们邀请到了北京美摄网络科技有限公司的研发总监黄裔来做分享 ， 对网页端编辑、WebAssembly技术有兴趣的听众可以从中了解到整个架构的搭建、技术实施、注意事项以及一些常见问题的处理等 。
文 / 黄裔
整理 / LiveVideoStack
大家好 ， 我是北京美摄网络科技有限公司的研发总监黄裔 ， 本次我分享的主题是美摄云非编系统 ， 是一种web端视音频实时编辑渲染方案 。

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

本次内容分为五个部分:一是美摄云非编方案的技术背景 ， 也就是目前web端视音频编辑的现状以及我们采用新方案的原因；二是美摄云非编的技术整体方案 ， 包括前端、后端及整体技术框架；三是美摄云非编方案的缓存机制 ， 也是美摄云非编实时性的一个重要的保障；四是美摄云非编的整体工作流程；五是一些技术展望和本次问题的讨论实践 。
1. 背景介绍
1.1 公司背景介绍

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

北京美摄科技有限公司 ， 成立于2014年10月 ， 是一家从新奥特集团独立出来 ， 专注于视音频领域开发20年的智能视音频整体解决方案服务商 。 服务内容包括移动端视音频图像智能处理、识别以及深度学习等 ， 服务领域涵盖移动APP、智能手机、智能硬件、广电及通信运营商等行业客户 。
1.2 技术背景

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

这部分我将介绍云非编相关的技术背景 ， 在web端的非线性编辑软件中 ， 传统的方法是由服务器端进行音视频解码、特效处理和图像渲染 ， 再将音视频流混合后发送给前端进行播放和显示 ， 也就是说 ， web端只要做一次编辑就要和服务端进行一次通信 ， 服务端再进行一系列的特效处理才能返回给web端预览 ， 对网络依赖度过高 ， 实时性也很差 ， 客户体验很不好 。
美摄云非编系统是基于WebAssembly技术实现了web端图像的实时渲染 ， 利用缓存机制实现了大部分视音频编辑去网络化 。
2. 技术整体方案
2.1 整体框架

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

美摄云非编整套系统的web端核心就是美摄的SDK ， 而能够使美摄SDK跨平台运行在web端则是基于目前已经比较成熟的WebAssembly技术 。 WebAssembly技术其实已经提出几年了 ， 而最近才趋于成熟 ， 并且开始应用于一些web端的应用 ， 它的诞生与人们对web端的需求是密切相关的 。
web端应用想要提升性能 ， 传统的JS没办法实现 ， 于是 ， 三大浏览器厂商微软、谷歌和火狐分别提出了自己的解决方案 ， 微软提出了TypeScript ， 谷歌提出了Dart ， 火狐提出了asm.js ， 但是这些方案互不兼容 ， 各自为战 ， 违背了web端的统一标准 ， 所以就出现了WebAssembly 。
WebAssembly顾名思义就是web端的汇编技术 ， 它编译生成的二进制文件WASM更接近机器指令 ， 执行速度就更快 。 目前对于WebAssembly支持最好的编译环境是LLVM ， 更加完善的一款工具就是Emscripten ， 它提供了很多API ， 可以让WebAssembly的使用更简单 ， 但是它的文档描述有些不太清楚 ， 有些API使用还得需要一些推敲才能确定 。
WebAssembly可以将很多种语言进行编译提供给web端使用 ， 美摄SDK使用的是C/C++代码实现的 ， 所以通过Emscripten编译成WASM格式的二进制文件后 ， 美摄SDK的核心功能就能无缝衔接的移植到web端 ， 大大的节省了美摄云非编的开发工作量 ， 缩短了开发周期 ， 同时又能保证web端的所有效果都和美摄其他平台展示的一样 。 同时WebAssembly也比asm.js机制更加快速和安全 ， 虽然在浏览器兼容方面不如asm.js ， 但是现在已经有越来越多的浏览器能够很好地支持WebAssembly了 ， 所以我们坚定的选择了它 。


推荐阅读


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

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