> 作者：曹俊跃 # 1. 前言随着 5G 时代的到来，多媒体音视频、特效在 5G 时代下会迎来新的云端的挑战，同时也会催生更多的跟云端相关的业务场景。因此我们需要规划云端的建设，把音视频和特效在移动端积累的能力和经验复制扩展到云端，在云端全面打磨提升音视频能力，支持公司更多业务创造更大价值。同时随着 WebAssembly 的逐步成熟，也给了我们将编辑 SDK 放到 Web 运行的机会。本文首先帮大家回顾一下 WebAssembly 的一些基本情况，然后将介绍Web视频编辑所依赖的关键特性的情况，以及再迁移过程中我们遇到的问题和解决思路。

图 1. Web 视频编辑器示意图

# 2. 技术选型 - WebAssembly 由于编辑 SDK 是采用 C++ 编写而成，因此在早期探索 Web 端视频编辑的过程中对于是基于 JavaScript 重写还是使用 WebAssembly 技术，也对两种不同的技术选型进行了一些调研与分析，例如在兼容性是否满足需求、与 JavaScript 方案对比的优势和劣势等。 ## 2.1 WebAssembly 回顾关于WebAssembly的发展历史和技术演进，可以参考课程前面的章节，这里引用一张图来再次总结一下这项技术的发展时间线，参考下图 2 所示。

图 2. WebAssembly 发展时间线

随着2015年 WebAssembly 的标准开始推进以来，浏览器对于 WebAssembly 标准的支持越来越完善，以 Chrome 为例, 根据 caniuse 和 Chrome Platform Status [3] 上的数据： > WebAssembly（Chrome 57）==> SharedArrayBuffer (Chrome 68) ==> 多线程（Chrome 71）==> SIMD （Chrome 91）==> 异常捕获（Chrome95）到目前为止，Chrome 上的 WebAssembly 多线程应用的可用性已经相当高了。有许多我们熟知的软件通过 WebAssembly 搬到了 Web 上或者利用 WebAssembly 技术提升可用性和性能，例如 Adobe PS[4]，Adobe Acrobat[5]，pspdfkit[6]， Figma[7]， Google Earch[8]，QT[9] 这里不再展开，相关内容请参见课程 "WebAssembly 使用场景和未来发展趋势" 章节内容。 ## 2.2 浏览器兼容性如何？ **基本功能** 目前主流浏览器都支持基本的 WebAssembly 功能。兼容性最好的为 Chrome 和同内核的 Edge ，其次是 Firefox，如下图 3 所示，完整版列表参考文档[10]所述。

图 3. WebAssembly 浏览器兼容性概况

**高级功能** 截至2022年底，WebAssembly 的关键功能如多线程、异常、类型推导、SIMD 等能力已经比较完善，详细信息参见文档[11]所述。

图 4. WebAssembly 高级功能兼容性情况

## 2.3 JavaScript 方案 vs WebAssembly 方案 Web 视频编辑目前主要有两个方向，第一种是使用原生 JS，基于浏览器提供的