Web平台音视频解码和渲染技术现在和未来

1. Web音视频解码与渲染技术现在+未来归影（高嵩）阿里巴巴前端技术专家

2.

3. Live in Browser Flash <Video/> MSE WASM WebCodecs R.I.P. 1.0 2.0 2.5 3.0

4. 黑盒时代 Flash <Video/>

5. MP4 <Video/> MP4 (mov) WEBM (mkv) M2TS FLV H.264 VP8/9 H.265 H.266

6. 我命由我不由天 MediaSource Extension

7. Media Source Extension

8. Chrome的多媒体架构 appendBuffer src= Web API Blink Chrome Media Stack HTMLVideoElement MediaSource WebMediaPlayerImpl SourceBuffers FFmpegDemuxer ChunkDemuxer PipelineController sync AudioDecoder Platform WMF AudioRenderer VideoRenderer AudioRenderSink VideoRenderSink 声卡 GPU VideoDecoder libvpx DX11

9. Chrome的渲染核心机制 GPU Sandbox RendererSandbox • Overlay（Surface） MOJO • GPU缓冲区 Audio Sandbox

10. WebPlayer 你到底干了什么？ CDN WebPlayer .m3u8 Downloader PlayListManager • 如何减少内存占用？ • 数据吞吐如何更高效？ BufferControl .ts • 如何优化下载策略，应对网络抖动或者拥塞？ • 用户卡了怎么办？ • 如何横向支持多种流媒体协议而不影响现有播放架构 Transmuxer .mp4 Browser <Video/> SourceBuffers • 分片音视频时间戳对齐怎么做 • 音画不同步如何避免

11. 面向C端播放场景业务实践——用户体验 “歪优酷客服么，我这里是XXX大学的，我们整个宿舍楼看优酷都卡成狗了，赶紧处理一下哈。影响这么大补偿个优酷vip吧” “喂是优酷客服么，劳资电脑2080Ti显卡 500M光纤，看个优酷一直一卡一卡的，怎么回事啊，至少给个优酷vip吧，弥补下精神损失啊”

12. 分析手段两板斧 🪓 网络分析 • 网速收集 • 出口IP/CDN IP 收集 🪓 行为分析 • 播放器事件流收集 • 播放器buffer快照网速采样+简单拟合 Waiting->Playing->Pause->Play->Waiting->Lag 0-63,80-100,102-300 LOADED|APPENDED|INIT

13. 网络相关流畅度网络原因分布 ABR算法并发下载其他本地网络 P2P(WebRTC) CDN调度 DNS解析主动调度域名切换

14. 数据相关流畅度 “坑” 跳过去不同浏览器对于GAP的容忍度不一样音频的GAP必须要处理填上它

15. 数据相关流畅度流式加载 Stream API Fetch->response->getReader() MSE fmp4 fmp4 Transmux Cache push eos Download Cache

16. WebAssembly 移花接木

17. 它山之石可以攻玉 + FFMPEG WebAssembly

18. “大人时代变了！” Chrome 107版本正式支持H265硬解

19. VS Pthread 线程回调锁与线程同步数据传递

20. Renderer恒久远，一套永流传 MediaEngine Demuxer Decoder 数据调度 Renderer VideoBuffer VideoFrame AudioBuffer AudioData Upload bind attach Canvas(WebGL) SourceNode Schedule Shader Device Texture WebAudio

21. WebCodecs 拥抱次世代

22. .mp4 EncodedVideoChunk VideoEncoder VideoDecoder VideoFrame Draw Canvas Remuxer Demuxer EncodedAudioChunk AudioEncoder AudioDecoder AudioData Transform WebAudio

23. “世界是C、Java的也是JS的，但终究是JS的” 转封装 Media File 编解码 Demuxer Packet Parser Packet (Parsed) Stream Codec Decoder Encoder Frame Renderer Remuxer Media File

24. 结语 Flash <Video/> MSE WASM WebCodecs 混沌初开初代春日起承转合次世代

25. 扫码回复「D2」获取第十七届 D2 演讲 PDF 材料后续也将推送 D2 会后技术文章，敬请关注！！

26. 感谢大家观看