以及探究移动端HTML5直播可行性方案

H5直播起航

2016/10/31 · HTML5 ·
开发

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

图片 1

前言

近些日子抽空对日前可比火的摄像直播,做了下商量与搜求,驾驭其全体完毕流程,以及商讨移动端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 的服务器必要做两件事:

  • 编码:以 H.263 格式对图像进行编码,以 VCD 仍旧 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。

2. Real Time Messaging Protocol

Real Time 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>

以及探究移动端HTML5直播可行性方案。3. 摄像流协议HLS与RTMP相比

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

二、直播格局

图片 2

当前直播展现情势,常常以YY直播、映客直播这种页面居多,可以看看其组织得以分为三层:①
背景录像层 ② 关切、商量模块 ③ 点赞动画

而前日H5类似直播页面,完结才干难点非常的小,其能够通过完毕情势分为:①
尾部摄像背景使用video摄像标签达成广播 ② 关切、商讨模块利用 WebScoket
来实时发送和接到新的消息通过DOM 和 CSS3 达成 ③ 点赞利用 CSS3 动画

刺探完直播方式之后,接下去全部了然直播流程。

三、直播全部流程

直播全部流程大约可分为:

  • 录制搜聚端:能够是计算机上的音录像输入设备、或手提式有线电电话机端的录制头、或Mike风,前段时间以移动端手提式无线电话机摄像为主。
  • 直播流摄像服务端:一台Nginx服务器,收罗摄像摄像端传输的录像流(H264/ACC编码),由劳务器端实行剖判编码,推送RTMP/HLS格式摄像流至摄像播放端。
  • 摄像播放端:能够是Computer上的播放器(QuickTime
    Player、VLC),手机端的native播放器,还会有就是 H5
    的video标签等,方今恐怕以手提式有线电话机端的native播放器为主。

图片 3

四、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)来实现,效果会好有的。
图片 4

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


音录制的收罗,利用AVCaptureSession和AVCaptureDevice可以搜聚到原本的音摄像数据流。

对录像实行H264编码,对旋律实行AAC编码,在iOS中分别有曾经封装好的编码库(以及探究移动端HTML5直播可行性方案。x264编码、faac编码、ffmpeg编码)来完成对音录像的编码。
③ 对编码后的音、录制数据开展组装封包。
④ 营造RTMP连接并上推到服务端。

图片 5

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

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

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;
}
}
}

以及探究移动端HTML5直播可行性方案。② 在http中添加 hls 的配置

location /hls { # Serve HLS fragments types {
application/vnd.apple.mpegurl m3u8; video/mp2t ts; } root
/usr/local/var/www; #add_以及探究移动端HTML5直播可行性方案。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. 重启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:1933/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常用推流命令

七、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。

八、总结

正文从摄像访谈上传,服务器管理录制推流,以及H5页面播放直播录像一整套流程,具体阐释了直播完成原理,达成进程中会际遇相当多属性优化难点。

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

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

③ H5
直播为了落成越来越好的实时互动,也足以利用RTMP协议,通过video.js落到实处播放。

参考资料:

  • 怎么着搭建二个完好的摄像直播系统?
  • WebRTC相关的canvas与video
  • 利用 WebSockets 举办 HTML5
    摄像直播
  • 有关直播,全部的技能细节都在此地了(一)
  • 有关直播,全部的技巧细节都在那边了(二)
  • 有关直播,全体的手艺细节都在此间了(三)
  • JS解码项目jsmpeg

    3 赞 7 收藏
    评论

图片 6

You may also like...

发表评论

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

网站地图xml地图