H5直播方案分析讲解,H5直播起航

H5直播起航

2016/10/31 · HTML5 ·
开发

原稿出处:
坑坑洼洼实验室   

美高梅开户网址 1

初稿地址..直播h5

前言

新近忙里偷闲对当下可比火的视频直播,做了下切磋与探索,明白其完整完毕流程,以及研商移动端HTML5直播可行性方案。

发觉脚下 WEB 上主流的摄像直播方案有 HLS 和 RTMP,移动 WEB 端方今以 HLS
为主(HLS存在延迟性难题,也可以依靠 video.js 选拔RTMP),PC端则以
RTMP 为主实时性较好,接下去将围绕那三种视频流协议来进展H5直播宗旨分享。

直播大火,H5直播技术你明白吧?H5直播方案分析教学

美高梅开户网址 2

二零一七年视频直播可谓是大火,种种视频直播平台陆续出演,H5直播也渐渐成熟,前几日就来讲课H5视频直播可行性方案的辨析。

美高梅开户网址 3

近期 WEB 上主流的摄像直播方案有 HLS 和 RTMP,移动 WEB 端近年来以 HLS
为主(HLS存在延迟性难点,也可以依靠 video.js 选拔RTMP),PC端则以 RTMP
为主实时性较好,接下去将围绕这两种视频流协议来进展H5直播方案讲解。

一、摄像流协议HLS与RTMP

1. HTTP Live Streaming

HTTP Live Streaming(简称 HLS)是一个基于 HTTP 的摄像流协议,由 Apple
集团落成,Mac OS 上的 Quick提姆e、Safari 以及 iOS 上的 Safari
都能很好的支撑 HLS,高版本 Android 也加码了对 HLS
的援救。一些大面积的客户端如:MPlayerX、VLC 也都援救 HLS 协商。

HLS 协议基于 HTTP,而一个提供 HLS 的服务器须要做两件事:

编码:以 H.263 格式对图像进行编码,以 mp4 或者 HE-AAC
对声音进行编码,最后包装到 MPEG-2 TS(Transport Stream)容器之中;

划分:把编码好的 TS 文件等长切分成后缀为 ts 的小文件,并扭转一个 .m3u8
的纯文本索引文件;

浏览器拔取的是 m3u8 文件。m3u8 跟音频列表格式 m3u 很像,可以大约的认为
m3u8 就是包涵三个 ts
文件的播放列表。播放器按梯次逐个广播,全体放完再请求一下 m3u8
文件,得到包涵最新 ts
文件的播放列表继续播,周而复始。整个直播进度就是依靠一个不断更新的 m3u8
和一堆小的 ts 文件组成,m3u8 必须动态更新,ts 可以走 CDN。一个卓绝的
m3u8 文件格式如下:

美高梅开户网址 4

可以看来 HLS 协和本质依旧一个个的 HTTP 请求 /
响应,所以适应性很好,不会惨遭防火墙影响。但它也有一个致命的毛病:延迟现象丰裕掌握。即便每个
ts 按照 5 秒来切分,一个 m3u8 放 6 个 ts 索引,那么至少就会拉动 30
秒的延期。假如缩减每个 ts 的长度,减弱 m3u8
中的索引数,延时真正会减小,但会推动更频仍的缓冲,对服务端的伸手压力也会倍增扩张。所以只能根据实际意况找到一个折中的点。

对此支撑 HLS 的浏览器来说,直接那样写就能播放了:

只顾:HLS 在 PC 端仅援救safari浏览器,类似chrome浏览器选择HTML5
video标签无法播放 m3u8
格式,可一贯使用网上一些相比较成熟的方案,如:sewise-player、MediaElement、videojs-contrib-hls、jwplayer。

美高梅开户网址 5

2. Real Time Messaging Protocol

Real 提姆e Messaging Protocol(简称 RTMP)是 Macromedia
开发的一套视频直播协议,现在属于 Adobe。这套方案要求搭建专门的 RTMP
流媒体服务如 Adobe Media Server,并且在浏览器中不得不利用 Flash
完成播放器。它的实时性格外好,延迟很小,但无法支撑移动端 WEB
播放是它的硬伤。

虽说不可能在iOS的H5页面播放,但是对于iOS原生应用是可以团结写解码去分析的,
RTMP 延迟低、实时性较好。

浏览器端,HTML5 video标签不能播放 RTMP 协议的摄像,可以由此 video.js
来完结。

美高梅开户网址 6

3. 视频流协议HLS与RTMP相比较

美高梅开户网址 7

二、直播方式

美高梅开户网址 8

近期直播展现格局,平常以YY直播、映客直播那种页面居多,可以观望其布局得以分为三层:①
背景摄像层 ② 关注、评论模块 ③ 点赞动画

而前几天H5类似直播页面,已毕技能难关不大,其能够透过完结格局分为:①
尾部视频背景使用video视频标签完毕广播 ② 关心、评论模块利用 WebScoket
来实时发送和收取新的新闻通过DOM 和 CSS3 完成 ③ 点赞利用 CSS3 动画

