webassembly在哔哩哔哩创作中心的实践
如果无法正常显示，请先停止浏览器的去广告插件。
1. WebAssembly
在bilibili创作中心的实践
高裕轩 bilibili主站技术中心 资深开发工程师
2. 关于我
高裕轩（清古） FE @ bilibili
Ryan Gao WebAssembly / 多媒体
3. 1. 优化投稿场景时面临的挑战
目录
2. WebAssembly技术的引入
3. WebAssembly方案的实践
4. 总结
4. 01
优化投稿场景时
面临的挑战
5. 成为UP主的一小步
·
进入bilibili创作中心投稿页
6. 成为UP主的一小步
· 选择本地文件 等待上传完成
· 填写稿件信息 编辑选项
· 提交
7. 投稿场景值得优化的环节
· 视频信息的预检查需要等到上传完成后在云端进行
· 预检查
· 拦截无法解码的文件
· 拦截视频轨道缺失的文件
· 部分场景下视频分辨率检查
· 用户无法得到及时的反馈
· 云端资源的浪费
8. 投稿场景值得优化的环节
· 视频推荐封面需要等到上传完成后才能获得
· 视频推荐封面
· 从视频内容中截取
· 经过AI打分决定展示顺序
· 展示时机滞后
· 推荐封面的曝光率不高
9. 如果可以在浏览器中处理
· 在文件上传前进行预检查
· 用户可以得到及时的反馈
· 节省云端资源
· 在本地截取视频内容并计算推荐封面
· 提前推荐封面展示时机
· 减轻云端的计算压力
10. 面临的挑战
· 页面需要有分析与处理多媒体文件的能力
· 可以获取视频的元信息
· 可以解码文件 获取视频的关键帧
· 需要支持各种封装格式和编码
11. 解决的方案
· 多媒体文件的分析与处理 —— C/C++
· 通用的多媒体处理框架 —— FFMpeg
· 各类封装格式及编解码器的工具库
12. 解决的方案
· 多媒体文件的分析与处理 —— C/C++
· 通用的多媒体处理框架 —— FFMpeg
· 各类封装格式及编解码器的工具库
· 在浏览器中运行？
· 使用JS重新实现 —— 实现成本高 效率难保证
13. 解决的方案
· 多媒体文件的分析与处理 —— C/C++
· 通用的多媒体处理框架 —— FFMpeg
· 各类封装格式及编解码器的工具库
· 在浏览器中运行？
· 使用JS重新实现 —— 实现成本高 效率难保证
· 将C语言的工具库编译到Web中运行 ——
WebAssembly
14. 02
引入
WebAssembly
15. WebAssembly是什么
· 一种二进制格式 以 .wasm 为后缀
· 一个虚拟机指令集标准
· 为其他编程语言提供一个可移植的编译目标
· 支持在Web浏览器环境及非Web环境中运行
16. WebAssembly的特点
· 高效
· 紧凑的二进制格式 体积小 加载快
· 可以用接近原生的性能运行
· 安全
· WebAssembly会运行在一个安全的沙箱执行环境
· WebAssembly会遵循浏览器的安全策略
17. WebAssembly的
兼容性
· 2017 Oct.
· 主流桌面浏览器全部支持
18. 如何使用
WebAssembly
· 编译出WebAssembly文件
· 选择初始语言
19. 如何使用
WebAssembly
· 编译出WebAssembly文件
· 选择初始语言
· 搭配编译工具
· emscripten
· LLVM
· asm.js / wasm
20. 如何使用
WebAssembly
· 编译出WebAssembly文件
· 编写代码
· 编译wasm文件
21. 如何使用
WebAssembly
· 运行WebAssembly文件
· 获取wasm文件
· 编译并实例化WebAssembly
模块
22. 03
WebAssembly
方案的实践
23. 面临的挑战
· 页面需要有分析与处理多媒体文件的能力
· 需要支持各种封装格式和编码
解决的方案
· 使用C工具库编写多媒体文件的分析与处理逻辑
· 将C代码编译成WebAssembly在浏览器中运行
24. 使用C处理多媒体文件
25. 使用C处理多媒体文件
· FFMpeg的核心模块
· libavformat
· libavcodec
· libavfilter
· ……
26. 使用C处理多媒体文件
· 获取多媒体文件的元信息
· AVFormatContext
· AVStream
27. 使用C处理多媒体文件
· 获取多媒体文件的元信息
· 以JSON字符串形式输出
· 经胶水代码解析后供外部使用
28. 编译WebAssembly
· 编译 FFMpeg 等工具库
· 生成静态库文件 libXXX.a
29. 编译WebAssembly
· 编译 FFMpeg 等工具库
· 生成静态库文件 libXXX.a
· 控制wasm文件体积
· 调整C项目编译配置
· 去除不需要的工具库及依赖
· 只使用部分decoder
30. 编译WebAssembly
· 编译 FFMpeg 等工具库
· 生成静态库文件 libXXX.a
· 控制wasm文件体积
· 编译入口 C文件 及 js文件
· 生成wasm文件 + 胶水js文件
31. emscripten生成的
胶水代码
· 获取并实例化wasm模块
· 提供部分运行环境
· 文件系统
· Web Audio
· canvas操作
· ……
· 封装js与wasm间的类型转换
· 封装wasm模块暴露的函数
32. 在Web Worker中使用
WebAssembly
· 避免wasm模块的计算阻塞主线程
33. 在Web Worker中使用
WebAssembly
· 避免wasm模块的计算阻塞主线程
· 为wasm模块提供处理大文件的能力
· WorkerFS(FileReaderSync)
34. 在Web Worker中使用
WebAssembly
· 避免wasm模块的计算阻塞主线程
· 为wasm模块提供处理大文件的能力
· 多个worker协作加速计算
· 线程池
· 并行计算
· SharedArrayBuffer
35. WebAssembly的性能
· 获取多媒体文件的元信息
· 随机批量处理500个文件
· 单文件平均耗时~40ms
36. WebAssembly的性能
· 生成推荐封面
· 不同分辨率视频生成30张封面
· 480p ~293ms
· 720p ~431ms
· 1080p ~1140ms
37. WASM vs Javascript
·
图像处理场景
使用二维卷积算法为图片添加浮雕效果
·
测试数据
处理前
使用相同卷积核 在不同尺寸的图片下进行测试
比较 js 与 wasm 的计算耗时
720P 1280 × 720
1080P 1920 × 1080
2K 2560 × 1440
4K 3840 × 2160
处理后
38. WASM vs Javascript
·
JS 与 WASM 计算耗时对比 (单位: ms)
图像处理场景
使用二维卷积算法为图片添加浮雕效果
·
测试数据
使用相同卷积核 在不同尺寸的图片下进行测试
比较 js 与 wasm 的计算耗时
720P 1280 × 720
1080P 1920 × 1080
2K 2560 × 1440
4K 3840 × 2160
测试环境: Apple M1 Chrome 94
39. 04
总结
40. 实践总结
· 使用WebAssembly移植其他语言生态的代码 给Web平台
提供了无限的可能
· WebAssembly的高效特性更适用于复杂计算场景
· 搭配Web Worker使用 可以更好发挥WebAssembly的特性
41. 感谢倾听
大会官网