Betway必威WebSocket+MSE——HTML5 直播技术分析。WebSocket+MSE——HTML5 直播技术分析,websockethtml5

作者 |
刘博(又拍云多媒体开发工程师)

WebSocket+MSE——HTML5 直播技术分析,websockethtml5

笔者 | 刘博(又拍云多媒体开发工程师)

此时此刻以满足于炎热的位移 Web 端直播需要,一密密麻麻的 HTML5
直播技术飞速的前进起。

周边的可用于 HTML5 的直播技术有 HLS、WebSocket 与
WebRTC。今天自我朝大家介绍WebSocket 与 MSE
相关的艺中心,并于末经过一个实例来展示具体用法。

眼前以满足于炎热的活动 Web 端直播需要,一多重之 HTML5
直播技术迅速的升华起。

章大纲

  • WebSocket 协议介绍
  • WebSocket Client/Server API介绍
  • MSE 介绍
  • fMP4 介绍
  • Demo 展示

科普的可用于 HTML5 的直播技术有 HLS、WebSocket 与
WebRTC。今天本人向大家介绍WebSocket 与 MSE
相关的技能中心,并当最后通过一个实例来显示具体用法。

WebSocket

普普通通的 Web 应用都是绕在 HTTP 的请/响应型构建的。所有的 HTTP
通信都经过客户端来控制,由客户端向服务器发一个央,服务器收到和处理完毕后更回到结果受客户端,客户端将数据表现出来。由于这种模式不可知满足实时应用需求,于是起了
SSE、Comet 等 “服务器推” 的增长连技术。

WebSocket 是依据 TCP 连接之上的通信协议,可以于单个 TCP
连接达拓展全双工的通信。WebSocket 在 2011 年被 IETF 定为规范 RFC
6455,并于 RFC 7936 补充规范,WebSocket API 被 W3C 定为业内。

WebSocket 是独立地创造以 TCP 上之商谈,HTTP 协议被的那些概念都同
WebSocket 没有涉及,唯一涉及的是运 HTTP 协议的 101
状态码进行商谈切换时,使用的 TCP 端口是 80,可以绕了大部分防火墙的限量。

Betway必威 1

文章大纲

  • WebSocket 协议介绍
  • WebSocket Client/Server API介绍
  • MSE 介绍
  • fMP4 介绍
  • Demo 展示

WebSocket 握手

为还便民地配置新说道,HTTP/1.1 引入了 Upgrade
机制,使得客户端与服务端之间可以因已有的HTTP语法升级至其它协议。这个机制当
RFC7230 的 6.7 Upgrade 一省吃发生详细描述。

倘发起 HTTP/1.1 协议升级,客户端必须在求头部被指定这点儿只字段 ▽

> Connection: Upgrade
Upgrade: protocol-name[/protocol-version]

要服务端同意升级,那么得这么响应 ▽

> HTTP/1.1 101 Switching Protocols
Connection: upgrade
Upgrade: protocol-name[/protocol-version]
[... data defined by new protocol ...]

可观看,HTTP Upgrade 响应的状态码是
101,并且响应正文可以采取新协议定义的多少格式。

WebSocket 握手就采用了这种 HTTP Upgrade
机制。一旦握手完成,后续数据传直接在 TCP 上完成。

WebSocket

日常的 Web 应用都是环在 HTTP 的乞求/响应型构建的。所有的 HTTP
通信都由此客户端来决定,由客户端向服务器发一个要,服务器收到和处理完毕后再度回来结果为客户端,客户端将数据显现出来。由于这种模式不克满足实时应用需求,于是出现了
SSE、Comet 等 “服务器推” 的长连技术。

WebSocket 是根据 TCP 连接之上的通信协议,可以当单个 TCP
连接上开展全双工的通信。WebSocket 在 2011 年被 IETF 定为专业 RFC
6455,并受 RFC 7936 补充规范,WebSocket API 被 W3C 定为正规。

WebSocket 是单独地创建于 TCP 上之说道,HTTP 协议被的那些概念都跟
WebSocket 没有关联,唯一涉及的凡利用 HTTP 协议的 101
状态码进行商讨切换时,使用的 TCP 端口是 80,可以绕了大部分防火墙的限。

Betway必威 2

WebSocket JavaScript API