通晓完直播方式之后,接下去全部精晓直播流程。

三、直播全部流程

直播全体流程差不离可分为:

视频采集端:可以是电脑上的音视频输入设备、或手机端的视频头、或迈克风,近期以活动端手机视频为主。

直播流摄像服务端:一台Nginx服务器,采集视频录制端传输的视频流(H264/ACC编码),由服务器端举办解析编码,推送RTMP/HLS格式视频流至视频播放端。

摄像播放端:可以是总结机上的播放器(Quick提姆e
Player、VLC),手机端的native播放器,还有就是 H5
的video标签等,近日依旧以手机端的native播放器为主。

美高梅开户网址 9

四、H5 录制视频

对于H5视频录制,可以使用强劲的 webRTC (Web Real-提姆e
Communication)是一个支撑网页浏览器进行实时语音对话或摄像对话的技艺,缺点是只在
PC 的 Chrome 上支持较好,移动端扶助不太雅观。

  1. 选用 webRTC 录制录像基本流程

① 调用 window.navigator.webkitGetUserMedia()
获取用户的PC视频头视频数据。

② 将收获到摄像流数据转换成 window.webkitRTCPeerConnection
(一种视频流数据格式)。

③ 利用 WebScoket 将摄像流数据传输到服务端。

瞩目:尽管谷歌一向在推WebRTC,近期已有许多成型的制品出现,不过多数移动端的浏览器还不帮忙webRTC(最新iOS
10.0也不匡助),所以的确的摄像录制依然要靠客户端(iOS,Android)来兑现,效果会好一些。

2. iOS原生应用调用摄像头录制摄像流程


音摄像的征集,利用AVCaptureSession和AVCaptureDevice可以搜集到原有的音视频数据流。


对视频举办H264编码,对旋律举行AAC编码,在iOS中分别有已经封装好的编码库(x264编码、faac编码、ffmpeg编码)来完毕对音摄像的编码。

③ 对编码后的音、摄像数据开展组装封包。

④ 建立RTMP连接并上推到服务端。

美高梅开户网址 10

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

1. 安装nginx、nginx-rtmp-module

① 先clone nginx项目到当地:

brew tap homebrew/nginx

② 执行安装nginx-rtmp-module

brew install nginx-full –with-rtmp-module

2. nginx.conf配置文件,配置RTMP、HLS

查找到nginx.conf配置文件(路径/usr/local/etc/nginx/nginx.conf),配置RTMP、HLS。

① 在http节点之前增加 rtmp 的布局内容:

美高梅开户网址 11

② 在http中添加 hls 的配置

美高梅开户网址 12

3. 重启nginx服务

重启nginx服务,浏览器中输入

nginx -s reload

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

当服务器端接收到采访视频录制端传输过来的摄像流时,需求对其展开解析编码,推送RTMP/HLS格式视频流至视频播放端。经常采取的常见编码库方案,如x264编码、faac编码、ffmpeg编码等。

是因为 FFmpeg
工具集合了种种节奏、视频格式编码,我们得以先行接纳FFmpeg进行更换格式、编码推流。

1.安装 FFmpeg 工具

brew install ffmpeg

2.推流MP4文件

视频文件地址:/Users/gao/Desktop/video/test.mp5

推流拉流地址:rtmp://localhost:1935/rtmplive/home,rtmp://localhost:1935/rtmplive/home

美高梅开户网址 13

瞩目:
当大家开展推流之后,可以安装VLC、ffplay(匡助rtmp商事的视频播放器)本地拉流举办出现说法

3.FFmpeg推流命令

① 摄像文件举行直播

美高梅开户网址 14

② 推流视频头+桌面+迈克风录制举行直播

美高梅开户网址 15

七、H5 直播视频播放

移步端iOS和 Android
都自发扶助HLS协议,做好摄像采集端、摄像流推流服务之后,便得以一向在H5页面配置
video 标签播放直播视频。

ps:①
video标签添加webkit-playsinline属性(iOS协助)是承保视频在网页中内嵌播放。

美高梅开户网址 16

② 针对微信浏览器,video标签层级最高的题材,需求申请添加白名单。

八、总结

本文从摄像采访上传,服务器处理视频推流,以及H5页面播放直播摄像一整套流水线,具体讲解了直播完结原理,落成进度中会碰体贴重属性优化难题。

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

② H5 HLS 播放卡顿难点,server 端可以搞活分片策略,将 ts 文件放在 CDN
上,前端可尽量做到 DNS 缓存等。

H5直播方案分析讲解,H5直播起航。③ H5
直播为了完成更好的实时互动,也得以动用RTMP协议,通过video.js达成播放。

喜爱别忘了点赞关心+转载哦!

对此H5直播你有何样新的意见呢?欢迎在底下留言哦,写得不佳的地点也欢迎大家吐槽

前言

近些年忙里偷闲对脚下相比火的摄像直播,做了下商讨与研讨,领悟其总体完毕流程,以及探索移动端HTML5直播可行性方案。

