HLS与RTMP实现[视频直播一]

原创

Red_Ant_hoyl 2020-05-11 20:00:35 博主文章分类：html技术 ©著作权

文章标签 HLS RTMP 文章分类 音视频

©著作权归作者所有：来自51CTO博客作者Red_Ant_hoyl的原创作品，请联系作者获取转载授权，否则将追究法律责任

小编前言 最近听说视频直播火了，好多都是视频带货的。小编很多年以前就喜欢流媒体相关的东西，现在入手虽说有点晚，但也算有所了解。目前主流的视频直播方案有HLS和RTMP，移动端以HLS为主，PC端以RTMP为主。

HLS

HTTP Live Streaming（简称 HLS）是一个基于 HTTP 的视频流协议，听说是苹果公司搞的，因此苹果机上很好的支持，高版本的Android也支持。 HLS 协议基于 HTTP，而一个提供 HLS 的服务器需要做两件事： 1、编码： 以 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。 一个典型的 m3u8 文件格式如下：

	#EXTM3U
	#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000
	gear1/prog_index.m3u8
	#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111
	gear2/prog_index.m3u8
	#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=484444
	gear3/prog_index.m3u8
	#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777
	gear4/prog_index.m3u8

【拓展】 HLS协议本质上还是一个http请求/响应。但是它的延迟非常明显，延迟的长度基于循环体的大小。循环体太小又会带来频繁的缓冲，各种体验都不好。

若是浏览器支持HLS，则可以这么写：

	<video src=”./bipbopall.m3u8″ height=”300″ width=”400″  preload=”auto” autoplay=”autoplay” loop=”loop” webkit-playsinline=”true”></video>

【遗憾的是】 HLS 在 PC 端仅支持safari浏览器；标签无法播放 m3u8 格式，可直接采用网上一些比较成熟的方案，如：sewise-player、MediaElement、videojs-contrib-hls、jwplayer。

RTMP

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

	<link href=“http://vjs.zencdn.net/5.8.8/video-js.css” rel=“stylesheet”>
	<video id=“example_video_1″ class=“video-js vjs-default-skin” controls preload=“auto” width=“640” height=“264” loop=“loop” webkit-playsinline>
	<source src=“rtmp://10.14.221.17:1935/rtmplive/home” type=‘rtmp/flv’>
	</video>
	<script src=“http://vjs.zencdn.net/5.8.8/video.js”></script>
	<script>
	videojs.options.flash.swf = ‘video.swf’;
	videojs(‘example_video_1′).ready(function() {
	this.play();
	});
	</script>

【结构】 目前的直播展示形式，结构分三部分： 1、背景视频 2、关注与评论 3、点赞动画 【实现方式】 1、底部视频背景通过video实现播放 2、关注、评论模块利用websocket实现发送和接收新的消息，通过dom和css3实现 3、点赞利用css3动画。

【直播流程】 1、视频采集端：电脑、手机端、麦克风 2、直播流视频服务端：Nginx服务器、采集视频录制端传输的视频流H264/ACC，由服务器端进行解析编码，推送到视频流播放端。 3、视频播放端：电脑端、手机端。

【PC网页端基于H5视频录制】 使用webRTC（Web Real-Time Communication）是一个支持网页浏览器进行实时语音对话或视频对话的技术，缺点是只在 PC 的 Chrome 上支持较好，移动端支持不太理想。 使用 webRTC 录制视频基本流程 ① 调用 window.navigator.webkitGetUserMedia()获取用户的PC摄像头视频数据。 ② 将获取到视频流数据转换成 window.webkitRTCPeerConnection(一种视频流数据格式)。 ③ 利用 WebScoket将视频流数据传输到服务端。 【注意:】 webRTC的支持度还不完善，移动端大部分不支持。 iOS原生应用调用摄像头录制视频流程 ① 音视频的采集，利用AVCaptureSession和AVCaptureDevice可以采集到原始的音视频数据流。 ② 对视频进行H264编码，对音频进行AAC编码，在iOS中分别有已经封装好的编码库（x264编码、faac编码、ffmpeg编码）来实现对音视频的编码。 ③ 对编码后的音、视频数据进行组装封包。 ④ 建立RTMP连接并上推到服务端。