H5直播开发：直播类H5如何实现，开发方案是什么

直播类H5开发目前是非常火的，很多商家都急切的蹭一波热度。

目前WEB上主流的H5视频直播方案有HLS和RTMP移动WEB端目前以HLS为主（HLS存在延迟性问题，也可以借助video.js采用RTMP），PC端则以RTMP为主实时性较好，接下来将围绕这两种视频流协议来展开H5直播实现方案解说。

- H5直播技术保障

采用动态云服务器扩容技术，可以接受大流量高并观看，并保障观看质量，同时节约成本。

- H5直播画面质量

在上行网络足够保障清晰度传输的前提下，平台不设清晰度限制，您可以根据需要自己设定画面的清晰格式。通过平台低损耗转、解码传输，保障画面质量。

- 高并发支撑

不需要担心观看人数的太多会挤爆服务器，动态扩容技术让可以保障观看的同时，节省不必要的成本支出。

- CDN加速

使用阿里云直播CDN服务，将视频内容分发给全国500+节点，缩短用户收看延时，提高视频响应速度。

- 动态负载

全部采用阿里云服务器，运用动态负载均衡技术，提供短时间服务器扩容能力，在出现高峰访问时，可以从容应对。

一、视频流协议HLS与RTMP

1. HTTP Live Streaming

HTTP Live Streaming（简称 HLS）是一个基于 HTTP 的视频流协议，由 Apple 公司实现，Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari都能很好的支持 HLS，高版本 Android 也增加了对 HLS 的支持。一些常见的客户端如：MPlayerX、VLC 也都支持 HLS 协议。

HLS 协议基于 HTTP，而一个提供 HLS 的服务器需要做两件事：

编码：以 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。

HLS 协议本质还是一个个的 HTTP 请求 / 响应，所以适应性很好，不会受到防火墙影响。但它也有一个致命的弱点：延迟现象非常明显。如果每个 ts 按照 5 秒来切分，一个 m3u8 放 6 个 ts 索引，那么至少就会带来 30 秒的延迟。如果减少每个 ts 的长度，减少 m3u8 中的索引数，延时确实会减少，但会带来更频繁的缓冲，对服务端的请求压力也会成倍增加。所以只能根据实际情况找到一个折中的点。

2. Real Time Messaging Protocol

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

虽然无法在iOS的H5页面播放，但是对于iOS原生应用是可以自己写解码去解析的, RTMP 延迟低、实时性较好。

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

3. 视频流协议HLS与RTMP对比

二、H5直播形式

目前直播界面展示形式，页面结构通常可以看到其分成三层：

1. 背景视频层

2. 关注、评论模块

3. 点赞动画

而现行H5直播页面，其可以通过实现方式分为：

1. 底部视频背景使用video视频标签实现播放。

2. 关注、评论模块利用 WebScoket 来实时发送和接收新的消息通过DOM 和 CSS3 实现。

3. 点赞利用 CSS3 动画。

了解完直播形式之后，接下来整体了解直播流程。

三、H5直播整体流程

直播整体流程大致可分为三大流程：

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

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

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

四、H5录制视频

对于H5视频录制，可以使用强大的 webRTC （Web Real-Time Communication）是一个支持网页浏览器进行实时语音对话或视频对话的技术，缺点是只在 PC 的 Chrome 上支持较好，移动端支持不太理想。

虽然Google一直在推WebRTC，目前已有不少成型的产品出现，但是大部分移动端的浏览器还不支持 webRTC（最新iOS 10.0也不支持），所以真正的视频录制还是要靠客户端（iOS,Android）来实现,效果会好一些。

所以主播端建议用iOS原生应用调用摄像头录制视频，其流程大致为：

1. 音视频的采集，利用AVCaptureSession和AVCaptureDevice可以采集到原始的音视频数据流。

2. 对视频进行H264编码，对音频进行AAC编码，在iOS中分别有已经封装好的编码库（x264编码、faac编码、ffmpeg编码）来实现对音视频的编码。

3. 对编码后的音、视频数据进行组装封包。

4. 建立RTMP连接并上推到服务端。

五、服务器端搭建Nginx+Rtmp直播流服务

六、直播流转换格式、编码推流

当服务器端接收到采集视频录制端传输过来的视频流时，需要对其进行解析编码，推送RTMP/HLS格式视频流至视频播放端。通常使用的常见编码库方案，如x264编码、faac编码、ffmpeg编码等。

鉴于 FFmpeg 工具集合了多种音频、视频格式编码，我们可以优先选用FFmpeg进行转换格式、编码推流。

注意：当我们进行推流之后，可以安装VLC、ffplay（支持rtmp协议的视频播放器）本地拉流进行演示。

七、H5直播视频播放

移动端iOS和 Android 都天然支持HLS协议，做好视频采集端、视频流推流服务之后，便可以直接在H5页面配置 video 标签播放直播视频。

八、H5直播开发技术方案总结

本方案从视频采集上传，服务器处理视频推流，以及H5页面播放直播视频一整套流程，具体阐述了直播实现原理，实现过程中会遇到很多性能优化问题。

1. H5 HLS 限制必须是H264+AAC编码。

2. H5 HLS 播放卡顿问题，server 端可以做好分片策略，将 ts 文件放在 CDN 上，前端可尽量做到 DNS 缓存等。

3. H5 直播为了达到更好的实时互动，也可以采用RTMP协议，通过video.js实现播放。