GMTC2018 《WebAssembly在音视频领域的应用》和君

2020-02-27 194浏览

1.WebAssembly 在⾳音视频领域的应⽤用和君 (Daniel He) TutorABC前端负责⼈人
2.
3.
4.• 为什什么引⼊入WebAssembly • WebAssembly介绍 • WebAssembly开发 • 与在线教育视频的结合 • 展望与预期
5.01 为什什么引⼊入WebAssembly
6.产品介绍 (TutorMeet+)
7.WebRTC发展现状 •WebRTC 1.0 已经定案，愈发成熟稳定 •更更多的编码器器（VP9，AV1） •更更⼴广泛的浏览器器端⽀支持（Edge，Safari已全⾯面⽀支持） •更更多的终端设备⽀支持（医疗设备、loT） •与新技术的结合（VR/AR ，机器器学习）
8.Can I Use WebRTC (By June 2018) 2017 Oct -> 70.68%
9.浏览器器处理理⾳音视频能⼒力力的不不⾜足 Javascript的运⾏行行时性能问题 Web前端对⾳音视频的定制化处理理不不及客户端 JS缺少处理理⾳音视频相关的开源库
10.02 WebAssembly介绍
11.WebAssembly简介使浏览器器可以运⾏行行低级（low level）⼆二进制代码，简写为（wasm） • 标准：由W3C WebAssembly Community Group设计开发 • ⾼高性能：提供接近原⽣生的性能 • 安全、可移植 • 开发语⾔言：由其他语⾔言（C/C++，Rust等）编译⽽而成 • 运⾏行行：通过Javascript API与浏览器器进⾏行行交互
12.WebAssembly的诞⽣生 V8 WebAssembly … 1995 … 2008 … 2013 … 2015 2017-2018 Javascript诞⽣生 asm.js 1.0 spec / go，c#等的⽀支持 / …
13.WebAssembly现状 •已获得主流浏览器器的⽀支持 •理理论上不不受开发语⾔言限制 •当前已经⽀支持语⾔言 • C/C++, Rust, AssemblyScript, C#, Reason，Lua， Go, Kotlin… • More languages coming soon…;
14.Can I Use WASM (By June 2018) 数据来源：caniuse.com
15.WebAssembly为什什么快 Parse Compile+ Optimize re-optimize execute GC decode compile+ optimize execute
16.⼆二进制格式（Binary Format）
17.⼆二进制格式（Binary Format） • 由多个区块（Section）按顺序组成 • 每个Section包括： • Section id （1 byte） • Section ⼤大⼩小（u32, in bytes） • Section 内容 • 主体是Code Section，通常占⽐比90%; Custom Section Type Section Code=0 Code=1 Import Section Code=2 Function Section Code=3 Table Section Memory Section Code=4 Code=5 Global Section Code=6 Export Section Code=7 Start Section Code=8 Element Section Code=9 Code Section（function bodies）Code=10 Data Section Code=11
18.⼆二进制格式（Binary Format）
19.⽂文本格式（Text Format） • 对应于⼆二进制格式的“可读的”⽂文本格式 • S-Expression （类似lisp的语法） • 通常保存为.wat (Web Assembly Text format) • 可以通过Binaryen实现与wasm的编译/反编译
20.⽂文本格式对照标示wasm以及版本号前⼀一位标示section id 后⼀一位表示section size 函数体https://wasdk.github.io/wasmcodeexplorer/
21.数据格式 & 指令集 • ⽀支持4种数据类型（Type） • i32, i64, f32, f64 • 指令（Instructions） • i32.add, i64.add, i32.sub, f32.sub …. • call, call_indirect, loop, if, block … • get_global,set_global，get_local, set_local • i32.store, i32.store8, i32.load, i32.load8_u • Stack machine 3 i32.const 1 i32.const 2 2 i32.add 31
22.线性内存（Linear memory） 01110111 01100001 01110011 01101101 “wasm” wa sm 0 1 2 3 4 5 6 7 8 9 10 11 12 13 • 连续的，按字节可寻址的⼀一段内存 • ⼀一格表示1byte • JS，wasm数据交互的主要⽅方式 • wasm通过load, store 操作符指令访问linear memory • 上限2G
23.执⾏行行模型 Linear memory 0 mem_size application WASM engine Functions 0 1 2 3 Indirect function table 0 table_size Global variables 0 1 23 Call Stack
24.03 WebAssembly开发
25.WebAssembly示例例 C++ sample.wasm(text format) 编译引⼊入 JavaScript
26.Javascript API WebAssembly.Module （构造器器） • 通过WebAssembly.compile， WebAssembly.compileStreaming 异步编译，⽀支持Promise WebAssembly.Instance（构造器器） • 通过WebAssembly.instantiate，WebAssembly.instantiateStreaming异步创建，⽀支持Promise WebAssembly.Memory（构造器器） • 创建⼀一个可变⼤大⼩小的ArrayBuffer对象，可定义初始⼤大⼩小（单位 wasm-page 64Kib） • 可以通过实例例⽅方法grow扩容 WebAssembly.Table（构造器器） • 创建Javascript类数组对象，包含wasm函数的引⽤用（指针） • 可以通过实例例⽅方法grow扩容
27.⼯工具链 • 可以将C/C++编译为asm.js和wasm • 底层编译基于LLVM • 通过参数配置：优化level，⽣生成胶⽔水层JS，HTML • 通过Binaryen最终编译为wasm Binaryen ⼯工具链实现各种格式的编译/反编译 • asm -> wasm • wasm -> asm • s -> wasm • wat -> wasm • wasm ->wat … C++ 㱺 LLVM 㱺 Emscripten+Binaryen 㱺 wasm + js
28.⼯工具链
29.与前端⼯工程的结合 • Mozilla Open Source Support赞助了了Webpack$12,5000 • Webpack4实验性⽀支持（未来会移到稳定版） • 意味着可以直接引⼊入 wasm模块，或cpp，rs（需要额外loader⽀支持）
30.Performancehttps://www.websightjs.com/
31.04 WebAssembly在⾳音视频领域的应⽤用
32.v.s Javascript PROS • 相⽐比Javascript性能更更好 • 相同代码逻辑的体积更更⼩小 • ⽀支持语⾔言（如：C/C++）在特定领域的技术沉淀丰厚（如：计算机视觉） CONS • 对前端学习曲线和开发成本较⾼高 • 开发体验略略逊、调试不不⽅方便便 • 当前版本不不能操作DOM • 没有⾃自动GC机制 WebAssembly 不不是⽤用来取代Javascript，⽽而是更更好的和Javascript协同⼯工作
33.适⽤用场景 •计算密集型前端应⽤用 • 计算机视觉 • 游戏 • 加密算法 • 3D / VR /AR • 图形、视频编辑 • ⾳音视频编解码器器（codecs） •现有的C++项⽬目低成本的“迁移”到Web •服务器器计算压⼒力力分摊到浏览器器端
34.视频帧处理理库 Video Frame Proc（C++） Embedded OpenCV libs emscripten • 采⽤用OpenCV lib • 浏览器器端截获视频的帧，转成图像矩阵（Mat），传⼊入wasm处理理 • 处理理好返回的Mat，由JavaScript处理理render逻辑 Video Canvas Javascript Wasm+JS
35.⾯面部偏移检测场景：希望⽼老老师视频授课时的仪态端正，⾯面部视频清晰。解决⽅方案 • 每隔⼀一定时间截获⼀一个视频帧 • 使⽤用⾯面部分类器器做⾯面部检测 • 根据⾯面部坐标检测是否偏出给定阈值
36.表情识别场景：记录顾问授课时表情打点，作为顾问评鉴参考值，及⼤大数据分析之⽤用解决⽅方案 • 截获每个视频帧 • ⾯面部关键点检测（Facial Landmark） • 通过预设阈值判断表情，并上报数据
37.⾯面部ﬁlter 场景：通过同步互动的filter，提升趣味性解决⽅方案 • 截获每个视频帧 • ⾯面部关键点检测（Facial Landmark） • 根据关键点和道具、贴纸互动
38.Tips • 将⽆无关UI渲染的加⼊入webworker • 尽量量将合并计算到每⼀一帧 • 通过IndexedDB缓存wasm⽂文件 • 先开发C++模块，在编译为wasm校验 • 采⽤用asm.js 作为fallback⽅方案 • 注意emscripten编译的limitation
39.Future features • 直接调⽤用DOM / Web API • 更更快 / 更更丰富的⼯工具 / 更更多的语⾔言⽀支持… • Tail calls / multiple return values • 异常处理理（Zero-cost error handling） • 线程（SharedMemory, pthread） • SIMD (single instruction multiple data) • 与前端构建⼯工具的结合（webpack） • Rust， Golang等语⾔言在这块的发⼒力力
40.
41.
42.
43.

GMTC2018 《WebAssembly在音视频领域的应用》 和君

GMTC2018 《WebAssembly在音视频领域的应用》和君