H5直播实现方案

Demo地址

视频编码格式

  • 视频文件格式(容器格式)
  • 视频编解码器(视频编码格式)
  • 视频一开始由两个端采集,视频输入口、音频输入口。采集的数据会分别进行相关处理,简而言之就是:将视频/音频流通过一定的手段转换为比特流并且压缩,最终,这里将比特流以一定顺序放到一个盒子里进行存放,从而声称我们最终所看到的音视频格式。如: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 文件信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#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来播放

第三方插件

适用于 Vue 的 video.js播放器组件

参考文章和资料

Apple官方的HLS文档
RTMP、HTTP-FLV、HLS,你了解常见的三大直播协议吗
理解RTMP、HttpFlv和HLS的正确姿势
HTML5 视频直播(一)
HTTP Live Streaming
我们为什么使用DASH
使用flv.js做直播

参考地址:
https://github.com/Tiramisupxl/blog/issues/1
https://segmentfault.com/a/1190000037750253

坚持原创技术分享,您的支持将鼓励我继续创作!
0%