H5直播实现方案

视频编码格式

视频文件格式（容器格式）
视频编解码器（视频编码格式）
视频一开始由两个端采集，视频输入口、音频输入口。采集的数据会分别进行相关处理，简而言之就是：将视频/音频流通过一定的手段转换为比特流并且压缩，最终，这里将比特流以一定顺序放到一个盒子里进行存放，从而声称我们最终所看到的音视频格式。如：mp3/mp4/flv

常用直播协议

协议	原理	传输协议	播放器	延时	兼容
RTMP	每个时刻的数据收到后立即转发	TCP	flash	1-3s	需要flash播放器，H5上依赖第三方插件(如：video.js )
HLS	集合一段时间的数据m3u8，生成ts切片文件，播放完一个列表，在更新下一个列表	HTTP	`video`	5-20s	H5上直接可播放
HTTP-FLV	同RTMP	HTTP	`video`	1-3s	依赖第三方插件，IOS无法播放

RTMP

RTMP，全称 Real Time Messaging Protocol，即实时消息传送协议，基于TCP。是 Macromedia 开发的一套视频直播协议，现在属于 Adobe，可用于拉流和推流。基于TCP。协议中的基本数据单元成为消息（Message），传输的过程中消息会被拆分为更小的消息块（Chunk）单元。最后将分割后的消息块通过 TCP 协议传输，接收端再反解接收的消息块恢复成流媒体数据

使用方法

使用第三方插件video.js，因为video.js把flash的兼容去掉了，还需使用videojs-flash

优势

RTMP是专为流媒体开发的协议，对底层优化比其他协议更加优秀，同时他Adobe flash支持好，基本上所有的编码器（摄像头之类）都支持RTMP输出
RTMP由TCP长连接协议，所以客户端向服务端推流这些操作而言，延时性很低。
pc 主要是 windows ，windows的浏览器基本都支持flash，另外 RTMP适合长时间播放
最后RTMP的延迟相对较低，一般延时1-3s

劣势

使用Flash播放，现在各大浏览器厂商已经默认禁用Flash
基于TCP协议，非公共端口，可能会被防火墙阻拦

HLS

HLS全称HTTP Live Streaming，是一个基于http的流媒体通信协议，由Apple公司实现，只能用于拉流，在移动端上的兼容性非常好，是移动端的主流直播解决方案。

HLS的工作原理简单来说就是把一段视频流，分成一个个小的基于HTTP的文件来下载。当媒体流正在播放时，客户端可以根据当前网络环境，方便地在不同的码率流中做切换，以实现更好的观影体验。

使用方法

直接使用标签播放

为更好的兼容性，也可以使用videoJS，但是还需要多引入一个插件 videojs-http-streaming

HLS协议拉到的视频格式是 .m3u8（无法用浏览器直接打开，可以下载VLC这个工具来播放），下图是一个m3u8的文件在浏览器中播放，浏览器获取m3u8的文件后，会再去下载一个.m3u8的文件，注意此时的文件类型是m3u，浏览器会根据这个文件的playlist去下载ts文件，也就是视频切片（这个地址可以直接复制到浏览器打开），然后按顺序播放ts文件。当一个playlist的ts文件播放完后，浏览器会再去下载m3u8文件，获取新的playlist，周而复始。

m3u8 文件信息

#EXTM3U                            # m3u文件头
#EXT-X-VERSION:3 
#EXT-X-MEDIA-SEQUENCE:2133         # 第一个TS分片的序列号
#EXT-X-TARGETDURATION:6            # 每个分片TS的最大时长
#EXTINF:6.375,                     # 指定每个媒体段(ts)的持续时间，仅对后面的 URI 有效
huputv-ali-live.arenacdn.com_SFlDeHJTSU51NTdV_pbk550-1587696415663.ts?auth_key=1587706605-0-0-10fedd520ec472c1a5dc39d0dcf2984f
#EXTINF:6.375,
huputv-ali-live.arenacdn.com_SFlDeHJTSU51NTdV_pbk550-1587696421958.ts?auth_key=1587706605-0-0-c8d8918ccba170a99f518b55aa2ea290
#EXTINF:6.375,
huputv-ali-live.arenacdn.com_SFlDeHJTSU51NTdV_pbk550-1587696428405.ts?auth_key=1587706605-0-0-f00ab35ac2c77091ac1e7ef693cde112
#EXTINF:6.375,
huputv-ali-live.arenacdn.com_SFlDeHJTSU51NTdV_pbk550-1587696434822.ts?auth_key=1587706605-0-0-08051ceb940b5d0a52292ab9c6e510dd
#EXTINF:6.375,
huputv-ali-live.arenacdn.com_SFlDeHJTSU51NTdV_pbk550-1587696441198.ts?auth_key=1587706605-0-0-fba4c6b281980017fa08a6139fc74a9d
#EXTINF:6.375,
huputv-ali-live.arenacdn.com_SFlDeHJTSU51NTdV_pbk550-1587696447480.ts?auth_key=1587706605-0-0-c3b335be3abe37b37af3339875610851

HLS的延时高的原因之一是，要生成切片才能推送数据，如果每个 ts 按照 5 秒来切分，一个 m3u8 放 6 个 ts 索引，那么至少就会带来 30 秒的延迟。如果减少每个 ts 的长度，减少 m3u8 中的索引数，延时确实会减少，但会带来更频繁的缓冲，对服务端的请求压力也会成倍增加。所以只能根据实际情况找到一个折中的点。

项目中的一个小问题

在项目中，这个m3u8的地址是由前端通过接口请求后端得到的，而我们后端也是需要去像厂家拉流，这就存在一个问题，有可能后端把地址推送给我们了，但是ts文件还未生成，也就是没有playlist，这时候就会导致视频播放错误，可以通过video的onerror事件监听，把m3u8的地址重新赋值给video的src属性。

优势

使用H5标签即可播放
穿透防火墙。基于 HTTP/80 传输，有效避免防火墙拦截
性能高。通过 HTTP 传输，支持网络分发，CDN 支持良好，且自带多码率自适应，Apple 在提出 HLS 时，就已经考虑了码流自适应的问题

劣势

延时较高，HLS 的延迟基本在 10s+ 以上
会下载非常多的ts文件

HTTP-FLV

FLV (Flash Video) 是 Adobe 公司推出的另一种视频格式，文件后缀.flv，是一种在网络上传输的流媒体数据存储容器格式。HttpFlv 就是 http+flv，将音视频数据封装成FLV格式，然后通过 HTTP 协议传输给客户端。

使用方法

使用B站的开源方案flv.js插件，该插件依赖于Media Source Extensions，而Media Source Extensions在IOS上兼容性很差，但在ipadOS13以上全支持（这个大家可以持续关注下）

优势

延时低
基于http协议，可穿透防火墙
不依赖Flash

劣势

移动端IOS设备兼容性差

DASH

DASH的全称是Dynamic Adaptive Streaming over HTTP，是HLS的一种可替代方案。youtube用的是DASH。DASH会通过media presentation description (MPD)将视频内容切片成一个很短的文件片段，每个切片都有多个不同的码率，DASH Client可以根据网络的情况选择一个码率进行播放，支持在不同码率之间无缝切换。

可使用插件dash.js来播放