意识脚下 WEB 上主流的摄像直播方案有 HLS 和 RTMP,移动 WEB 端如今以 HLS
为主(HLS存在延迟性难题,也足以借助
video.js 选取RTMP),PC端则以
RTMP 为主实时性较好,接下去将围绕那两种视频流协议来开展H5直播主旨分享。

前言

一、视频流协议HLS与RTMP

  1. HTTP Live Streaming

HTTP Live Streaming(简称 HLS)是一个基于 HTTP 的摄像流协议,由 Apple
集团完结,Mac OS 上的 Quick提姆e、Safari 以及 iOS 上的 Safari
都能很好的支撑 HLS,高版本 Android 也加码了对 HLS
的支撑。一些广大的客户端如:MPlayerX、VLC 也都支持 HLS 探究。
HLS 共商基于 HTTP,而一个提供 HLS 的服务器必要做两件事:

  1. 编码:以 H.263 格式对图像举办编码,以 MP4 如故 HE-AAC
    对声音举办编码,最后包装到 MPEG-2 TS(Transport Stream)容器之中;
  2. 细分:把编码好的 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 请求 /
响应,所以适应性很好,不会惨遭防火墙影响。但它也有一个致命的通病:延迟现象充足领悟。若是每个
ts 依据 5 秒来切分,一个 m3u8 放 6 个 ts 索引,那么至少就会推动 30
秒的推迟。即使缩减每个 ts 的长度,减弱 m3u8
中的索引数,延时确实会压缩,但会带来更频仍的缓冲,对服务端的伸手压力也会加倍伸张。所以不得不根据实际情形找到一个折中的点。

对于援救 HLS 的浏览器来说,直接那样写就能播放了:

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

只顾:HLS 在 PC 端仅协助safari浏览器,类似chrome浏览器选用HTML5 video
标签不可以播放 m3u8
格式,可径直利用网上一些比较早熟的方案,如:sewise-player、MediaElement、videojs-contrib-hls、jwplayer。

  1. Real Time Messaging Protocol

Real 提姆e Messaging Protocol(简称 RTMP)是 Macromedia
开发的一套摄像直播协议,现在属于 Adobe。那套方案需求搭建专门的 RTMP
流媒体服务如 Adobe Media Server,并且在浏览器中不得不动用 Flash
完成播放器。它的实时性极度好,延迟很小,但无能为力支撑活动端 WEB
播放是它的硬伤。
美高梅开户网址 ,即使如此不可以在iOS的H5页面播放,不过对于iOS原生应用是足以友善写解码去分析的,
RTMP 延迟低、实时性较好。
浏览器端,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. 视频流协议HLS与RTMP比较

美高梅开户网址 17

一、视频流协议HLS与RTMP

近年忙里偷闲对现阶段可比火的摄像直播,做了下探究与研商,了然其总体完成流程,以及探索移动端HTML5直播可行性方案。

二、直播格局

美高梅开户网址 18

 

眼前直播突显方式,寻常以YY直播、映客直播那种页面居多,可以观察其结构得以分为三层:
① 背景视频层
② 关怀、评论模块
③ 点赞动画

而现在H5类似直播页面,达成技能难点不大,其可以通过落成格局分为:
① 尾部视频背景使用video摄像标签完毕广播
② 关切、评论模块利用 WebScoket 来实时发送和接受新的消息通过DOM 和 CSS3
落成
③ 点赞利用 CSS3 动画

打听完直播方式之后,接下去全体了然直播流程。
三、直播全体流程
直播全部流程大概可分为:

  • 摄像采集端:可以是总括机上的音视频输入设备、或手机端的摄像头、或迈克风,如今以运动端手机视频为主。
  • 直播流视频服务端:一台Nginx服务器,采集摄像录制端传输的摄像流(H264/ACC编码),由劳动器端举办解析编码,推送RTMP/HLS格式摄像流至视频播放端。
  • 视频播放端:能够是统计机上的播放器(Quick提姆e
    Player、VLC),手机端的native播放器,还有就是 H5
    的video标签等,方今如故以手机端的native播放器为主。

美高梅开户网址 19

 

(web前端学习互换群:328058344 禁止闲谈,非喜勿进!)

1. HTTP Live Streaming

HTTP Live Streaming(简称 HLS)是一个基于 HTTP 的视频流协议,由 Apple
公司落到实处,Mac OS 上的 Quick提姆e、Safari 以及 iOS 上的 Safari
都能很好的支撑 HLS,高版本 Android 也加进了对 HLS
的接济。一些广大的客户端如:MPlayerX、VLC 也都扶助 HLS 研商。

HLS 商事基于 HTTP,而一个提供 HLS 的服务器必要做两件事:

  • 编码:以 H.263 格式对图像进行编码,以 mp4 或者 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 请求 /
响应,所以适应性很好,不会受到防火墙影响。但它也有一个致命的弱项:延迟现象丰裕显眼。若是每个
ts 按照 5 秒来切分,一个 m3u8 放 6 个 ts 索引,那么至少就会带动 30
秒的延期。要是缩减每个 ts 的尺寸,收缩 m3u8
中的索引数,延时确实会压缩,但会带来更频仍的缓冲,对服务端的乞请压力也会加倍增添。所以不得不按照实际境况找到一个折中的点。

