一抬手一动脚 WEB 端近期以 HLS

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

查找到nginx.conf配置文件(路线/usr/local/etc/nginx/nginx.conf卡塔 尔(阿拉伯语:قطر‎,配置RTMP、HLS。

① 在http节点早前拉长 rtmp 的布局内容:

rtmp { server { #监听的端口 listen 一九三一; # 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;
}

3. 录像流公约HLS与RTMP比较

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

1. HTTP Live Streaming

HTTP Live Streaming(简单称谓 HLS卡塔 尔(阿拉伯语:قطر‎是一个依据 HTTP 的录制流合同,由 Apple
集团达成,Mac OS 上的 QuickTime、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 的长短,减弱 m3u第88中学的索引数,延时实在会减弱,但会带动更频繁的缓冲,对服务端的倡议压力也会成倍扩展。所以不能不依照真实景况找到叁个折中的点。

对此支撑 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。

3. 重启nginx服务

重启nginx服务,浏览器中输入
http://localhost:8080,是还是不是现身款待分界面鲜明nginx重启成功。

Shell

nginx -s reload

1
nginx -s reload

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

当服务器端接受到访谈录像录像端传输过来的录制流时,供给对其进展深入分析编码,推送RTMP/HLS格式录制流至摄像播放端。平常选拔的多如牛毛编码库方案,如x264编码、faac编码、ffmpeg编码等。

出于 FFmpeg
工具集结了多样旋律、录像格式编码,大家得以优先选用FFmpeg进行调换格式、编码推流。

1.安装 FFmpeg 工具

Shell

brew install ffmpeg

1
brew install ffmpeg

2.推流MP4文件

录制文件地址:/Users/gao/Desktop/video/test.DVD
推流拉流地址:rtmp://localhost:1934/rtmplive/home,rtmp://localhost:一九三五/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

② 推流摄像头+桌面+Mike风录像进行直播

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常用推流命令

1. 使用 webRTC 摄像录像基本流程

① 调用 window.navigator.webkitGetUserMedia()
获取客户的PC录像头录制数据。
② 将获得到录制流数据转换来 window.webkitRTCPeerConnection
(风流浪漫种录制流数据格式)。
③ 利用 WebScoket 将录制流数据传输到服务端。

注意:即使Google一向在推WebRTC,近些日子本来就有好多成型的出品现身,可是多数活动端的浏览器还不帮忙webRTC(最新iOS
10.0也不帮助卡塔尔,所以的确的录像摄像依旧要靠顾客端(iOS,Android卡塔 尔(阿拉伯语:قطر‎来兑现,效果会好一些。
图片 1

二、直播方式

图片 2

当下直播呈现形式,平时以YY直播、映客直播这种页面居多,能够看来其结构可以分成三层:①
背景摄像层 ② 关怀、探究模块 ③ 打call动漫

而如今H5相似直播页面,完毕才能难关非常的小,其得以由此完结格局分为:①
后面部分录像背景使用video录像标签完毕广播 ② 关切、商量模块利用 WebScoket
来实时发送和收受新的音信通过DOM 和 CSS3 实现 ③ 点赞利用 CSS3 动画

问询完直播情势之后,接下去全部精晓直播流程。

八、总结

正文从录像访谈上传,服务器管理摄像推流,以至H5页面播放直播录制一条龙流水生产线,具体阐释了直播完结原理,达成进度中会境遇好些性情质优化难点。

① H5 HLS 范围必须是H264+AAC编码。

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

③ H5
直播为了到达更加好的实时相互影响,也能够行使RTMP协议,通过video.js兑现广播。

仿照效法资料:

  • 什么搭建二个完整的摄像直播系统?
  • WebRTC相关的canvas与video
  • 动用 WebSockets 进行 HTML5
    录像直播
  • 关于直播,全体的技巧细节都在这里边了(大器晚成卡塔尔国
  • 有关直播,全数的能力细节都在那处了(二卡塔尔
  • 有关直播,全部的才具细节都在这里地了(三卡塔尔
  • JS解码项目jsmpeg

    3 赞 7 收藏
    评论

图片 3

三、直播全体流程

直播全部流程差非常少可分为:

  • 录像搜罗端:能够是电脑上的音录像输入设备、或手提式无线电话机端的摄像头、或迈克风,前段时间以运动端手提式有线电电话机录制为主。
  • 直播流录像服务端:大器晚成台Nginx服务器,收集摄像摄像端传输的录制流(H264/ACC编码),由服务器端实行深入解析编码,推送RTMP/HLS格式摄像流至录像播放端。
  • 摄像播放端:能够是计算机上的播放器(QuickTime
    Player、VLC卡塔尔国,手提式有线电电话机端的native播放器,还应该有就是 H5
    的video标签等,近期要么以手提式无线电话机端的native播放器为主。

图片 4

生机勃勃、摄像流左券HLS与RTMP

前言

近些日子抽空对日前可比火的录像直播,做了向下探底究与探究,理解其全部达成流程,以致探讨移动端HTML5直播可行性方案。

意识脚下 WEB 上主流的录制直播方案有 HLS 和 RTMP,移动 WEB 端近年来以 HLS
为主(HLS存在延迟性难题,也能够依靠
video.js 采纳RTMP卡塔尔,PC端则以
RTMP 为主实时性较好,接下去将围绕那二种摄像流公约来扩充H5直播焦点分享。

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


音摄像的征集,利用AVCaptureSession和AVCaptureDevice能够搜聚到原有的音摄像数据流。

对录像进行H264编码,对旋律实行AAC编码,在iOS中分别有已经封装好的编码库(x264编码、faac编码、ffmpeg编码卡塔尔来促成对音录制的编码。
③ 对编码后的音、摄像数据开展组装封包。
④ 创设RTMP连接并上推到服务端。

图片 5

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

四、H5 录像录像

对此H5摄像录制,能够动用刚劲的 webRTC (Web Real-Time
Communication卡塔 尔(英语:State of Qatar)是三个支撑网页浏览器举行实时语音对话或录制对话的手艺,缺点是只在
PC 的 Chrome 上支撑较好,移动端援助不太美丽。

H5直播起航

2016/10/31 · HTML5 ·
开发

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

图片 6

七、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帮忙卡塔尔是确认保障录像在网页中内嵌播放。
② 针对Wechat浏览器,video标签层级最高的难题,要求提请增添白名单,请参照
http://bbs.mb.qq.com/thread-1242581-1-1.html?ptlang=2052。

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

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>

相关文章