前端开发,html5直播技术

H5直播起航

2016/10/31 · HTML5 ·
开发

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

澳门葡京 1

初稿地址..直播h5

前言

如今抽空对脚下相比火的视频直播,做了下研商与商量,精通其全部完成流程,以及探究移动端HTML5直播可行性方案。

发现眼前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端近期以 HLS
为主(HLS存在延迟性难题,也得以依赖 video.js 选择RTMP),PC端则以
RTMP 为主实时性较好,接下去将围绕那两种摄像流协议来展开H5直播主旨分享。

前端开发:H5直播起航,前端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相比

澳门葡京 2

前言

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

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

一、视频流协议HLS与RTMP

近日忙里偷闲对现阶段可比火的视频直播,做了下切磋与探索,明白其完全已毕流程,以及研讨移动端HTML5直播可行性方案。

二、直播方式

澳门葡京 3

 

眼前直播显示方式,经常以YY直播、映客直播那种页面居多,可以看到其结构得以分为三层:
① 背景摄像层
② 关心、评论模块
③ 点赞动画

而方今H5类似直播页面,已毕技能难点不大,其可以透过完结格局分为:
① 底部视频背景使用video摄像标签完毕播放
② 关心、评论模块利用 WebScoket 来实时发送和吸纳新的音讯通过DOM 和 CSS3
达成
③ 点赞利用 CSS3 动画

询问完直播格局之后,接下去全体掌握直播流程。
三、直播全部流程
直播全部流程大概可分为:

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

澳门葡京 4

 

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

一、视频流协议HLS与RTMP

  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 的服务器须求做两件事:

浏览器采纳的是 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相比

澳门葡京 5

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

#前端开发,html5直播技术。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-提姆e
Communication)是一个支撑网页浏览器进行实时语音对话或视频对话的技艺,缺点是只在
PC 的 Chrome 上支撑较好,移动端辅助不太美观。

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

注意:


 

 

即使谷歌一贯在推WebRTC,近日已有不少成型的成品现身,然而大多数移动端的浏览器还不接济webRTC(最新iOS
10.0也不接济),所以的确的视频录制仍然要靠客户端(iOS,Android)来兑现,效果会好一些。

澳门葡京 6

WebRTC支持度

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

    音视频的募集,利用AVCaptureSession和AVCaptureDevice能够搜集到原来的音摄像数据流。

    对视频举行H264编码,对旋律举办AAC编码,在iOS中分别有一度封装好的编码库(x264编码、faac编码、ffmpeg编码)来落实对音视频的编码。
    ③ 对编码后的音、视频数据进行组装封包。
    ④ 建立RTMP连接并上推到服务端。
    澳门葡京 7

二、直播形式

澳门葡京 8

 

当前直播显示格局,平时以YY直播、映客直播那种页面居多,可以见见其社团得以分为三层:
① 背景视频层
② 关怀、评论模块
③ 点赞动画

而前些天H5类似直播页面,完结技能难题不大,其可以透过兑现形式分为:
① 底部视频背景使用video视频标签达成播放
② 关切、评论模块利用 WebScoket 来实时发送和吸纳新的音信通过DOM 和 CSS3
已毕
③ 点赞利用 CSS3 动画

打探完直播格局之后,接下去全部掌握直播流程。
三、直播全部流程
直播全体流程大概可分为:

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

澳门葡京 9

 

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

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>

一、摄像流协议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 的安顿内容:

澳门葡京 10

② 在http中添加 hls 的配置

澳门葡京 11

四、H5 录制视频

对此H5摄像录制,可以应用强劲的 webRTC (Web Real-提姆e
Communication)是一个帮助网页浏览器举行实时语音对话或视频对话的技艺,缺点是只在
PC 的 Chrome 上扶助较好,移动端协理不太依心像意。

注意:

 

 

虽说谷歌(Google)一向在推WebRTC,方今已有诸多成型的成品出现,不过大多数平移端的浏览器还不帮忙webRTC(最新iOS
10.0也不帮衬),所以的确的视频录制依然要靠客户端(iOS,Android)来贯彻,效果会好有的。

澳门葡京 12
WebRTC支持度

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

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

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

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

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

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 的陈设内容:

澳门葡京 14

② 在http中添加 hls 的配置

澳门葡京 15

二、直播格局

澳门葡京 16

眼前直播展现方式,平时以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.mp3
推流拉流地址: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 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常用推流命令

3. 重启nginx服务

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

nginx -s reload

三、直播全部流程

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

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

澳门葡京 17

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>

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

当服务器端接收到采访视频录制端传输过来的摄像流时,须要对其进行解析编码,推送RTMP/HLS格式视频流至视频播放端。常常选取的常见编码库方案,如x264编码、faac编码、ffmpeg编码等。
鉴于 FFmpeg
工具集合了各类节奏、视频格式编码,我们可以优先选择FFmpeg举行转换格式、编码推流。

1.安装 FFmpeg 工具

brew install ffmpeg

2.推流MP4文件

摄像文件地址:/Users/gao/Desktop/video/test.mp3
推流拉流地址: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常用推流命令

四、H5 录制视频

对此H5视频录制,可以行使强劲的 webRTC (Web Real-提姆e
Communication)是一个帮衬网页浏览器进行实时语音对话或视频对话的技术,缺点是只在
PC 的 Chrome 上帮衬较好,移动端协助不太杰出。

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

八、总结

本文从视频采访上传,服务器处理视频推流,以及H5页面播放直播视频一整套流程,具体阐释了直播落成原理,完结进程中会遭遇很多质量优化难题。

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

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

1. 选择 webRTC 录制摄像基本流程

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

注意:就算谷歌一贯在推WebRTC,近日已有好多成型的产品出现,然而一大半运动端的浏览器还不协助webRTC(最新iOS
10.0也不帮衬),所以的确的摄像录制仍然要靠客户端(iOS,Android)来完毕,效果会好有的。
澳门葡京 18

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

八、总结

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

① H5 HLS 限量必须是H264+AAC编码。
② H5 HLS 播放卡顿难点,server 端可以做好分片策略,将 ts 文件放在 CDN
上,前端可尽量做到 DNS 缓存等。
③ H5 直播为了完结更好的实时互动,也足以使用RTMP协议,通过video.js
心想事成播放。

前言
前不久忙里偷闲对当前相比火的视频直播,做了下研商与商量,了然其总体完毕流程,以及探索移…

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


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

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

澳门葡京 19

浏览器选择的是 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.mp4
推流拉流地址: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

② 推流视频头+桌面+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常用推流命令

   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 收藏
    评论

澳门葡京 20

   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 动画

刺探完直播格局之后,接下去全部精晓直播流程。

三、直播全体流程

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

视频采集端:能够是计算机上的音摄像输入设备、或手机端的摄像头、或迈克风,近期以运动端手机视频为主。

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

视频播放端:可以是电脑上的播放器(Quick提姆e
Player、VLC),手机端的native播放器,还有就是 H5
的video标签等,近来或者以手机端的native播放器为主。

直播全部流程

四、H5 录制视频

对于H5摄像录制,可以利用强劲的 webRTC (Web Real-Time
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.mp3

推流拉流地址: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

   

相关文章

发表评论

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

*
*
Website