对于支持 HLS 的浏览器来说,直接这样写就能播放了:

XHTML

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

1
2
<video src="http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8"
height="300" width="400" preload="auto" autoplay="autoplay" loop="loop" webkit-playsinline="true"></video>

注意:HLS 在 PC
端仅辅助safari浏览器,类似chrome浏览器选择HTML5 video标签不可能播放 m3u8
格式,可径直行使网上一些比较早熟的方案,如:sewise-player、MediaElement、videojs-contrib-hls、jwplayer。

察觉眼前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端近期以 HLS
为主(HLS存在延迟性难题,也可以借助 video.js 采纳RTMP),PC端则以 RTMP
为主实时性较好,接下去将围绕那三种视频流协议来开展H5直播大旨分享。

四、H5 录制摄像

对此H5视频录制,可以使用强劲的 webRTC (Web Real-Time
Communication)是一个支撑网页浏览器举办实时语音对话或摄像对话的技巧,缺点是只在
PC 的 Chrome 上支撑较好,移动端扶助不太美丽。

  1. 动用 webRTC 录制摄像基本流程
    ① 调用 window.navigator.webkitGetUserMedia()
    取得用户的PC视频头摄像数据。
    ② 将赢得到视频流数据转换成 window.webkitRTCPeerConnection
    (一种摄像流数据格式)。
    ③ 利用 WebScoket
    将摄像流数据传输到服务端。

注意:


 

 

尽管如此Google平昔在推WebRTC,近年来已有许多成型的产品出现,不过多数运动端的浏览器还不扶助webRTC(最新iOS
10.0也不支持),所以的确的摄像录制仍旧要靠客户端(iOS,Android)来贯彻,效果会好有的。

美高梅开户网址 20

WebRTC支持度

  1. iOS原生应用调用视频头录制录像流程

    音摄像的募集,利用AVCaptureSession和AVCaptureDevice可以收集到原始的音视频数据流。

    对摄像进行H264编码,对旋律进行AAC编码,在iOS中分别有已经封装好的编码库(x264编码、faac编码、ffmpeg编码)来贯彻对音视频的编码。
    ③ 对编码后的音、视频数据开展组装封包。
    ④ 建立RTMP连接并上推到服务端。
    美高梅开户网址 21

2. Real Time Messaging Protocol

Real 提姆e Messaging Protocol(简称 RTMP)是 Macromedia
开发的一套视频直播协议,现在属于 Adobe。那套方案要求搭建专门的 RTMP
流媒体服务如 Adobe Media Server,并且在浏览器中不得不使用 Flash
落成播放器。它的实时性格外好,延迟很小,但无能为力支撑活动端 WEB
播放是它的硬伤。

虽说无法在iOS的H5页面播放,可是对于iOS原生应用是足以自己写解码去分析的,
RTMP 延迟低、实时性较好。

浏览器端,HTML5 video标签无法播放 RTMP 协议的摄像,能够经过
video.js 来实现。

XHTML

<link href=””
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=”;
<script> videojs.options.flash.swf = ‘video.swf’;
videojs(‘example_video_1’).ready(function() { this.play(); });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

一、视频流协议HLS与RTMP

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

  1. 安装nginx、nginx-rtmp-module
    ① 先clone nginx品种到本地:

brew tap homebrew/nginx

② 执行安装nginx-rtmp-module

brew install nginx-full –with-rtmp-module
  1. nginx.conf配置文件,配置RTMP、HLS

查找到nginx.conf配置文件(路径/usr/local/etc/nginx/nginx.conf),配置RTMP、HLS。

① 在http节点此前增加 rtmp 的布署内容:

美高梅开户网址 22

② 在http中添加 hls 的配置

美高梅开户网址 23

3. 摄像流协议HLS与RTMP相比较

协议 原理 延时 优点 使用场景
HLS 短链接Http 集合一段时间数据生成ts切片文件更新m3u8文件 10s – 30s 跨平台 移动端为主
RTMP 长链接Tcp 每个时刻的数据收到后立即发送 2s 延时低、实时性好 PC+直播+实时性要求高+互动性强
  1. HTTP Live Streaming

3. 重启nginx服务

重启nginx服务,浏览器中输入 http://localhost:8080,是不是出现欢迎界面确定nginx重启成功。

nginx -s reload

二、直播形式

美高梅开户网址 24

如今直播展现情势,寻常以YY直播、映客直播那种页面居多,可以观望其布局得以分为三层:①
背景视频层 ② 关怀、评论模块 ③ 点赞动画

而近年来H5类似直播页面,达成技能困难不大,其得以通过落成形式分为:①
尾部摄像背景使用video摄像标签落成广播 ② 关怀、评论模块利用 WebScoket
来实时发送和接受新的信息通过DOM 和 CSS3 已毕 ③ 点赞利用 CSS3 动画

打听完直播格局之后,接下去全体明白直播流程。

