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

上一篇文章我们讲到，在了解视频流协议HLS与RTMP、明晰目前网络直播方案的主流形式，以及实现直播的简要流程后，我们来继续讲利用Html5实现直播的剩余步骤。

一、Html5视频录制

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

使用WebRTC录制视频基本流程简单梳理下：

1、调用window.navigator.webkitGetUserMedia（），获取用户的PC摄像头视频数据。

2、将获取到视频流数据转换成window.webkitRTCPeerConnection（一种视频流数据格式)。

3、利用 WebScoket将视频流数据传输到服务端。

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

二、搭建Nginx+Rtmp直播流服务

此步骤的意义是让流媒体服务正常运行，保证视频流的正常传输，关于这一块，由于牵扯到大量技术步骤，我尽量用简洁的语言为大家概括一下：

1、先复制nginx项目到本地电脑上，brew tap homebrew/nginx。

2、执行安装nginx-rtmp-module。

3、查找到nginx.conf配置文件，配置好RTMP、HLS。

4、重启nginx服务，浏览器中输入：http：//localhost：8080，出现欢迎界面，则确定nginx重启成功。

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

当服务器端接收到采集视频录制端传输过来的视频流时，需要对其进行解析编码，推送RTMP/HLS格式视频流至视频播放端。通常使用的常见编码库方案，如x264编码、faac编码、ffmpeg编码等。鉴于FFmpeg工具集合了多种音频、视频格式编码，我们可以优先选用FFmpeg进行转换格式、编码推流。

四、Html5视频播放

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

五、需要注意的几点

本文从视频采集上传，服务器处理视频推流，以及Html5页面播放直播视频一整套网络直播方案，具体阐述了直播实现原理，实现过程中可能会遇到很多性能优化问题，需要注意以下几点：

1、HLS限制必须H264+AAC编码。

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

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

以上就是利用Html5构建网络直播方案的全部步骤，如果您对直播平台开发、直播平台搭建感兴趣，欢迎咨询官方客服。

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