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

小编前言
最近听说视频直播火了,好多都是视频带货的。小编很多年以前就喜欢流媒体相关的东西,现在入手虽说有点晚,但也算有所了解。
目前主流的视频直播方案有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连接并上推到服务端。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值