H5 直播

常用视频编码：MPEG、H264、RealVideo、WMV、QuickTime

常用音频编码：PCM、WAV、OGG、APE、AAC、MP3、Vorbis、Opus

常见的直播协议：

1. RTMP: 底层基于 TCP，在浏览器端依赖 Flash。
2. HTTP-FLV: 基于 HTTP 流式 IO 传输 FLV，依赖浏览器支持播放 FLV。
3. WebSocket-FLV: 基于 WebSocket 传输 FLV，依赖浏览器支持播放 FLV。WebSocket 建立在 HTTP 之上，建立 WebSocket 连接前还要先建立 HTTP 连接。
4. HLS: Http Live Streaming，苹果提出基于 HTTP 的流媒体传输协议。HTML5 可以直接打开播放。
5. RTP: 基于 UDP，延迟 1 秒，浏览器不支持。

直播整体流程

录制->编码->网络传输（推流->服务器处理->CDN 分发）->解码->播放

1. 视频采集端：可以是电脑上的音视频输入设备、或手机端的摄像头、或麦克风，目前以移动端手机视频为主。

2. 直播流视频服务端：一台 Nginx 服务器，采集视频录制端传输的视频流(H264/ACC 编码)，由服务器端进行解析编码，推送 RTMP/HLS 格式视频流至视频播放端。

3. 视频播放端：可以是电脑上的播放器（QuickTime Player、VLC），手机端的 native 播放器，还有就是 H5 的 video 标签等，目前还是以手机端的 native 播放器为主。

直播流

直播流（Live streaming）和静态文件播放的关键差异：

1. 点播的目标文件通常位于服务器上，具有一定的播放时长、文件大小。浏览器可以使用渐进式下载，一边下载一边播放

2. 直播不存在播放起点、终点。它表现为一种流的形式，源源不断的从视频采集源通过服务器，传递到客户端

3. 直播流通常是自适应的（adaptive），其码率随着客户端可用带宽的变化，可能变大、变小，以尽可能消除延迟

参考：https://www.cnblogs.com/aixing/p/13327135.html (opens new window)

视频流协议

HLS 与 RTMP

HLS

HLS 全称是 HTTP Live Streaming。是一个基于 HTTP 的视频流协议，这是 Apple 提出的直播流协议。

一个提供 HLS 的服务器需要做两件事：

1. 编码：以 H.263 格式对图像进行编码，以 MP3 或者 HE-AAC 对声音进行编码，最终打包到 MPEG-2 TS（Transport Stream）容器之中；

2. 分割：把编码好的 TS 文件等长切分成后缀为 ts 的小文件，并生成一个 .m3u8 的纯文本索引文件；

HLS 首次连接时，总共的延时：

1. TCP 握手，

2. m3u8 文件下载，

3. m3u8 下的 ts 文件下载

RTMP

RTMP (Real Time Messaging Protocol)是 Adobe 公司开发的一套视频直播协议，基于 flash，因此，无法在 ios 的浏览器中使用,但是其实时性较好，延时可以低至两秒。

特性：

1. 基于 TCP

2. 浏览器端依赖 Flash 进行播放

3. 2~5 秒的延迟

缺点：

1. 无法支持移动端 WEB 播放

2. 无法在 iOS 的 H5 页面播放，但是对于 iOS 原生应用是可以自己写解码去解析的

3. HTML5 video 标签无法播放 RTMP 协议的视频，可以通过 video.js 来实现。

HTTP-FLV

https://www.cnblogs.com/qianduantuanzhang/p/7795044.html (opens new window)

flv.js

1. Bilibli 开源，解析 flv 数据，通过 MSE 封装成 fMP4 传给 video 标签

2. 编码为 H264+AAC

3. 使用 HTTP 的流式 IO(fetch 或 stream)或 WebSocket 协议流式的传输媒体内容

4. 2~5 秒的延迟，首帧比 RTMP 更快

原理：flv.js 在获取到 FLV 格式的音视频数据后将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，再通过 Media Source Extensions API 传递给原生 HTML5 Video 标签进行播放。

flv.js 是使用 ECMAScript 6 编写的，然后通过 Babel Compiler 编译成 ECMAScript 5，使用 Browserify 打包。

flv.js 从服务器获取 FLV 再解封装后转给 Video 标签的原因如下：

1. 兼容目前的直播方案：目前大多数直播方案的音视频服务都是采用 FLV 容器格式传输音视频数据。
2. flv 格式简单，相比于 MP4 格式转封装简单、性能上也占优势，解析起来更快更方便。