眼下主流的浏览器提供了 WebSocket 的 API
接口,可以发送信息(文本或者二进制)给服务器,并且吸纳事件驱动的响应数据。

Step1. 反省浏览器是否支持 WebSocket

> if(window.WebSocket) {
    // WebSocket代码
}

Step2. 白手起家连接

> var ws = new WebSocket('ws://localhost:8327');

Step3. 注册回调函数和收发数据

独家登记 WebSocket 对象的 onopen、onclose、onerror 以及 onmessage
回调函数。

经过ws.send()来开展发送数据,这里不仅可发送字符串,也得以发送 Blob 或
ArrayBuffer 类型的数。

若接受的凡二进制数据,需要将接连对象的格式设为 blob 或 arraybuffer。

ws.binaryType = 'arraybuffer';

WebSocket Golang API

服务器端 WebSocket 库我引进应用 Google 自己之 http://golang.org/x/net/websocket,可以非常方便的与 net/http
一起使用。也可以将 WebSocket 的 handler function 通过
websocket.Handler转换成 http.Handler,这样尽管足以跟 net/http
库一起用了。

接下来经 websocket.Message.Receive 来接收数据,通过
websocket.Message.Send 来发送数据。

实际代码可以扣押下面的 Demo 部分。

WebSocket 握手

为重新便宜地部署新协议,HTTP/1.1 引入了 Upgrade
机制,使得客户端以及服务端之间可以凭借已部分HTTP语法升级到其他协议。这个机制在
RFC7230 的 6.7 Upgrade 一节约被产生详细描述。

设提倡 HTTP/1.1 协议升级,客户端必须以伸手头部受到指定这简单个字段 ▽

> Connection: Upgrade
Upgrade: protocol-name[/protocol-version]

一旦服务端同意升级,那么用如此响应 ▽

> HTTP/1.1 101 Switching Protocols
Connection: upgrade
Upgrade: protocol-name[/protocol-version]
[... data defined by new protocol ...]

足见到,HTTP Upgrade 响应的状态码是
101,并且响应正文可以采用初说道定义的数额格式。

WebSocket 握手就用了这种 HTTP Upgrade
机制。一旦握手完成,后续数据传直接在 TCP 上完。

MSE

在介绍 MSE 之前,我们先瞧 HTML5<audio>和<video>
有怎么样限制。

HTML5<audio> 和 <video> 标签的限

  • 无支持流
  • 不支持 DRM 和加密
  • 可怜为难由定义控制, 以及保障跨浏览器的一致性
  • 编解码和打包在不同浏览器支持不同

MSE 是釜底抽薪 HTML5 的流问题。

Media Source Extensions(MSE)是 Chrome、Safari、Edge
等主流浏览器支持之一个初的Web API。MSE 是一个 W3C 标准,允许 JavaScript
动态构建 <video> 和 <audio> 的传媒流。它定义了对象,允许
JavaScript 传输媒体流片段及一个 HTMLMediaElement。

由此行使
MSE,你得动态地改媒体流一旦非欲另外插件。这叫前方端JavaScript可以做重新多的事务——
在 JavaScript 进行变更封装、处理,甚至转码。

虽说 MSE 不克被流直传输到 media tags 上,但是 MSE
提供了构建跨浏览器播放器的核心技术,让浏览器通过JavaScript
API来推音视频及 media tags 上。

WebSocket JavaScript API

时主流的浏览器提供了 WebSocket 的 API
接口,可以发送信息(文本或者二进制)给服务器,并且吸纳事件驱动的应数据。

Step1. 检查浏览器是否支持 WebSocket

> if(window.WebSocket) {
    // WebSocket代码
}

Step2. 立连接

> var ws = new WebSocket('ws://localhost:8327');

Step3. 报了名回调函数和收发数据

个别注册 WebSocket 对象的 onopen、onclose、onerror 以及 onmessage
回调函数。

由此ws.send()来进行发送数据,这里不仅可以发送字符串,也得以发送 Blob 或
ArrayBuffer 类型的数目。

一经接到的凡二进制数据,需要用连接对象的格式设为 blob 或 arraybuffer。

ws.binaryType = 'arraybuffer';

WebSocket Golang API

