1、WebAssembly 在音视频领域的应用为什么引入WebAssemblyWebAssembly介绍WebAssembly开发与在线教育视频的结合展望与预期01为什么引入WebAssembly产品介绍(TutorMeet+)WebRTC 1.0 已经定案，愈发成熟稳定更多的编码器（VP9，AV1）更广泛的浏览器端支持（Edge，Safari已全面支持）更多的终端设备支持（医疗设备、loT）与新技术的结合（VR/AR，机器学习）WebRTC发展现状2017 Oct-70.68%Can I Use WebRTC(By June 2018)Web前端对音视频的定制化处理不及客户端Javascript

2、的运行时性能问题JS缺少处理音视频相关的开源库浏览器处理音视频能力的不足02WebAssembly介绍使浏览器可以运行低级（low level）二进制代码，简写为（wasm）标准：由W3C WebAssembly Community Group设计开发 高性能：提供接近原生的性能 安全、可移植 开发语言：由其他语言（C/C+，Rust等）编译而成 运行：通过Javascript API与浏览器进行交互WebAssembly简介WebAssembly的诞生320152017-2018Javascript诞生V8asm.jsWebAssembly1.0 spec/go，c#等

3、的支持/已获得主流浏览器的支持理论上不受开发语言限制当前已经支持语言C/C+,Rust,AssemblyScript,C#,Reason，Lua，Go,KotlinMore languages coming soon;WebAssembly现状Can I Use WASM(By June 2018)数据来源：WebAssembly为什么快ParseCompile+Optimizere-optimizeexecuteGCdecodecompile+optimizeexecute二进制格式（Binary Format）Type SectionImport SectionFunction Secti

4、onTable SectionElement SectionStart SectionExport SectionGlobal SectionMemory SectionCode Section（function bodies）Data SectionCode=1Code=2Code=3Code=4Code=9Code=8Code=7Code=6Code=5Code=10Code=11Custom SectionCode=0 由多个区块（Section）按顺序组成 每个Section包括：Section id（1 byte）Section 大小（u32,in bytes）Section 内容

5、主体是Code Section，通常占比90%;二进制格式（Binary Format）二进制格式（Binary Format）对应于二进制格式的“可读的”文本格式 S-Expression（类似lisp的语法）通常保存为.wat(Web Assembly Text format)可以通过Binaryen实现与wasm的 编译/反编译文本格式（Text Format）前一位标示section id后一位表示section size函数体标示wasm以及版本号https:/wasdk.github.io/wasmcodeexplorer/文本格式对照3 支持4种数据类型（Type）i32,i64

6、,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数据格式&指令集i32.const 1i32.const 2i32.add123线性内存（Linear memory）“wasm”000456789101112

7、13 连续的，按字节可寻址的一段内存 一格表示1byte JS，wasm数据交互的主要方式 wasm通过load,store 操作符指令访问linear memory 上限2GwasmapplicationWASM engineFunctionsIndirect function tableCall Stack000table_sizemem_sizeLinear memory1230123Global variables执行模型03WebAssembly开发sample.wasm(text format)JavaScript编译引入C+WebAssembly示例Javascript APIW

8、ebAssembly.Module（构造器）通过WebApile，WebApileStreaming 异步编译，支持PromiseWebAssembly.Instance（构造器）通过WebAssembly.instantiate，WebAssembly.instantiateStreaming异步创建，支持PromiseWebAssembly.Memory（构造器）创建一个可变大小的ArrayBuffer对象，可定义初始大小（单位 wasm-page 64Kib）可以通过实例方法grow扩容WebAssembly.Table（构造器）创建Javascript类数组对象，包含wasm函数的引用

9、（指针）可以通过实例方法grow扩容C+LLVMEmscripten+Binaryenwasm+js 可以将C/C+编译为asm.js和wasm 底层编译基于LLVM 通过参数配置：优化level，生成胶水层JS，HTML 通过Binaryen最终编译为wasmBinaryen工具链实现各种格式的编译/反编译 asm-wasm wasm-asm s-wasm wat-wasm wasm-wat 工具链 工具链Mozilla Open Source Support赞助了Webpack$12,5000Webpack4实验性支持（未来会移到稳定版）意味着可以直接引入 wasm模块，或cpp，rs（需

10、要额外loader支持）与前端工程的结合Performancehttps:/ JavascriptWebAssembly 不是用来取代Javascript，而是更好的和Javascript协同工作计算密集型前端应用 计算机视觉 游戏 加密算法 3D/VR/AR 图形、视频编辑 音视频编解码器（codecs）现有的C+项目低成本的“迁移”到Web 服务器计算压力分摊到浏览器端适用场景Video Frame Proc（C+）Embedded OpenCV libs采用OpenCV lib浏览器端截获视频的帧，转成图像矩阵（Mat），传入wasm处理处理好返回的Mat，由JavaScript处理re

11、nder逻辑emscriptenWasm+JSVideoJavascriptCanvas视频帧处理库 每隔一定时间截获一个视频帧 使用面部分类器做面部检测 根据面部坐标检测是否偏出给定阈值解决方案面部偏移检测场景：希望老师视频授课时的仪态端正，面部视频清晰。截获每个视频帧 面部关键点检测（Facial Landmark）通过预设阈值判断表情，并上报数据解决方案表情识别场景：记录顾问授课时表情打点，作为顾问评鉴参考值，及大数据分析之用 截获每个视频帧 面部关键点检测（Facial Landmark）根据关键点和道具、贴纸互动解决方案面部filter场景：通过同步互动的filter，提升趣味性将无

12、关UI渲染的加入webworker尽量将合并计算到每一帧通过IndexedDB缓存wasm文件先开发C+模块，在编译为wasm校验采用asm.js 作为fallback方案注意emscripten编译的limitationTips直接调用DOM/Web API更快/更丰富的工具/更多的语言支持Tail calls/multiple return values异常处理（Zero-cost error handling）线程（SharedMemory,pthread）SIMD(single instruction multiple data)与前端构建工具的结合（webpack）Rust，Golang等语言在这块的发力Future features