网页中的直播

之前的工作一直是在负责公司直播产品的网页前端开发，本文是对网页直播的一个总结。下面我会以直播协议为基础，以及各个协议在PC、H5（这里指手机网页）的表现来进行总结。

网页直播常用到的流媒体协议有RTMP、HDL(HTTP-FLV)、HLS这3种。

RTMP

实时消息协议（英语：Real-Time Messaging Protocol，缩写RTMP）也称实时消息传输协议，是最初由Macromedia为通过互联网在Flash播放器与一个服务器之间传输流媒体音频、视频和数据而开发的一个专有协议。Macromedia后被Adobe Systems收购，该协议也已发布了不完整的规范供公众使用。wiki

RTMP协议的延迟较低，一般都在3s左右。

在移动端的web端是完全不支持播放RTMP的直播流的。

在pc端只能在基于flash的播放器上播放。pc网页上支持rtmp协议的播放器还不少，比如video.js+falsh plugin、百度的cyberplayer、腾讯的TCPlayerLite、jwplayer。

虽然这样，都是由于其低延迟的特点，并且RTMP 协议为流媒体而设计，在推流（obs推流）中用的比较多，同时大多 CDN 厂商支持RTMP 协议，所以目前国内的很多直播产品都会使用这种直播协议，我们在pc网页上的直播也是rtmp的协议的。

RTMP 直播示例代码
使用video.js和videojs-flash播放rtmp直播流，手机不支持

<video id="rtmp_player" width="600" height="400" controls class="video-js vjs-default-skin">
  <source src="rtmp://58.200.131.2:1935/livetv/hunantv" />
</video>
<script src="//cdn.bootcss.com/video.js/7.6.0/alt/video.core.min.js"></script>
<script src="//cdn.bootcss.com/videojs-flash/2.2.0/videojs-flash.min.js"></script>
<script>
  const player = videojs('rtmp_player', () => {
    console.log('rtmp player init complete');
  });
</script>

HDL(HTTP-FLV)

HTTP-FLV，即将音视频数据封装成FLV，然后通过HTTP协议传输给客户端。它使用类似 RTMP流式的 HTTP 长连接，需由特定流媒体服务器分发的，兼顾两者的优点。以及可以复用现有 HTTP 分发资源的流式协议。它的实时性和 RTMP 相等，与 RTMP 相比又省去了部分协议交互时间（可以比RTMP做到更低的延迟），首屏时间更短，可拓展的功能也更多。

HTTP-FLV的延迟和RTMP差不多，可以做到比RTMP更低一点。

在pc网页端，我们可以通过flv.js（flv.js需要依赖一些浏览器新特性的，需要HTML5 Video、MSE、WS）来播放HTTP-FLV的流。顺便说一下flv.js的主要原理，在获取到FLV格式的音视频数据后通过原生的JS去解码FLV数据，再通过MSE把blob给原生HTML5 Video播放。同样也可以通过基于flash的播放器来兼容播放。（需要注意跨域，http/https混合使用等问题）

遗憾的是由于MSE在移动端的支持较差(目前只有安卓4.4.4以上支持，苹果只有iPadOS 13支持can i use) ，所以HTTP-FLV直播在移动网页上的使用也很少（苹果大部分不支持就很悲伤）。

目前来讲HTTP-FLV在pc端的使用还是挺多的，因为它可以脱离flash直接播放（flash太耗费性能了，特别是苹果电脑上，看一下视频风扇就呼呼的），例如斗鱼，我们可以打开他的网页F12可以看到video中的地址是blob:xxx这样的形式，基本可以判断是基于flv.js或者其他类似方案实现的。斗鱼图片

当然了b站也是的，毕竟flv.js就是b站开源的。 b站图片

HTTP-FLV 直播示例代码
使用flv.js播放

<video id="flv_player" width="600" height="400" controls></video>
<script src="//cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
<script>
  if (flvjs.isSupported()) {
    var flvVideo = document.getElementById('flv_player');
    var flvPlayer = flvjs.createPlayer({
      type: 'flv',
      url: 'http://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1.flv'
    });
    flvPlayer.attachMediaElement(flvVideo);
    flvPlayer.load();
    flvPlayer.play();
  }
</script>

HLS

HTTP Live Streaming（缩写是HLS）是一个由苹果公司提出的基于HTTP的流媒体网络传输协议。是苹果公司QuickTime X和iPhone软件系统的一部分。它的工作原理是把整个流分成一个个小的基于HTTP的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。在开始一个流媒体会话时，客户端会下载一个包含元数据的extended M3U (m3u8) playlist文件，用于寻找可用的媒体流。wiki

HLS协议是苹果强推的一套协议，它有live和vod两种模式（支持直播以及录播视频）。目前在移动端网页支持较好，pc网页上只有safrai和edge浏览器支持。

简单介绍下HLS直播的工作模式，HLS 协议将视频流（包含图像以及声音）编码打包到 MPEG-2 TS容器中去，然后将把编码好的 TS 文件等长切分成后缀为 ts 的小文件，并生成一个.m3u8的纯文本索引文件；客户端播放器HLS直播就是请求.m3u8索引文件，获取到ts列表依次播放，播放结束之后再请求下一个.m3u8索引文件。

上面讲的可以知道HLS的延迟会很高，直播一般来说一个m3u8会包含3个切片，每个切片至少是2s~3s，在加上网络延迟，基本延迟会达到10s左右。

虽然延迟很高，但是移动端网页基本都支持，所以HLS是手机H5直播的最佳选择。

pc上除了safrai浏览器和efge浏览器可以直接播放，其他浏览器可以通过mediaelement、hls.js、videojs-contrib-hls（这几种是通过ajax请求hls流然后来播放的，所以会有跨域，http/https不能混合使用等问题，如果使用基于flash的播放器则没有这些问题）等来播放。

HLS 直播示例代码
使用hls.js播放，手机上直接用video播放即可

<video id="hls_player" width="600" height="400" controls></video>
<script src="//cdn.bootcss.com/hls.js/8.0.0-beta.3/hls.min.js"></script>
<script>
  const hlsVideo = document.getElementById('hls_player');
  if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource('xxx.m3u8');
    hls.attachMedia(hlsVideo);
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      hlsVideo.play();
    });
  }
</script>

总结

目前网页直播pc上主要采用的协议为RTMP与HDL(HTTP-FLV)，手机上主要是HLS协议。

此外还有基于webrtc、ws+canvas的直播方案，不过目前应用都不是很广泛，本文就先不讲了。

RTMP

HDL(HTTP-FLV)

HLS

总结

参考资料