劳务器端 WebSocket 库我推荐下 Google 自己之 http://golang.org/x/net/websocket,可以好方便的和
net/http 一起利用。也得以用 WebSocket 的 handler function 通过
websocket.Handler转换成 http.Handler,这样虽足以跟 net/http
库一起以了。

然后经 websocket.Message.Receive 来接收数据,通过
websocket.Message.Send 来发送数据。

实际代码可以拘留下的 Demo 部分。

Browser Support

经 caniuse 来检查是不是浏览器支持情况。

Betway必威 3

通过 MediaSource.isTypeSupported() 可以进一步地检查 codec MIME
类型是否支持。

MSE

以介绍 MSE 之前,我们先行看看 HTML5<audio>和<video>
有安限制。

HTML5<audio> 和 <video> 标签的限量

  • 非支持流
  • 不支持 DRM 和加密
  • 杀不便由定义控制, 以及保障跨浏览器的一致性
  • 编解码和打包在不同浏览器支持不同

MSE 是釜底抽薪 HTML5 的流问题。

Media Source Extensions(MSE)是 Chrome、Safari、Edge
等主流浏览器支持之一个初的Web API。MSE 是一个 W3C 标准,允许 JavaScript
动态构建 <video> 和 <audio> 的传媒流。它定义了目标,允许
JavaScript 传输媒体流片段及一个 HTMLMediaElement。

经过行使
MSE,你可动态地改媒体流一旦休欲任何插件。这给眼前端JavaScript可以举行更多的工作——
在 JavaScript 进行反封装、处理,甚至转码。

尽管 MSE 不可知吃流直传输到 media tags 上,但是 MSE
提供了构建跨浏览器播放器的核心技术,让浏览器通过JavaScript
API来推音视频及 media tags 上。

fMP4

较常用之视频封装格式有 WebM 和 fMP4。

WebM 和 WebP 是个别个姐妹项目,都是由 Google 赞助之。由于 WebM 是因
Matroska 的器皿格式,天生是流式的,很吻合用在流媒体领域里。

下要介绍一下 fMP4 格式。

咱都理解 MP4 是出于同名目繁多之 Boxes 组成的。普通的 MP4
的是嵌套结构的,客户端必须要起来加载一个 MP4
文件,才能够完整播放,不能够打中间一段落开始播放。

比方 fMP4 由同样系列的有组成,如果服务器支持 byte-range
请求,那么,这些部分可以单独的拓呼吁到客户端进行广播,而休待加载整个文件。

以更加形象的证实及时一点,下面我介绍几单常因此的辨析 MP4 文件之工具。

gpac,原名
mp4box,是一个媒体开发框架,在那源码下发生雅量的传媒解析工具,可以以testapps;

  • mp4box.js,是 mp4box 的 Javascript 版本;
  • bento4,一个专门用来 MP4 的剖析工具;
  • mp4parser,在线 MP4 文件分析工具。

Browser Support

经 caniuse 来检查是不是浏览器支持情况。

Betway必威 4

通过 MediaSource.isTypeSupported() 可以进一步地反省 codec MIME
类型是否支持。

fragment mp4 VS non-fragment mp4

下面是一个 fragment mp4 文件通过 mp4parser(Online MPEG4
Parser )分析后底截图 ▽

Betway必威 5

下面是一个 non-fragment mp4 文件通过 mp4parser 分析后底截图 ▽

Betway必威 6

咱们好观看 non-fragment mp4 的不过顶层 box 类型非常少,而 fragment mp4
是出于同截同样截的 moof+mdat 组成的,它们就包含了足足的 metadata
信息以及数量, 可以直接 seek 到这位置上马播报。也就是说 fMP4
是一个流式的封装格式,这样还契合在网被展开流式传输,而不欲靠文件头之metadata。

Apple在WWDC 2016 大会上宣布会在 iOS 10、tvOS、macO S的 HLS 中支持
fMP4,可见fMP4 的前景非常的好。

值得一提的凡,fMP4、CMAF、ISOBMFF 其实都是近似的物。

MSE JavaScript API

由大层次上看,MSE 提供了

  • 一套 JavaScript API 来构建 media streams
  • 一个拼凑和缓存模型
  • 分辨部分 byte 流类型
  • WebM
  • ISO Base Media File Format
  • MPEG-2 Transport Streams