HTTP Live Streaming(简称 HLS)是一个基于 HTTP 的摄像流协议,由 Apple
集团贯彻,Mac OS 上的 Quick提姆e、Safari 以及 iOS 上的 Safari
都能很好的支撑 HLS,高版本 Android 也增多了对 HLS
的帮忙。一些科普的客户端如:MPlayerX、VLC 也都扶助 HLS 协和。

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

当服务器端接收到采访视频录制端传输过来的摄像流时,须要对其开展解析编码,推送RTMP/HLS格式摄像流至视频播放端。平时采取的常见编码库方案,如x264编码、faac编码、ffmpeg编码等。
鉴于 FFmpeg
工具集合了二种节奏、视频格式编码,大家得以优先接纳FFmpeg举行转移格式、编码推流。

1.安装 FFmpeg 工具

brew install ffmpeg

2.推流MP4文件

摄像文件地址:/Users/gao/Desktop/video/test.mp4
推流拉流地址:rtmp://localhost:1935/rtmplive/home,rtmp://localhost:1935/rtmplive/home

//RTMP 协议流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home
//HLS 协议流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

注意:
当咱们开展推流之后,能够设置VLC、ffplay(援助rtmp协议的视频播放器)本地拉流进行出现说法
3.FFmpeg推流命令
① 视频文件进行直播

ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://192.168.1.101:1935/hls/test
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

② 推流视频头+桌面+Mike风录制举行直播

ffmpeg -f avfoundation -framerate 30 -i “1:0″ \-f avfoundation -framerate 30 -video_size 640x480 -i “0” \-c:v libx264 -preset ultrafast \-filter_complex ‘overlay=main_w-overlay_w-10:main_h-overlay_h-10′ -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test

愈多命令,请参考:
FFmpeg处理RTMP流媒体的指令大全
FFmpeg常用推流命令

三、直播全体流程

直播全体流程大概可分为:

  • 摄像采集端:可以是电脑上的音视频输入设备、或手机端的视频头、或迈克风,方今以活动端手机视频为主。
  • 直播流视频服务端:一台Nginx服务器,采集视频录制端传输的摄像流(H264/ACC编码),由劳务器端进行解析编码,推送RTMP/HLS格式视频流至摄像播放端。
  • 视频播放端:可以是总结机上的播放器(Quick提姆e
    Player、VLC),手机端的native播放器,还有就是 H5
    的video标签等,如今或者以手机端的native播放器为主。

美高梅开户网址 25

HLS 协和基于 HTTP,而一个提供 HLS 的服务器需求做两件事:

七、H5 直播录像播放

挪动端iOS和 Android
都先天扶助HLS协议,做好视频采集端、摄像流推流服务之后,便足以一向在H5页面配置
video 标签播放直播视频。

<video controls preload=“auto” autoplay=“autoplay” loop=“loop” webkit-playsinline>
<source src=“http://10.14.221.8/hls/test.m3u8″ type=“application/vnd.apple.mpegurl” />
<p class=“warning”>Your browser does not support HTML5 video.</p>
</video>

四、H5 录制视频

对于H5视频录制,可以使用强劲的 webRTC (Web Real-提姆e
Communication)是一个支撑网页浏览器进行实时语音对话或视频对话的技艺,缺点是只在
PC 的 Chrome 上接济较好,移动端协助不太快心满意。

编码:以 H.263 格式对图像进行编码,以 MP4 仍旧 HE-AAC
对声音进行编码,最后包装到 MPEG-2 TS(Transport Stream)容器之中;

八、总结

正文从摄像采访上传,服务器处理录像推流,以及H5页面播放直播摄像一整套流水线,具体演说了直播达成原理,落成进度中会蒙受很多属性优化难点。

① H5 HLS 范围必须是H264+AAC编码。
② H5 HLS 播放卡顿难题,server 端可以盘活分片策略,将 ts 文件放在 CDN
上,前端可尽量做到 DNS 缓存等。
③ H5 直播为了达到更好的实时互动,也足以行使RTMP协议,通过video.js
已毕播放。

1. 运用 webRTC 录制视频基本流程

① 调用 window.navigator.webkitGetUserMedia()
获取用户的PC摄像头摄像数据。
② 将取得到视频流数据转换成 window.webkitRTCPeerConnection
(一种摄像流数据格式)。
③ 利用 WebScoket 将视频流数据传输到服务端。

注意:纵然谷歌(Google)一向在推WebRTC,近年来已有那个成型的出品出现,不过多数活动端的浏览器还不匡助webRTC(最新iOS
10.0也不扶助),所以的确的录像录制照旧要靠客户端(iOS,Android)来落实,效果会好一些。
美高梅开户网址 26

分开:把编码好的 TS 文件等长切分成后缀为 ts 的小文件,并扭转一个 .m3u8
的纯文本索引文件;

2. iOS原生应用调用视频头录制摄像流程


音视频的采访,利用AVCaptureSession和AVCaptureDevice可以收集到原来的音摄像数据流。

