流媒体web端播放技术有哪些？

目前流媒体的传统几大领域(安防、直播、视频会议)技术栈正在逐渐融合，技术边界越来越模糊，用户迫切的需要摆脱传统使用习惯的枷锁，在移动端、web端、小程序能随时随地的观看云端实时视频。本文由 zlmediakit 核心开发者 big panda 编写, 将为我们聊聊web端流媒体播放主流技术有哪些。

MSE

如上图所示，MSE(Media Source Extension)是通过向video标签中的sourceBuffer 填充fmp4数据来实现播放的功能，如何因此播放的关键是在于如何生成fmp4,同时控制好音频与视频时间戳的同步，解码渲染由浏览器控制，播放器只能通过时间戳来间接影响。该技术由浏览器负责解码渲染，可以使用硬件加速，性能较好，但是延时稍高，目前该技术在直播领域应用广泛，流行的hls/dash/http-flv/http-fmp4等直播技术都依赖MSE。

典型应用 flv.js[1] mpegts.js[2] 等等

wasm

wasm是将C/C++代码（也可以是其他语言如go等）编译为一种中间代码类似llvm,然后加载到浏览器中运行，从而获得接近原生运行的速度，主要应用在编解码，加解密等一系列计算密集型的场景中。

在web音视频的主要开发中，主要是用来，做音视频的编解码（浏览器不支持的），如h265解码，silk的编解码，也可用于封装通讯协议来起到提高安全性的作用。

如果要基于wasm来开发播放器，视频渲染要基于webgl来做，音频播放要基于AudioWorklet来做，请参考第5与第6点。该技术目前还在迅速发展阶段，性能还不是很理想，对于一些高分辨率的视频支持不友好(播放可能卡顿)，非常耗费cpu计算性能，电脑发热比较严重。该技术主要用于解决浏览器不支持H265的情况，不过随着chrome浏览器对H265硬件解码的支持，目前该技术比较尴尬。

典型应用 h265web.js[3] jessibuca[4]

webcodec

主要是浏览器提供了关于音视频编解码的标准接口，主要是chrome浏览器支持，firefox 没有支持，主要优点是是可以通过浏览器直接使用硬件解码的能力。

如果要基于此来开发播放器，解封装，渲染，播放等需要自己来做，参考如下的工程。视频渲染要基于webgl来做，音频播放要基于AudioWorklet来做，请参考第5与第6点。webcodec是一种新颖的技术，目前标准化工作正在有条不紊展开，各浏览器支持情况参差不齐；不过该技术支持硬件加速，也非常灵活，可能会成为未来web端流媒体播放的主流技术。

webcodec-player[5]

webrtc

webrtc 播放器与推流器，比较简单，主要涉及到音视频的采集，sdp的交换（offer-answer模型），播放通常是通过video标签来实现。webrtc技术经过十多年发展，目前已趋于稳定，在各大主流浏览器(包括微信)都支持，该技术抗弱网和低延时特性是其主要特色，非常适合视频会议、低延时安防等领域需求。

官方demo[6] zlmrtcclient.js[7]

视频渲染

web端播放器的视频渲染，要么是通过video标签来实现，要么是通过webgl 来实现，如MSE webrtc 等都是通过video标签来实现视频渲染，由浏览器控制。其他如wasm,webcodec等相关的渲染只能通过webgl来实现。如果了解opengl 对于webgl 就比较容易上手。

参考[8]

音频采集与播放

如上图所示，web音频处理是由一条管线（由AudioContext表示其上下文），主要分为三大部分，输入节点（麦克风等，叫source），处理节点（增益调节等，可以有多个），输出节点(喇叭等，叫destinations)，音频的采集与播放主要是通过特殊的处理节点来实现，将麦克风的数据拦截就是采集，然后将音频发送给喇叭就是播放。

音频采集与播放是通过AudioWorkletNode来实现的，AudioContext可以理解为音频处理管线的上下文，AudioWorklet是一种节点（可以嵌入js代码），可以捕获到原始音频数据，同时也可以将原始音频数据送给喇叭。还有一系列其他节点如调整音量增益等

文档[9] AudioWorklet[10]

参考资料

这些的相关的技术资料，建议大家区看MDN,这里面有一些demo与概念介绍MDN[11]

外链
[1] [flv.js](https://github.com/bilibili/flv.js)
[2] [mpegts.js](https://github.com/xqq/mpegts.js)
[3] [h265web.js](https://github.com/numberwolf/h265web.js)
[4] [jessibuca](https://github.com/langhuihui/jessibuca)
[5] [webcodec-player](https://github.com/sunjun/webcodec-player)
[6] [官方demo](https://webrtc.github.io/samples/)
[7] [zlmrtcclient.js](https://github.com/ZLMediaKit/ZLMRTCClient.js)
[8] [参考](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/By_example)
[9] [文档](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
[10] [AudioWorklet](https://developer.mozilla.org/en-US/docs/Web/API/AudioWorklet)
[11] [MDN](https://developer.mozilla.org/en-US/docs/Web/API)