fMP4

比较常用的视频封装格式有 WebM 和 fMP4。

WebM 和 WebP 是少数只姐妹项目,都是由于 Google 赞助之。由于 WebM 是因
Matroska 的器皿格式,天生是流式的,很符合用当流媒体领域里。

脚要介绍一下 fMP4 格式。

我们还明白 MP4 是由同样层层之 Boxes 组成的。普通的 MP4
的是嵌套结构的,客户端必须使起来加载一个 MP4
文件,才能够整体播放,不克自中路一截开始广播。

设若 fMP4 由同样多样的一些组成,如果服务器支持 byte-range
请求,那么,这些有可以独自的展开呼吁到客户端进行播放,而未需加载整个文件。

为了进一步形象的征及时或多或少,下面我介绍几独常因此底解析 MP4 文件之工具。

gpac,原名
mp4box,是一个传媒开发框架,在该源码下有大量之传媒解析工具,可以动用testapps;

  • mp4box.js,是 mp4box 的 Javascript 版本;
  • bento4,一个特别用来 MP4 的分析工具;
  • mp4parser,在线 MP4 文件分析工具。

MSE 内部结构

Betway必威 7

MSE
本身的规划是未因任务一定的编解码和容器格式的,但是不同的浏览器支持程度是不平等的。

足由此传递一个 MIME 类型的字符串到静态方法:

> MediaSource.isTypeSupported来检查。比如 ▽
MediaSource.isTypeSupported('audio/mp3'); // false
MediaSource.isTypeSupported('video/mp4'); // true
MediaSource.isTypeSupported('video/mp4; codecs="avc1.4D4028, mp4a.40.2"'); // true

