WebSocket+MSE——HTML5直播技术解析-

作者|刘博（又拍云多媒体开发工程师）目前为了知足比拼炽热的挪移Web端直播需求，一系列的HTML5直播技术快速的开展起来。常见的可用于HTML5的直播技术有HLS、WebSocket与WebRTC。今天我向大家介绍WebSocket与MSE相干的技术要点，并在最后通过一个实例来展现概括用途。文章大纲WebSocket协定介绍WebSocketClient 作者 | 刘博（又拍云多媒体开发工程师）

目前为了知足比拼炽热的挪移 Web 端直播需求，一系列的 HTML5 直播技术快速的开展起来。

常见的可用于 HTML5 的直播技术有 HLS、WebSocket 与 WebRTC。今天我向大家介绍WebSocket 与 MSE 相干的技术要点，并在最后通过一个实例来展现概括用途。

文章大纲

• WebSocket 协定介绍

• WebSocket Client/Server API介绍

• MSE 介绍

• fMP4 介绍

• Demo 展现

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，可以绕过大多数防火墙的限定。

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 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 局部。

MSE

在介绍 MSE 以前，我们先看看 HTML5和

HTML5 和

• 不支撑流

• 不支撑 DRM 和加密

• 很难自定义控制, 以及维持跨阅读器的一致性

• 编解码和封装在不一样阅读器支撑不一样

MSE 是解决 HTML5 的流题目。

Media Source Extensions（MSE）是 Chrome、Safari、Edge 等主流阅读器支撑的一个新的Web API。MSE 是一个 W3C 规范，允许 JavaScript 动态构建

通过运用 MSE，你可以动态地修改媒体流而不需要任何插件。这让前端JavaScript可以做更多的事情—— 在 JavaScript 进行转封装、处置，甚至转码。

虽然 MSE 不克不及让流直接传输到 media tags 上，但是 MSE 供给了构建跨阅读器播放器的中心技术，让阅读器通过JavaScript API来推音视频到 media tags 上。

Browser Support

通过 caniuse 来检查可否阅读器支撑状况。

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，进行播放

又拍直播云功能高级篇：防盗链、秒级禁播、主动鉴黄、API接口

以上就是WebSocket+MSE——HTML5 直播技术解析的细致内容，更多请关注 百分百源码网 其它相干文章！