HLS与RTMP实现[视频直播一]

ゝ一世哀愁。 2023-02-24 13:27 46阅读 0赞

**小编前言**  
最近听说视频直播火了，好多都是视频带货的。小编很多年以前就喜欢流媒体相关的东西，现在入手虽说有点晚，但也算有所了解。  
目前主流的视频直播方案有HLS和RTMP，移动端以HLS为主，PC端以RTMP为主。

# HLS #

HTTP Live Streaming（简称 HLS）是一个基于 HTTP 的视频流协议，听说是苹果公司搞的，因此苹果机上很好的支持，高版本的Android也支持。  
HLS 协议基于 HTTP，而一个提供 HLS 的服务器需要做两件事：  
**1、编码：**  
以 H.263 格式对图像进行编码；  
以 MP3 或者 HE-AAC 对声音进行编码；  
最终打包到 MPEG-2 TS（Transport Stream）容器之中；  
**分割：**  
把编码好的 TS 文件等长切分成后缀为 ts 的小文件，并生成一个 .m3u8 的纯文本索引文件，浏览器使用的是 m3u8 文件；  
m3u8 跟音频列表格式 m3u 很像，可以简单的认为 m3u8 就是包含多个 ts 文件的播放列表；  
播放器按顺序逐个播放，全部放完再请求一下 m3u8 文件，获得包含最新 ts 文件的播放列表继续播，周而复始。  
整个直播过程就是依靠一个不断更新的 m3u8 和一堆小的 ts 文件组成，m3u8 必须动态更新，ts 可以走 CDN。  
**一个典型的 m3u8 文件格式如下：**

#EXTM3U
        #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000
        gear1/prog_index.m3u8
        #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111
        gear2/prog_index.m3u8
        #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=484444
        gear3/prog_index.m3u8
        #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777
        gear4/prog_index.m3u8

**【拓展】**  
HLS协议本质上还是一个http请求/响应。  
但是它的延迟非常明显，延迟的长度基于循环体的大小。循环体太小又会带来频繁的缓冲，各种体验都不好。

若是浏览器支持HLS，则可以这么写：

**【遗憾的是】**  
HLS 在 PC 端仅支持safari浏览器；  
标签无法播放 m3u8 格式，可直接采用网上一些比较成熟的方案，如：sewise-player、MediaElement、videojs-contrib-hls、jwplayer。

# RTMP #

Real Time Messaging Protocol（简称 RTMP）是 Macromedia 开发的一套视频直播协议，现在属于 Adobe。  
这套方案需要搭建专门的 RTMP 流媒体服务如 Adobe Media Server，并且在浏览器中只能使用 Flash 实现播放器。  
它的实时性非常好，延迟很小，但无法支持移动端 WEB 播放是它的硬伤。  
浏览器端，HTML5 video标签无法播放 RTMP 协议的视频，可以通过 video.js 来实现。

**【结构】**  
目前的直播展示形式，结构分三部分：  
1、背景视频  
2、关注与评论  
3、点赞动画  
**【实现方式】**  
1、底部视频背景通过video实现播放  
2、关注、评论模块利用websocket实现发送和接收新的消息，通过dom和css3实现  
3、点赞利用css3动画。

**【直播流程】**  
1、视频采集端：电脑、手机端、麦克风  
2、直播流视频服务端：Nginx服务器、采集视频录制端传输的视频流H264/ACC，由服务器端进行解析编码，推送到视频流播放端。  
3、视频播放端：电脑端、手机端。

**【PC网页端基于H5视频录制】**  
使用webRTC（Web Real-Time Communication）是一个支持网页浏览器进行实时语音对话或视频对话的技术，缺点是只在 PC 的 Chrome 上支持较好，移动端支持不太理想。  
**使用 webRTC 录制视频基本流程**  
① 调用 window.navigator.webkitGetUserMedia()获取用户的PC摄像头视频数据。  
② 将获取到视频流数据转换成 window.webkitRTCPeerConnection(一种视频流数据格式)。  
③ 利用 WebScoket将视频流数据传输到服务端。  
**【注意:】**  
webRTC的支持度还不完善，移动端大部分不支持。  
**iOS原生应用调用摄像头录制视频流程**  
① 音视频的采集，利用AVCaptureSession和AVCaptureDevice可以采集到原始的音视频数据流。  
② 对视频进行H264编码，对音频进行AAC编码，在iOS中分别有已经封装好的编码库（x264编码、faac编码、ffmpeg编码）来实现对音视频的编码。  
③ 对编码后的音、视频数据进行组装封包。  
④ 建立RTMP连接并上推到服务端。