让Chrome看不了WWDC直播的HLS技术详解

Requirements: Live streaming uses Apple’s HTTP Live Streaming (HLS) technology. HLS requires an iPhone, iPad, or iPod touch with Safari on iOS 7.0 or later, a Mac with Safari 6.0.5 or later on OS X v10.8.5 or later, or a PC with Microsoft Edge on Windows 10. Streaming via Apple TV requires an Apple TV (2nd or 3rd generation) with software 6.2 or later or an Apple TV (4th generation).

HLS （HTTP Live Streaming）, 是由 Apple 公司实现的基于 HTTP 的媒体流传输协议。Apple 的全系列产品支持，由于 HLS 是苹果提出的，所以在 Apple 的全系列产品包括 iphone、 ipad、safari 都不需要安装任何插件就可以原生支持播放 HLS，现在Android 也加入了对 HLS 的支持。但PC端目前除了Microsoft Edge外，Chrome、Firefox等浏览器均不支持该协议的播放。

HLS跟 DASH 协议的原理非常类似，通过将整条流切割成一个小的可以通过 HTTP 下载的媒体文件，然后提供一个配套的媒体列表文件给客户端，让客户端顺序地拉取这些媒体文件播放, 来实现看上去是在播放一条流的效果。HLS 目前广泛地应用于点播和直播领域。

在HTML5页面上使用HLS

HLS 的优势

客户端支持简单，只需要支持 HTTP 请求即可，HTTP 协议无状态，只需要按顺序下载媒体片段即可。
使用 HTTP 协议网络兼容性好， HTTP 数据包也可以方便地通过防火墙或者代理服务器，CDN 支持良好。
自带多码率自适应，Apple 在提出 HLS 时，就已经考虑了码流自适应的问题。

HLS 的劣势

相比 RTMP 这类长连接协议，延时较高，难以用到互动直播场景。
对于点播服务来说，由于 TS 切片通常较小，海量碎片在文件分发、一致性缓存、存储等方面都有较大挑战。
虽然HLS存在明显劣势，又拍云对此也有相应的解决方案。

HLS 协议详解

上图可以看出，HLS总共有三个部分: Serve、CDN、Client。HLS 协议的主要内容是关于 M3U8 这个文本协议，其实生成与解析都非常简单，示例如下：

△简单的 Media Playlist

△包含多种比特率的 Master Playlist

HLS优化技术

由于客户端每次请求 TS 或 M3U8 有可能都是一个新的连接请求，所以,我们无法有效的标识客户端，一旦出现问题，基本无法有效的定位问题，因此一般工业级的服务器都会对传统的 HLS 做一些改进。本文主要介绍又拍云的 HLS+。
HLS+ ，又称为流式 HLS 技术，是将标准的 HLS 进行流式处理，大幅度降低标准 HLS 延迟，H5 端直播兼容性更好，且具有回源量小、系统简单、排错容易、防盗链、避免 HLS 404 等优势。
1、Variant HLS
首先，下载一条又拍云的 M3U8 文件：
wget http://uplive.bo.upaiyun.com/...
然后，打开下载得到的 playlist 文件：

可以看出又拍云的 HLS+ 也支持这种 Variant HLS 方式来标识一条 HLS 连接，可以看出，又拍云使用 uuid 来表示一条 HLS 连接。

2、HTTP 302
首先，以 HTTP 302 方式来请求播放地址。

打开 playlist 内容：

在跳转之后的地址存放真正的 playlist，同时也能够将 uuid 加入到了连接上。
总地来说，不管通过哪种方式，最终我们都能通过一个唯一的 id 来标识一条流，这样在排查问题时就可以根据这个 id 来定位播放过程中的问题。

四、HLS 延时分析

为了追求低延时效果，可以将切片切的更小，取片间隔做的更小，播放器未取到 3 个片就启动播放。但是这些优化方式都会增加 HLS 不稳定和出现错误的风险。
五、如何让HLS能在Chrome等设备上播放

目前直播大多采用HTTP（HLS、HTTP-FLV）和RTMP协议进行推流。我们可以通过CDN服务进行转协议播放，无论采用HTTP还是RTMP协议推流，最终达到均支持 RTMP、HTTP-FLV 和 HLS 播放的效果。

Demo：

M3U8 golang library

（https://godoc.org/github.com/osrtss/rtss/m3u8）

HLS downloader: 读取一个 m3u8 URL，下载为 TS 文件。

（https://github.com/osrtss/rtss/tree/master/m3u8/example/hlsdownloader）