WebSocket 握手依赖于这些 HTTP 升级机制。 握手完成后，后续数据传输将直接通过 TCP 完成。
WebSocket JavaScript API
目前主流浏览器都提供了WebSocket API接口，可以向服务器发送消息（文本或二进制）并接收风暴驱动的响应数据。
步骤1。 检查浏览器是否支持WebSocket
if(window.WebSocket) {
// WebSocket 代码
第2步。 建立连接
var ws = new WebSocket('ws://localhost:8327');
步骤3. 注册回调函数并发送和接收数据
分别注册WebSocket对象的onopen、onclose、onerror、onmessage回调函数。
使用 ws.send() 发送数据。 除了发送字符串之外，还可以发送 Blob 或 ArrayBuffer 类型的数据。
如果接收二进制数据，则需要将连接对象的格式设置为blob或arraybuffer。
ws.binaryType = 'arraybuffer';
WebSocket Golang API
我推荐使用Google自己的golang.org/x/net/websocket服务器端WebSocket库，它可以非常方便地与net/http一起使用。 还可以通过websocket.Handler将WebSocket的handler函数转换为http.Handler，这样就可以和net/http库一起使用了。
然后通过websocket.Message.Receive接收数据，通过websocket.Message.Send发送数据。
具体代码可以看下面的Demo部分。
均方误差
在介绍MSE之前，我们先来了解一下HTML5及其局限性。
HTML5 和标签的限制
MSE是为了解决HTML5的流媒体问题。
Media Source Extensions (MSE) 是一种新的 Web API，受 Chrome、Safari、Edge 等主流浏览器支持。 MSE 是一个 W3C 标准，允许 JavaScript 动态重构和流媒体。 它定义了允许 JavaScript 将媒体流片段传输到 HTMLMediaElement 的对象。
通过使用 MSE，您可以动态更改媒体流，而无需任何插件。 这使得后端 JavaScript 可以做更多的事情——转包、处理手机html5视频播放器，甚至用 JavaScript 进行转码。
虽然MSE不能直接将流传输到媒体标签手机html5视频播放器，但MSE提供了构建跨浏览器播放器的核心技术，允许浏览器通过JavaScript API将音频和视频推送到媒体标签。
浏览器支持
使用caniuse检测浏览器是否支持的情况。
通过 MediaSource.isTypeSupported() 可以进一步检查编解码器 MIME 类型是否受支持。
MP4
常用的视频封装格式有WebM和fMP4。
WebM 和 WebP 是两个姐妹项目，均由 Google 赞助。 由于WebM是基于Matroska的容器格式，它本质上是流式的，非常适合在流媒体领域使用。
下面重点介绍fMP4格式。
我们都知道MP4是由一系列的Box组成的。 普通MP4具有嵌套结构，客户端必须从头加载MP4文件才能完整播放，而无法从中间部分开始播放。
fMP4 由一系列片段组成。 如果服务器支持字节范围请求，那么这些片段可以独立地请求客户端进行播放，而无需加载整个文件。
为了更形象地说明这一点，我先介绍一下几种常用的分析MP4文件的工具。
以下是mp4parser()分析的片段mp4文件截图▽
以下是mp4parser分析的无碎片mp4文件截图▽
我们可以看到，非fragment mp4的顶层box类型很少，而fragment mp4则由moof+mdat段组成。 它们已经包含了足够的元数据信息和数据，您可以直接查找到该位置并开始播放。 也就是说，fMP4是一种流媒体封装格式，更适合在网络中流媒体播放，而不依赖于文件头的元数据。
苹果在 WWDC 2016 峰会上宣布将在 iOS 10、tvOS 和 macOS 的 HLS 中支持 fMP4。 可见fMP4的前景非常好。
值得一提的是，虽然fMP4、CMAF、ISOBMFF都是类似的东西。
MSE JavaScript API
在较高层面上，MSE 提供
MSE内部结构
MSE本身的设计并不依赖于特定任务的编解码器和容器格式，但不同的浏览器支持程度不同。
可以通过将 MIME 类型字符串传递给静态方法来检测：MediaSource.isTypeSupported。 例如 ▽
MediaSource.isTypeSupported('音频/mp3'); // 错误的
MediaSource.isTypeSupported('视频/mp4'); // 真的
MediaSource.isTypeSupported('video/mp4; codecs="avc1.4D4028, mp4a.40.2"'); // 真的
获取Codec MIME字符串的方式可以通过在线mp4info()，或者使用命令行mp4info test.mp4 | grep Codecs，可以得到类似下面的结果▽
mp4info fmp4.mp4 | mp4info grep 编解码器
编解码器字符串：mp4a.40.2
编解码器字符串：avc1.42E01E
目前，所有浏览器都支持 H.264 + AAC MP4 容器。
普通MP4文件无法使用MSE，需要对MP4进行分片。
判断MP4是否已碎片的方法▽
mp4dump 测试.mp4 | grep“[m”
如果是非碎片则会显示如下信息▽
mp4dump nfmp4.mp4 | mp4dump nfmp4.mp4 | grep“[m”
[mdat]大小=8+50873
[moov]大小=8+7804
[mvhd]大小=12+96
[mdia]大小=8+3335
[mdhd] 尺寸=12+20
[minf] 大小=8+3250
[mdia]大小=8+3975
[mdhd] 尺寸=12+20
[minf] 大小=8+3890
[mp4a]大小=8+82
[元]尺寸=12+78
如果碎片已经分片，则会显示类似如下的信息▽
mp4dump fmp4.mp4 | mp4dump fmp4.mp4 | grep "[m" | | grep "[m" | 头-n 30
[moov] 大小=8+1871
[mvhd]大小=12+96
[mdia]尺寸=8+312
[mdhd] 尺寸=12+20
[minf] 大小=8+219
[mp4a] 大小=8+67
[mdia]尺寸=8+371
[mdhd] 尺寸=12+20
[minf] 大小=8+278
[mdia]尺寸=8+248
[mdhd] 尺寸=12+20
[minf] 大小=8+156
[mdia]尺寸=8+248
[mdhd] 尺寸=12+20
[minf] 大小=8+156
[mvex] 大小=8+144
[mehd] 尺寸=12+4
[moof]尺寸=8+600
[MFHD]尺寸=12+4
[mdat]大小=8+138679
[moof] 大小=8+536
[MFHD]尺寸=12+4
[mdat]大小=8+24490
[moof] 大小=8+592
[MFHD]尺寸=12+4
[mdat]大小=8+14444
[moof] 尺寸=8+312
[MFHD]尺寸=12+4
[mdat]大小=8+1840
[moof]尺寸=8+600
将非片段 MP4 转换为片段 MP4。
您可以使用FFmpeg的-movflags进行转换。
非MP4文件为原始文件▽
ffmpeg -i Trailer_1080p.mov -c:v 复制 -c:a 复制 -movflags frag_keyframe+empty_moov bunny_fragmented.mp4
原文件已经是MP4文件了▽
ffmpeg -i non_fragmented.mp4 -movflags frag_keyframe+empty_moovfragmented.mp4
或者使用mp4fragment ▽
mp4片段输入.mp4 输出.mp4
演示时间
在分享的最后阶段，刘博展示了两个演示，分别是MSE Vod Demo和MSE Live Demo。
MSE 点播演示
MSE 现场演示
问答
Q1：网段没有iIP的客户如何通过RTMP合约推流？
A1：用户客户端不需要公网IP进行RTMP推流，只需推送到直播系统分配给您的地址即可。
Q2：MSE客户端做了很多事情，可以转码和解码。 这会导致性能问题吗？ 另外，目前有公司大量使用这项技术吗？
A2：该技术目前处于实验阶段。 如果转移到包装上，性能要求不高。 我们在相应的手机型号上进行测试没有问题。 目前不仅Momo的外部浏览器对MSE的支持不太好，而且大多数浏览器对MSE的支持都比较好。
Q3：我还没有做过相关内容，您能简单介绍一下HTTP-FLV吗？
A3：HTTP-FLV是以HTTP长连接的形式分发FLV流，目前在各大直播平台广泛使用。 您可以关注优拍云沫沫公众号。 之前有专门的文章介绍过HTTP-FLV。
