html直播技术怎么实现,HTML5如何实现直播很难吗

　　前言

　　前不久，我花时间对目前比较流行的视频直播做了以下的研究和探索，了解其整体实现过程，探索HTML5直播在移动端的可行方案。

　　发现网络上主流的视频直播方案是HLS和RTMP。目前移动WEB端主要是HLS (HLS有延迟问题，借助video.js也可以使用RTMP)，PC端主要是RTMP，实时性更好。接下来，我们将围绕这两个视频流协议分享H5直播主题。

　　一、视频流协议HLS与RTMP

　　1. HTTP Live Streaming

　　直播流(简称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文件格式如下：

　　# EXT m3u # EXT-X-STREAM-INF:Prog-ID=1，BANDWIDTH=200000 gear 1/Prog _ index . m3u 8 # EXT-X-STREAM-INF:Prog-ID=1，BANDWIDTH=311111 gear 2/Prog _ index . m3u 8 # EXT-X-STREAM-INF:Prog-ID=1，BANDWIDTH=484444 gear 3/Prog _ index . m3u 8 # EXT-X-STREAM-INF:Prog-ID=1，BANDWIDTH但是它也有一个致命的弱点：延迟的现象非常明显。如果每个ts除以5秒，6个ts索引放在一个m3u8中，会带来至少30秒的延迟。如果减少每个ts的长度，减少m3u8中的索引数量，确实会减少延迟，但是会带来更频繁的缓冲，对服务器的请求压力会翻倍。所以只能根据实际情况找一个折中点。

　　对于支持HLS的浏览器，直接这样写就可以玩了：

　　视频="。/bippopall . m3u 8 " height=" 300 " width=" 400 " preload=" auto " autoplay=" loop " WebKit-plays online=" true "/video注意：HLS只支持PC上的safari浏览器，在类似chrome的浏览器中使用HTML5视频。

　　标签不能播放m3u8格式，但可以直接采用一些成熟的线上方案，比如sewise-player、MediaElement、videojs-contrib-hls、jwplayer。

　　2. Real Time Messaging Protocol

　　真实消息协议(RTMP)是由Macromedia开发的一套实时视频协议，现在属于Adobe。这种解决方案需要搭建专门的RTMP流媒体服务如Adobe Media Server，并且只能用Flash来实现浏览器中的播放器。它的实时性很好，延迟很小，但是无法支持移动网页播放是它的软肋。

　　虽然不能在iOS的H5页面上播放，但是原生iOS应用可以自己编写和解码。RTMP延迟低，实时性好。浏览器端，HTML5视频

　　标签不能播放RTMP协议的视频，但是可以通过video.js实现

　　link href=" http://vjs.zencdn.net/5.8.8/video-js . CSS " rel=" style sheet " video id=" example _ video _ 1 " class=" video-js vjs-default-skin " controls preload=" auto " width=" 640 " height=" 264 " loop=" loop " WebKit-playsinlinesource src=" rtmp://10 . 14 . 221 . 17:1935/RTM live/home " type= rtmp/flv /video script src=" 333videojs(example_video_1 )。ready(function(){ this . play()；});/script3. 视频流协议HLS与RTMP对比

　　二、直播形式

　　目前，直播的形式通常是YY直播和映客直播。可以看出，它的结构可以分为三层：

　　背景视频层

　　关注和评论模块

　　赞美动画

　　但是现在的H5类似于直播页面，实现起来技术难度不大。它可以分为：

　　底部视频背景与视频标签一起播放。

　　关注和评论模块使用WebScoket通过DOM和CSS3实时收发新消息。

　　喜欢用CSS3动画。

　　了解了直播的形式之后，再整体了解直播过程。

　　三、直播整体流程

　　整个直播过程大致可以分为：

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

　　流媒体视频直播服务器(live streaming video server):Nginx服务器，采集视频录制端传输的视频流(H264/ACC编码)，经服务器端解析编码，将RTMP/HLS格式的视频流推送到视频播放端。

　　视频播放器：可以是电脑上的播放器(QuickTime Player，VLC)，手机上的原生播放器，H5的视频标签。目前以手机上的原生播放器为主。

　　(web前端学习交流群：328058344。禁止聊天，除非你喜欢，否则不要进入！)

　　四、H5 录制视频

　　对于H5视频录制，您可以使用功能强大的WebRTC (Web实时通信)，这是一种支持Web浏览器进行实时语音对话或视频对话的技术。缺点是只在PC的Chrome上支持，移动端支持不理想。

　　用webRTC录制视频的基本过程

　　调用window . navigator . WebKit getuser media()

　　获取用户PC摄像头的视频数据。

　　(2)将获取视频流数据转换成window.webkitRTCPeerConnection

　　(一种视频流数据格式)。

　　使用WebScoket

　　将视频流数据传输到服务器。

　　注意：

　　虽然Google一直在推WebRTC，目前也出现了很多成型的产品，但是大部分手机浏览器还是不支持webRTC(最新的iOS 10.0也不支持)，所以真正的视频录制还是要靠客户端(iOS，Android)，效果会更好。

　　WebRTC支持

　　WebRTC支持

　　IOS原生应用调用摄像头录制视频过程。

　　音视频采集，使用AVCaptureSession和AVCaptureDevice可以采集原始的音视频数据流。

　　视频采用H264编码，音频采用AAC编码。iOS中已经有打包的编码库(x264编码、faac编码、ffmpeg编码)对音视频进行编码。

　　将编码后的音视频数据组装打包。

　　建立RTMP连接并推送到服务器。

　　第五，设置Ng

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

　　安装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

　　推拉流的地址：rtmp://localhost:1935/RTM live/home，rtmp://localhost:1935/RTM live/home

　　//RTMP协议流ffmpeg-re-I/users/Gao/desktop/video/test . MP4-vcodec libx 264-acodec AAC-f flvrrtmp://10 . 14 . 221 . 17:1935/RTM prive/home//HLS协议流ffmpeg-re-I/users/Gao/desktop/video/test . MP4-vcodec libx 264-v profile baseline-acodec-ar 4100-strict-2-ac1-f FLV-Q1

　　我们推完流后，可以安装VLC和ffplay(支持rtmp协议的视频播放器)在本地拉流进行演示。

　　3.FFmpeg推流命令

　　视频文件的直播

　　ffmpeg-re-I/Users/Gao/Desktop/video/test . MP4-vcodec libx 264-v profile baseline-acodec AAC-ar 44100-strict-2-AC 1-f flv-q 10 rtmp://192 . 168 . 1 . 101:1935/HLS/testffmpeg-re-I/Users/Gao/Desktop/video/test . MP4-vcodec libx 264-v profile baseline-acodec AAC-ar 444

　　ffmpeg-f av foundation-frame rate 30-I " 1:0 "\-f av foundation-frame rate 30-video _ size 640 x480-I " 0 " \ c:v libx 264-preset ultra fast \-filter _ complex overlay=main _ w-overlay _ w-10:main _ h-overlay _ h-10 -acodec libmp 3 lame-ar 44100-ac1-f flvrtmp://192 . 168 . 1 . 101:1

　　FFmpeg处理RTMP流媒体的完整命令集

　　FFmpeg公共推流命令

　　七、H5 直播视频播放

　　手机iOS和Android都天然支持HLS协议。在视频采集和流媒体服务完成后，您可以直接在H5页面上配置视频标签来播放直播视频。

　　视频控件preload=" auto " autoplay=" autoplay " loop=" loop " WebKit-playsinlinesource src=" http://10 . 14 . 221 . 8/HLS/test . m3 u8 " type=" application/vnd . apple . mpegurl "/p class=" warning "您的浏览器不支持HTML5视频。/p/视频八、总结

　　本文详细描述了视频采集上传、服务器处理视频推送、H5页面播放视频直播的全过程，在实现过程中会遇到很多性能优化问题。

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

　　当H5HLS播放卡顿问题时，服务器端可以做好分片策略，将ts文件放在CDN上，前端可以尝试做DNS缓存。

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

　　总结

　　以上是边肖介绍的HTML5实现视频直播功能的详细说明。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。