对摄像展开H264编码,对旋律举行AAC编码,在iOS中分头有曾经封装好的编码库(x264编码、faac编码、ffmpeg编码)来完成对音摄像的编码。
③ 对编码后的音、视频数据开展组装封包。
④ 建立RTMP连接并上推到服务端。

美高梅开户网址 27

浏览器选用的是 m3u8 文件。m3u8 跟音频列表格式 m3u 很像,可以概括的认为
m3u8 就是富含多少个 ts
文件的播放列表。播放器按顺序逐个广播,全体放完再请求一下 m3u8
文件,得到包含最新 ts
文件的播放列表继续播,周而复始。整个直播进程就是凭借一个不断更新的 m3u8
和一堆小的 ts 文件组成,m3u8 必须动态更新,ts 可以走 CDN。一个卓越的
m3u8 文件格式如下:

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

   #EXTM3U

1. 安装nginx、nginx-rtmp-module

① 先clone nginx类型到本地:

Shell

brew tap homebrew/nginx

1
brew tap homebrew/nginx

② 执行安装nginx-rtmp-module

Shell

brew install nginx-full –with-rtmp-module

1
brew install nginx-full –with-rtmp-module

   #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000

2. nginx.conf配置文件,配置RTMP、HLS

查找到nginx.conf配置文件(路径/usr/local/etc/nginx/nginx.conf),配置RTMP、HLS。

① 在http节点在此以前增加 rtmp 的配备内容:

