h5视频直播开发(h5直播开发教程)

2017年的视频直播可谓是火了一把，各种视频直播平台相继出现，H5直播也逐渐走向成熟。今天，我们将解释H5视频直播可行性方案的分析。
目前网络上主流的视频直播方案有HLS和RTMP。目前移动WEB端主要使用HLS (HLS有延迟问题，借助video.js也可以使用RTMP)，PC端主要使用实时性更好的RTMP。接下来，将围绕这两个视频流协议来解释H5直播方案。
I .视频流协议HLS和RTMP1。HTTP直播
直播流(简称HLS)是一种基于HTTP的视频流协议，由苹果公司实现。Mac OS上的QuickTime，iOS上的Safari，iOS上的Safari都可以很好的支持HLS，更高版本的Android也增加了对HLS的支持。一些常见的客户端如MPlayerX和VLC也支持HLS协议。
HLS协议基于HTTP，提供HLS的服务器需要做两件事：
编码：对图像进行H.263格式编码，对声音进行MP3或HE-AAC编码，最后打包成MPEG-2 TS(传输流)容器；
分割：将编码后的ts文件分割成带有TS后缀的小文件，生成m3u8的纯文本索引文件；
浏览器使用m3u8文件。M3u8与音频列表格式M3u非常相似。可以简单的认为m3u8是一个包含多个ts文件的播放列表。播放器按顺序一个一个的播放，然后请求m3u8文件到底，得到包含最新ts文件的播放列表继续播放，如此循环往复。整个直播过程就靠一个不断更新的m3u8和一堆小ts文件。m3u8必须动态更新，ts可以通过CDN。典型的m3u8文件格式如下：
可以看出，HLS协议的本质仍然是一个HTTP请求/响应，因此具有良好的适应性，不会受到防火墙的影响。但是它也有一个致命的弱点：延迟的现象非常明显。如果每个ts除以5秒，6个ts索引放在一个m3u8中，会带来至少30秒的延迟。如果减少每个ts的长度，减少m3u8中的索引数量，确实会减少延迟，但是会带来更频繁的缓冲，对服务器的请求压力会翻倍。所以只能根据实际情况找一个折中点。
对于支持HLS的浏览器，直接这样写就可以玩了：
注意：HLS只支持PC端的safari浏览器，类似的chrome浏览器无法播放带有HTML5视频标签的m3u8格式。可以直接采用一些成熟的线上方案，比如：sewise-player，MediaElement，videojs-contrib-hls，jwplayer。
2.实时消息协议
真实消息协议(RTMP)是由Macromedia开发的一套实时视频协议，现在属于Adobe。这种解决方案需要搭建专门的RTMP流媒体服务如Adobe Media Server，并且只能用Flash来实现浏览器中的播放器。它的实时性很好，延迟很小，但是无法支持移动网页播放是它的软肋。
虽然不能在iOS的H5页面上播放，但是原生iOS应用可以自己编写和解码。RTMP延迟低，实时性好。
浏览器端，HTML5视频标签不能播放RTMP协议的视频，但是可以通过video.js实现
3.视频流协议HLS和RTMP的比较
二、直播的形式
目前直播的形式多为YY直播和映客直播。可以看出其结构分为三层：背景视频层关注、评论模块赞动画。
但是现在的H5类似于直播页面，实现起来技术难度不大。可以分为以下几种方式：底部视频背景用视频标签播放；关注和评论模块使用WebScoket实时收发新消息；被DOM和CSS3动画喜欢。
了解了直播的形式之后，再整体了解直播过程。
三、直播的整体流程直播的整体流程大致可以分为：
视频采集终端：可以是电脑上的音视频输入设备，手机上的摄像头，也可以是麦克风。目前以手机视频为主。
流媒体视频直播服务器(live streaming video server):Nginx服务器，采集视频录制端传输的视频流(H264/ACC编码)，经服务器端解析编码，将RTMP/HLS格式的视频流推送到视频播放端。
视频播放器：可以是电脑上的播放器(QuickTime Player，VLC)，手机上的原生播放器，H5的视频标签。目前以手机上的原生播放器为主。
四。H5录制视频对于H5视频录制，可以使用功能强大的WebRTC(Web Real-Time Communication)，这是一种支持Web浏览器进行实时语音对话或视频对话的技术。缺点是只在PC的Chrome上支持，移动端支持不理想。
1.使用webRTC录制视频的基本过程
调用window . navigator . WebKit getuser media()获取用户PC摄像头的视频数据。
将采集到视频流数据转换成window.webkitRTCPeerConnection(一种视频流数据格式)。
使用WebScoket向服务器传输视频流数据。
注：虽然Google一直在推WebRTC，目前也出现了很多成型的产品，但是大部分手机浏览器还是不支持webRTC(最新的iOS 10.0也不支持)，所以真正的视频录制还是要靠客户端(iOS，Android)，效果会更好。
2.iOS原生应用调用摄像头记录视频过程。
音视频采集，使用AVCaptureSession和AVCaptureDevice可以采集原始的音视频数据流。
视频采用H264编码，音频采用AAC编码。iOS中已经有打包的编码库(x264编码、faac编码、ffmpeg编码)对音视频进行编码。
将编码后的音视频数据组装打包。
建立RTMP连接并推送到服务器。
5.设置Nginx Rtmp实时流服务1。安装nginx和nginx-rtmp-模块。
先将nginx项目克隆到本地：
brew tap家酿/nginx
安装nginx-rtmp-模块。
brew安装nginx-全带rtmp-模块
2.nginx.conf配置文件，配置RTMP和HLS
找到nginx.conf配置文件(path/usr/local/etc/nginx/nginx . conf)并配置RTMP和HLS。
在http节点前增加rtmp的配置内容：
在http中添加hls配置
3.重新启动nginx服务。重新启动nginx服务。在浏览器中输入http://localhost:8080。欢迎界面是否出现，将确认nginx重启成功。
nginx -s重新加载
不及物动词直播流的格式转换和编码推送当服务器接收到视频录制终端传来的视频流时，需要对其进行解析和编码，并将RTMP/HLS格式的视频流推送到视频播放终端。常用的编码库方案，如x264编码、faac编码、ffmpeg编码等。
由于FFmpeg工具集成了多种音视频格式，我们可以优先考虑FFmpeg进行格式转换和编码。
1.安装FFmpeg工具
brew安装ffmpeg
2.推送MP4文件
文件地址：/users/Gao/desktop/video/test . MP4 Push-Stream Pull地址：rtmp 3360//localhost 33601935/RTM live/home，rtmp 3360//localhost 33601935/RTM live/home
注：我们推完流后，可以安装VLC和ffplay(支持rtmp协议的视频播放器)在本地拉流进行演示。
3.FFmpeg流命令视频文件的直播
流媒体摄像机桌面麦克风录制直播。
七。H5现场视频播放移动iOS和Android都自然支持HLS协议。在视频采集和视频流服务完成后，您可以直接在H5页面上配置视频标签来播放视频直播。
PS: 在视频标签中加入webkit-playsinline属性(iOS支持)是为了保证视频可以在网页中嵌入和播放。
对于微信浏览器，视频标签等级最高的问题需要申请添加白名单。
八。总结了视频采集上传、服务器处理视频推送流、H5页面播放视频直播的全过程，详细讲解了直播的原理。在实现过程中会遇到很多性能优化问题。
H5 HLS限制必须是H264 AAC编码。
当H5HLS播放卡顿问题时，服务器端可以做好分片策略，将ts文件放在CDN上，前端可以尝试做DNS缓存。
为了达到更好的实时互动，H5直播也可以采用RTMP协议，通过video.js播放
别忘了喜欢并关注转发！
你对H5直播有什么新的看法吗？请在下面留言，不好的欢迎吐槽。