抱 Codec MIME string 的方好经在线的 [mp4info](http://nickdesaulniers.github.io/mp4info),或者使用命令行 mp4info
test.mp4 | grep Codecs,可以收获近似如下结果 ▽

> mp4info fmp4.mp4| grep Codec
    Codecs String: mp4a.40.2
    Codecs String: avc1.42E01E

当前,H.264 + AAC 的 MP4 容器在享有的浏览器还支持。

一般性的 MP4 文件是免克同 MSE 一起行使的, 需要用 MP4 进行 fragment 化。

反省一个 MP4 是否都 fragment 的法门 ▽

> mp4dump test.mp4 | grep "\[m"

如果是non-fragment会显示如下信 ▽

> mp4dump nfmp4.mp4 | grep "\[m"
[mdat] size=8+50873
[moov] size=8+7804
  [mvhd] size=12+96
    [mdia] size=8+3335
      [mdhd] size=12+20
      [minf] size=8+3250
    [mdia] size=8+3975
      [mdhd] size=12+20
      [minf] size=8+3890
            [mp4a] size=8+82
    [meta] size=12+78

如果已经 fragment,会显示如下的类似信息 ▽

>  mp4dump fmp4.mp4 | grep "\[m" | head -n 30
[moov] size=8+1871
  [mvhd] size=12+96
    [mdia] size=8+312
      [mdhd] size=12+20
      [minf] size=8+219
            [mp4a] size=8+67
    [mdia] size=8+371
      [mdhd] size=12+20
      [minf] size=8+278
    [mdia] size=8+248
      [mdhd] size=12+20
      [minf] size=8+156
    [mdia] size=8+248
      [mdhd] size=12+20
      [minf] size=8+156
  [mvex] size=8+144
    [mehd] size=12+4
[moof] size=8+600
  [mfhd] size=12+4
[mdat] size=8+138679
[moof] size=8+536
  [mfhd] size=12+4
[mdat] size=8+24490
[moof] size=8+592
  [mfhd] size=12+4
[mdat] size=8+14444
[moof] size=8+312
  [mfhd] size=12+4
[mdat] size=8+1840
[moof] size=8+600

把一个 non-fragment MP4 转换成 fragment MP4。

可利用 FFmpeg 的 -movflags 来转换。

对此本来文件为非 MP4 文件 ▽

> ffmpeg -i trailer_1080p.mov -c:v copy -c:a copy -movflags frag_keyframe+empty_moov bunny_fragmented.mp4

对旧文件就是 MP4 文件 ▽

> ffmpeg -i non_fragmented.mp4 -movflags frag_keyframe+empty_moov fragmented.mp4

或采取 mp4fragment ▽

> mp4fragment input.mp4 output.mp4

DEMO TIME

末了阶段,展示两独demo,分别是 MSE Vod Demo、MSE Live Demo

MSE Vod Demo

亮下 MSE 和 WebSocket 实现一个点播服务

后端读取一个 fMP4 文件,通过 WebSocket 发送给 MSE,进行播放

Betway必威 8

亮下 MSE 和 WebSocket 实现一个直播服务

后端代理一漫漫 HTTP-FLV 直播流,通过 WebSocket 发送给 MSE,进行播放

前者 MSE 部分做了重重做事, 包括用 flv 实时移封装成了 fMP4,这里引用了
videojs-flow 的实现

Refs

WebSocket

  • rfc6455
  • HTTP Upgrade
  • WebSocket API
  • MDN WebSocket
  • videojs-flow

MSE

  • W3C
  • MDN MSE
  • HTML5 Codec MIME

而且打直播云是因又拍云内容分发网络为直播应用提供超低延迟、高码率、高并发的通从推流端到播放端的均等站式解决方案。包括实时转码,实时录制,分发加速,水印,截图,秒级禁播,延时直播等职能。直播源站支持自主源站或同时拍云源,为支持用户以不同终端播放,支持
RTMP、HLS、HTTP-flv 播放输出。

端详了解:https://www.upyun.com/products/live

引进阅读:

无连麦,不直播,都在游说之直播利器连麦互动到底是什么?
技能干货|移动直播六雅关键技术详解
并且碰上直播云SDK,自带美颜、滤镜、消噪、人声增益等职能
并且打直播云功能处理篇:转码、录制、视频水印、视频截图
以碰上直播云功能基础篇:推流和拉流、多谋输出、多看方式、回源端口自定义
并且撞倒直播云功能高级篇:防盗链、秒级禁播、自动鉴黄、API接口

http://www.bkjia.com/HTML5/1213933.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1213933.htmlTechArticleWebSocket+MSE——HTML5 直播技术分析,websockethtml5
作者 | 刘博(又拍云多媒体开发工程师) 当前为满足于炎热之移位 Web
端直播需要,一系…

fragment mp4 VS non-fragment mp4

下面是一个 fragment mp4 文件通过 mp4parser(Online MPEG4
Parser )分析后的截图

Betway必威 9

脚是一个 non-fragment mp4 文件通过 mp4parser 分析后的截图 ▽

Betway必威 10

俺们好见到 non-fragment mp4 的极度顶层 box 类型非常少,而 fragment mp4
是由于同样段子同样段子的 moof+mdat 组成的,它们都包含了十足的 metadata
信息及数码, 可以一直 seek 到这个职位上马广播。也就是说 fMP4
凡一个流式的封装格式,这样重复合乎当网络中进行流式传输,而非需负文件头之metadata。

Apple在WWDC 2016 大会上宣布会在 iOS 10、tvOS、macO S的 HLS 中支持
fMP4,可见fMP4 的前景好之好。

值得一提的是,fMP4、CMAF、ISOBMFF 其实都是近乎的事物。

MSE JavaScript API

打高层次上看,MSE 提供了

  • 一套 JavaScript API 来构建 media streams
  • 一个凑合和缓存模型
  • 识别部分 byte 流类型
  • WebM
  • ISO Base Media File Format
  • MPEG-2 Transport Streams

MSE 内部结构

Betway必威 11

MSE
本身的统筹是未借助任务一定的编解码和容器格式的,但是差之浏览器支持程度是不一样的。

足通过传递一个 MIME 类型的字符串到静态方法:

> MediaSource.isTypeSupported来检查。比如 ▽
MediaSource.isTypeSupported('audio/mp3'); // false
MediaSource.isTypeSupported('video/mp4'); // true
MediaSource.isTypeSupported('video/mp4; codecs="avc1.4D4028, mp4a.40.2"'); // true

得 Codec MIME string 的艺术好透过在线的 [mp4info](http://nickdesaulniers.github.io/mp4info),或者采用命令行
mp4info test.mp4 | grep Codecs,可以取近似如下结果 ▽

> mp4info fmp4.mp4| grep Codec
    Codecs String: mp4a.40.2
    Codecs String: avc1.42E01E

目前,H.264 + AAC 的 MP4 容器在具有的浏览器还支持。

常备的 MP4 文件是匪可知跟 MSE 一起下的, 需要拿 MP4 进行 fragment 化。

自我批评一个 MP4 是否已 fragment 的艺术 ▽

> mp4dump test.mp4 | grep "\[m"

比方是non-fragment会显示如下信 ▽

> mp4dump nfmp4.mp4 | grep "\[m"
[mdat] size=8+50873
[moov] size=8+7804
  [mvhd] size=12+96
    [mdia] size=8+3335
      [mdhd] size=12+20
      [minf] size=8+3250
    [mdia] size=8+3975
      [mdhd] size=12+20
      [minf] size=8+3890
            [mp4a] size=8+82
    [meta] size=12+78

如果已经 fragment,会显示如下的类似信息 ▽

>  mp4dump fmp4.mp4 | grep "\[m" | head -n 30
[moov] size=8+1871
  [mvhd] size=12+96
    [mdia] size=8+312
      [mdhd] size=12+20
      [minf] size=8+219
            [mp4a] size=8+67
    [mdia] size=8+371
      [mdhd] size=12+20
      [minf] size=8+278
    [mdia] size=8+248
      [mdhd] size=12+20
      [minf] size=8+156
    [mdia] size=8+248
      [mdhd] size=12+20
      [minf] size=8+156
  [mvex] size=8+144
    [mehd] size=12+4
[moof] size=8+600
  [mfhd] size=12+4
[mdat] size=8+138679
[moof] size=8+536
  [mfhd] size=12+4
[mdat] size=8+24490
[moof] size=8+592
  [mfhd] size=12+4
[mdat] size=8+14444
[moof] size=8+312
  [mfhd] size=12+4
[mdat] size=8+1840
[moof] size=8+600

把一个 non-fragment MP4 转换成 fragment MP4。

足使用 FFmpeg 的 -movflags 来转换。

对原来文本也非 MP4 文件 ▽

> ffmpeg -i trailer_1080p.mov -c:v copy -c:a copy -movflags frag_keyframe+empty_moov bunny_fragmented.mp4

对此老文本已经是 MP4 文件 ▽

> ffmpeg -i non_fragmented.mp4 -movflags frag_keyframe+empty_moov fragmented.mp4

要以 mp4fragment ▽

> mp4fragment input.mp4 output.mp4

DEMO TIME

说到底阶段,展示两个demo,分别是 MSE Vod Demo、MSE Live Demo

MSE Vod Demo

显下 MSE 和 WebSocket 实现一个点播服务

后端读取一个 fMP4 文件,通过 WebSocket 发送给 MSE,进行播报

Betway必威 12

显下 MSE 和 WebSocket 实现一个直播服务

后端代理一长 HTTP-FLV 直播流,通过 WebSocket 发送给 MSE,进行播报

前者 MSE 部分做了众行事, 包括将 flv 实时转封装成了 fMP4,这里引用了
videojs-flow 的贯彻

Refs

WebSocket

  • rfc6455
  • HTTP Upgrade
  • WebSocket API
  • MDN WebSocket
  • videojs-flow

MSE

  • W3C
  • MDN MSE
  • HTML5 Codec MIME

与此同时打直播云是基于再就是拍云内容分发网络啊直播应用提供超低延迟、高码率、高并发的所有从推流端到播放端的相同站式解决方案。包括实时转码,实时录制,分发加速,水印,截图,秒级禁播,延时直播等功效。直播源站支持自主源站或同时拍云源,为支撑用户在不同终端播放,支持
RTMP、HLS、HTTP-flv 播放输出。

端详了解:https://www.upyun.com/products/live

推介阅读:

无连麦,不直播,都当游说的直播利器连麦互动到底是啥?
艺干货|移动直播六生关键技术详解
再者冲撞直播云SDK,自带美颜、滤镜、消噪、人声增益等力量
同时撞直播云功能处理篇:转码、录制、视频水印、视频截图
又冲撞直播云功能基础篇:推流和拉流、多谋输出、多看方式、回源端口自定义
还要打直播云功能高级篇:防盗链、秒级禁播、自动鉴黄、API接口