网页中的直播

以前的工做一直是在负责公司直播产品的网页前端开发，本文是对网页直播的一个总结。下面我会以直播协议为基础，以及各个协议在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站开源的。

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的直播方案，不过目前应用都不是很普遍，本文就先不讲了。

参考资料

1. RTMP WIKI
2. HTTP-FLV WIKI
3. flv.js 参考
4. HLS 协议详解及 HLS 速度优化
5. H5直播起航