rtmp { server { #监听的端口 listen 1935; # RTMP 直播流配置 application
rtmplive { live on; #为 rtmp 引擎设置最哈拉雷接数。默许为 off
max_connections 1024; } # HLS 直播流配置 application hls{ live on; hls
on; hls_path /usr/local/var/www/hls; hls_fragment 1s; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
rtmp {
server {
#监听的端口
listen 1935;
# RTMP 直播流配置
application rtmplive {
live on;
#为 rtmp 引擎设置最大连接数。默认为 off
max_connections 1024;
}
# HLS 直播流配置
application hls{
live on;
hls on;
hls_path /usr/local/var/www/hls;
hls_fragment 1s;
}
}
}

② 在http中添加 hls 的配置

location /hls { # Serve HLS fragments types {
application/vnd.apple.mpegurl m3u8; video/mp2t ts; } root
/usr/local/var/www; #add_header Cache-Controll no-cache; expires -1; }

1
2
3
4
5
6
7
8
9
10
location /hls {
# Serve HLS fragments
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /usr/local/var/www;
#add_header Cache-Controll no-cache;
expires -1;
}

   gear1/prog_index.m3u8

3. 重启nginx服务

重启nginx服务,浏览器中输入
http://localhost:8080,是或不是出现欢迎界面确定nginx重启成功。

Shell

nginx -s reload

1
nginx -s reload

   #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111

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

当服务器端接收到采访视频录制端传输过来的视频流时,要求对其进展解析编码,推送RTMP/HLS格式视频流至摄像播放端。寻常使用的常见编码库方案,如x264编码、faac编码、ffmpeg编码等。

由于 FFmpeg
工具集合了各类旋律、视频格式编码,大家得以先行选择FFmpeg进行转换格式、编码推流。

1.安装 FFmpeg 工具

Shell

brew install ffmpeg

1
brew install ffmpeg

2.推流MP4文件

视频文件地址:/Users/gao/Desktop/video/test.mp3
推流拉流地址:rtmp://localhost:1935/rtmplive/home,rtmp://localhost:1935/rtmplive/home

Shell

//RTMP 协议流 ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec
libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home  
//HLS 协议流 ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec
libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv
-q 10 rtmp://10.14.221.17:1935/hls/test

1
2
3
4
5
//RTMP 协议流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home
 
//HLS 协议流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

注意
当我们举行推流之后,可以设置VLC、ffplay(支持rtmp合计的摄像播放器)本地拉流举行现身说法

3.FFmpeg推流命令

① 视频文件进行直播

Shell

ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264
-vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10
rtmp://192.168.1.101:1935/hls/test ffmpeg -re -i
/Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline
-acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10
rtmp://10.14.221.17:1935/hls/test

1
2
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://192.168.1.101:1935/hls/test
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

② 推流视频头+桌面+迈克风录制举办直播

Shell

ffmpeg -f avfoundation -framerate 30 -i “1:0” \-f avfoundation
-framerate 30 -video_size 640×480 -i “0” \-c:v libx264 -preset
ultrafast \-filter_complex
‘overlay=main_w-overlay_w-10:main_h-overlay_h-10’ -acodec libmp3lame
-ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test

1
ffmpeg -f avfoundation -framerate 30 -i "1:0" \-f avfoundation -framerate 30 -video_size 640×480 -i "0" \-c:v libx264 -preset ultrafast \-filter_complex ‘overlay=main_w-overlay_w-10:main_h-overlay_h-10’ -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test

越来越多命令,请参考:
FFmpeg处理RTMP流媒体的下令大全
FFmpeg常用推流命令

   gear2/prog_index.m3u8

七、H5 直播摄像播放

挪动端iOS和 Android
都后天协理HLS协议,做好视频采集端、摄像流推流服务之后,便足以直接在H5页面配置
video 标签播放直播摄像。

XHTML

<video controls preload=”auto” autoplay=”autoplay” loop=”loop”
webkit-playsinline> <source src=””
type=”application/vnd.apple.mpegurl” /> <p class=”warning”>Your
browser does not support HTML5 video.</p> </video>

1
2
3
4
<video controls preload="auto" autoplay="autoplay" loop="loop" webkit-playsinline>
<source src="http://10.14.221.8/hls/test.m3u8" type="application/vnd.apple.mpegurl" />
<p class="warning">Your browser does not support HTML5 video.</p>
</video>

ps:①
video标签添加webkit-playsinline品质(iOS扶助)是承保视频在网页中内嵌播放。
② 针对微信浏览器,video标签层级最高的题材,必要报名添加白名单,请参照
http://bbs.mb.qq.com/thread-1242581-1-1.html?ptlang=2052。

   #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=484444

八、总结

本文从视频采访上传,服务器处理摄像推流,以及H5页面播放直播视频一整套流水线,具体阐释了直播落成原理,已毕进程中会遭受许多特性优化难题。

① H5 HLS 限量必须是H264+AAC编码。

② H5 HLS 播放卡顿难题,server 端可以搞活分片策略,将 ts 文件放在 CDN
上,前端可尽量做到 DNS 缓存等。

③ H5
直播为了达到更好的实时互动,也得以应用RTMP协议,通过video.js心想事成播放。

参考资料:

  • 何以搭建一个完好的摄像直播系统?
  • WebRTC相关的canvas与video
  • 使用 WebSockets 举行 HTML5
    摄像直播
  • 有关直播,所有的技术细节都在此地了(一)
  • 有关直播,所有的技术细节都在此处了(二)
  • 有关直播,所有的技术细节都在此地了(三)
  • JS解码项目jsmpeg

    3 赞 7 收藏
    评论

美高梅开户网址 28

   gear3/prog_index.m3u8

   #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777

   gear4/prog_index.m3u8

可以观察 HLS 协商本质如故一个个的 HTTP 请求 /
响应,所以适应性很好,不会遇到防火墙影响。但它也有一个沉重的先天不足:延迟现象相当醒目。若是每个
ts 根据 5 秒来切分,一个 m3u8 放 6 个 ts 索引,那么至少就会牵动 30
秒的推移。借使缩减每个 ts 的尺寸,裁减 m3u8
中的索引数,延时确实会压缩,但会带来更频仍的缓冲,对服务端的请求压力也会加倍增添。所以不得不依照实际情状找到一个折中的点。

对此支撑 HLS 的浏览器来说,间接那样写就能播放了:

   height=“300” width=“400” preload=“auto” autoplay=“autoplay”
loop=“loop” webkit-playsinline=“true”>

留神:HLS 在 PC 端仅协助safari浏览器,类似chrome浏览器采取HTML5
video标签不可能播放 m3u8
格式,可径直动用网上一些比较早熟的方案,如:sewise-player、MediaElement、videojs-contrib-hls、jwplayer。

  1. Real Time Messaging Protocol

Real 提姆e Messaging Protocol(简称 RTMP)是 Macromedia
开发的一套视频直播协议,现在属于 Adobe。这套方案需求搭建专门的 RTMP
流媒体服务如 Adobe Media Server,并且在浏览器中只可以选取 Flash
完成播放器。它的实时性至极好,延迟很小,但无法支撑移动端 WEB
播放是它的硬伤。

固然如此不可能在iOS的H5页面播放,可是对于iOS原生应用是可以协调写解码去分析的,
RTMP 延迟低、实时性较好。

浏览器端,HTML5 video标签不可能播放 RTMP 协议的视频,可以经过 video.js
来落成。

   videojs.options.flash.swf = ‘video.swf’;

   videojs(‘example_video_1′).ready(function() {

   this.play();

   });

  1. 摄像流协议HLS与RTMP相比11

二、直播形式

直播方式

眼前直播突显形式,常常以YY直播、映客直播那种页面居多,可以看出其协会能够分为三层:①
背景摄像层 ② 关切、评论模块 ③ 点赞动画

而现在H5类似直播页面,完成技术困难不大,其得以因而落实格局分为:①
尾部摄像背景使用video摄像标签落成播放 ② 关切、评论模块利用 WebScoket
来实时发送和接到新的音讯通过DOM 和 CSS3 完成 ③ 点赞利用 CSS3 动画

叩问完直播情势之后,接下去整体精晓直播流程。

三、直播全部流程

直播整体流程大概可分为:

视频采集端:可以是计算机上的音视频输入设备、或手机端的视频头、或Mike风,近期以活动端手机视频为主。

直播流摄像服务端:一台Nginx服务器,采集视频录制端传输的视频流(H264/ACC编码),由服务器端举办解析编码,推送RTMP/HLS格式视频流至视频播放端。

视频播放端:可以是计算机上的播放器(Quick提姆e
Player、VLC),手机端的native播放器,还有就是 H5
的video标签等,近期要么以手机端的native播放器为主。

直播全部流程

四、H5 录制摄像

对于H5摄像录制,可以选用强劲的 webRTC (Web Real-提姆e
Communication)是一个扶助网页浏览器进行实时语音对话或摄像对话的技艺,缺点是只在
PC 的 Chrome 上帮衬较好,移动端帮忙不太得意扬扬。

  1. 接纳 webRTC 录制摄像基本流程

① 调用window.navigator.webkitGetUserMedia()获取用户的PC视频头摄像数据。


将获得到视频流数据转换成window.webkitRTCPeerConnection(一种摄像流数据格式)。

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

注意:尽管谷歌一直在推WebRTC,最近已有成千成万成型的成品出现,可是多数活动端的浏览器还不协理webRTC(最新iOS
10.0也不匡助),所以的确的视频录制如故要靠客户端(iOS,Android)来落到实处,效果会好有的。

WebRTC支持度

  1. iOS原生应用调用视频头录制视频流程


音视频的收集,利用AVCaptureSession和AVCaptureDevice可以收集到原始的音视频数据流。


对视频展开H264编码,对旋律举行AAC编码,在iOS中分别有曾经封装好的编码库(x264编码、faac编码、ffmpeg编码)来兑现对音摄像的编码。

③ 对编码后的音、视频数据开展组装封包。

④ 建立RTMP连接并上推到服务端。

视频流程

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

  1. 安装nginx、nginx-rtmp-module

① 先clone nginx门类到当地:

   brew tap homebrew/nginx

② 执行安装nginx-rtmp-module

    brew install nginx-full –with-rtmp-module

  1. nginx.conf配置文件,配置RTMP、HLS

查找到nginx.conf配置文件(路径/usr/local/etc/nginx/nginx.conf),配置RTMP、HLS。

① 在http节点此前增进 rtmp 的布署内容:

12

② 在http中添加 hls 的配置

12

  1. 重启nginx服务

重启nginx服务,浏览器中输入

   nginx -s reload

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

当服务器端接收到采访视频录制端传输过来的视频流时,需求对其进展解析编码,推送RTMP/HLS格式摄像流至摄像播放端。经常使用的常见编码库方案,如x264编码、faac编码、ffmpeg编码等。

是因为 FFmpeg
工具集合了种种节奏、摄像格式编码,大家能够先行选取FFmpeg举行转移格式、编码推流。

1.安装 FFmpeg 工具

   brew install ffmpeg

2.推流MP4文件

录像文件地址:/Users/gao/Desktop/video/test.mp4

推流拉流地址:rtmp://localhost:1935/rtmplive/home,rtmp://localhost:1935/rtmplive/home

   //RTMP 协议流

   ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264
-acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home

   //HLS 协议流

   ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264
-vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10
rtmp://10.14.221.17:1935/hls/test

专注:
当大家举行推流之后,可以设置VLC、ffplay(协助rtmp磋商的视频播放器)本地拉流进行出现说法

3.FFmpeg推流命令

① 视频文件举行直播

   ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264
-vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10
rtmp://192.168.1.101:1935/hls/test

   ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264
-vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10
rtmp://10.14.221.17:1935/hls/test

② 推流摄像头+桌面+迈克风录制举行直播

ffmpeg -f avfoundation -framerate 30 -i “1:0″ \\\\-f avfoundation
-framerate 30 -video_size 640×480 -i “0” \\\\-c:v libx264 -preset
ultrafast \\\\-filter_complex
‘overlay=main_w-overlay_w-10:main_h-overlay_h-10′ -acodec libmp3lame
-ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test

更加多命令,请参考:

FFmpeg处理RTMP流媒体的吩咐大全

FFmpeg常用推流命令

七、H5 直播摄像播放

挪动端iOS和 Android
都自然扶助HLS协议,做好视频采集端、视频流推流服务之后,便得以一贯在H5页面配置
video 标签播放直播视频。

Your browser does not support HTML5 video.

ps:①
video标签添加webkit-playsinline属性(iOS辅助)是有限帮助视频在网页中内嵌播放。

② 针对微信浏览器,video标签层级最高的难点,须要提请添加白名单,请参照

八、总结

本文从视频采访上传,服务器处理摄像推流,以及H5页面播放直播视频一整套流水线,具体阐释了直播达成原理,完结进度中会遭逢很多属性优化难点。

① H5 HLS 限量必须是H264+AAC编码。

② H5 HLS 播放卡顿难题,server 端可以盘活分片策略,将 ts 文件放在 CDN
上,前端可尽量做到 DNS 缓存等。

③ H5
直播为了达成更好的实时互动,也得以动用RTMP协议,通过video.js达成播放。

参考资料:

如何搭建一个全体的视频直播系统?

WebRTC相关的canvas与video

行使 WebSockets 进行 HTML5 录像直播

有关直播,所有的技术细节都在此间了(一)

至于直播,所有的技术细节都在此地了(二)

关于直播,所有的技术细节都在这边了(三)

JS解码项目jsmpeg

   

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图