如何利用Html5实现直播（上）

目前WEB端上主流的网络直播方案依托的视频流协议有HLS和RTMP，移动WEB端目前以HLS为主，PC端则以RTMP为主。接下来，小编将围绕着这两种视频流协议在网络直播方案中的应用，来说明如何利用Html5实现直播。

一、视频流协议HLS与RTMP

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

编码：以H.263格式对图像进行编码，以MP3或者HE-AAC 对声音进行编码，最终打包到MPEG-2 TS容器之中。分割：把编码好的TS文件等长切分成后缀为ts的小文件，并生成一个.m3u8的纯文本索引文件。由于后续还牵扯到很多编码环节，在这就不再展开，只做简单介绍。

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

虽然无法在iOS的H5页面播放，但是对于iOS原生应用是可以自己写解码去解析的，RTMP延迟低、实时性较好。浏览器端、HTML5 video标签无法播放 RTMP协议的视频，但可以通过video.js来实现。

二、网络直播方案主流形式

如果稍微简化下，目前的网络直播方案展示形式，其结构可以分成三层：1、背景视频层；2、关注、评论模块；3、点赞动画。

而现行Html5类似的直播页面，实现技术难点不大，其可以通过实现方式分为：1、底部视频背景使用video视频标签实现播放；2、关注、评论模块利用 WebScoket来实时发送和接收新的消息通过DOM 和CSS3实现点赞利用 CSS3动画；3、点赞利用 CSS3 动画。

三、实现直播的简要流程

了解完网络直播方案的主流形式，如果将直播的流程简化下，大致分为如下步骤：

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

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

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

由于篇幅限制，关于利用Html5录制视频、搭建Nginx+Rtmp直播流服务，直播流转换格式、编码推送等剩余的网络直播方案步骤，我们会放到下期再说，如果您对直播平台开发、直播系统开发感兴趣，欢迎咨询官方客服。

 本文章声明原创，转载请注明出自云豹科技www.yunbaokj.com