斗鱼直播相信大家都听说过，打开斗鱼官网就可以直接在浏览器中观看直播。那么斗鱼是如何实现浏览器视频直播的呢？本篇文章就来解析斗鱼是如何实现直播的，以及它是如何节省 80% 的 CDN 流量，要知道视频直播流量费并不便宜，斗鱼每个月光这些流量费都要支付几个亿，节省 CDN 流量就是省钱。
直播技术方案
在实际去斗鱼直播间调试视频直播之前，我就猜它肯定是使用 HTTP-FLV 方案来实现视频直播，因为国内几乎所有直播平台都是使用 HTTP-FLV 方案。
但是去斗鱼直播间并没有找到 .flv 的网络请求，而是找到了 .xs 的网络请求，如下图所示。
不过 .xs 网络请求的响应的 Content-Type 是 video/x-flv，原来只是后缀不同，看来我猜的果真没错，斗鱼就是用的 HTTP-FLV。
HTTP+P2P FLV 拉流
不过为什么后缀是 .xs 而不是 .flv 呢？其实这里是因为斗鱼默认并不完全使用 HTTP 去拉流，而是采用 CDN 和 P2P 两种方式同时去拉流，.xs 并不是一个完整的 FLV 流，而是一个子 FLV 流。
进入斗鱼直播间，斗鱼首先会去请求一个完整的 FLV 流，等 P2P 连接好了再去切换成子流。这是因为 P2P 连接比较慢，如果走来就走 P2P，那么视频起播速度会非常慢。
上图中第二个连接就是一个完整的 FLV 流，等 P2P 连接成功后会断开连接去拉子流。
在 P2P 连接成功后，还可以在网络面板看到一个 WebSocket 连接，如下图所示，它是斗鱼用来推送其他正在观看当前流的用户的，这样播放器就可以直接从推送的用户这里拉流。
斗鱼 P2P 是基于 WebRTC 的 DataChannel，可以打开 chrome 的 WebRTC 的调试页面，可以看到有很多 WebRTC 连接，它可以接收其他用户分享的视频数据，自己也会共享当前下载到的视频数据给其他用户。
斗鱼将一个完整的直播流进行切片，分成一个个小的视频分片并进行编号（这样方便用户之间共享）然后将这些小分片分为多个子流，通过 HTTP 从 CDN 拉一路子流，然后通过 P2P 去其他用户那里拉其他的子流。
但是通过 P2P 从其他用户那里拉流并不是很稳定，例如其他用户可以能退出了直播间，或者网络出了问题，这样就会导致接收它分享的用户直播断流。为了提升直播稳定性，如果在一定时间内没有收到其他用户分享的数据，斗鱼播放器就会立刻从 CDN 去拉对应的子流，并且 WebSocket 也会推荐新的用户给播放器。
可以发现，加上 P2P 拉流，大大增加了直播的复杂度。但是它带来的好处也非常的明显，就是可以省钱，省到就是赚到！因为流量费非常的贵，斗鱼每个月光直播带宽都得花好几个亿。利用 P2P 从其他用户那里拉流可以节省大量流量，例如一个直播流分为两个子流，一个从 CDN 拉，一个从其他用户那里拉，这样理论上就可以节省 50% 的流量，而斗鱼将一个直播流分成 6 个子流，一个从 CDN 拉，其余 5 个全部从其他用户那里拉，理论上可以节省超过 80% 的直播流量！
当然 P2P 拉流也有一些缺点，例如直播延迟较高，不适用于低延迟直播场景，对用户电脑和带宽有一定消耗，因为除了从其他用户那里拉流，当前用户自己还要上传视频数据给其他用户。
如果你想关闭 P2P，也比较简单，可以在网络面板屏蔽下图中的地址即可。
屏蔽之后，斗鱼就只会从 CDN 拉流，不走 P2P，如下图所示，可以发现流的地址变成正常的 .flv 后缀。
无论是只使用 HTTP，还是使用 HTTP + P2P，它们的最终目的是获取 FLV 视频数据。
FLV 格式
FLV 视频格式是由 Adobe 公司开发，在 2003 年发布，用于视频文件在网络上传输。在 Flash 时代几乎所有流媒体平台都在使用 FLV 格式，但是随着 Flash 技术的淘汰，FLV 也跟着没落了，目前国外已经没有流媒体平台在使用 FLV 了，但是在国内 FLV 却广泛用于网络直播场景。
不像 Flash，H5 的 video 元素是无法播放 FLV 视频的，我们需要借助 MSE 来自己控制视频播放，具体原理是将 FLV 转封装成 FMP4 视频格式，然后交给 MSE 播放即可。
MSE 全称是 Media Source Extensions API，它是 Web 流媒体的基础，所有 Web 流媒体平台最终都会用到它，如果对它感兴趣，欢迎查看 流媒体视频基础 MSE 入门 & FFmpeg 制作视频预览缩略图和 fmp4
目前有开源的 flv.js 来帮我们完成这件事，查看斗鱼 dist 后代码，斗鱼也是使用的 flv.js，不过在之上加了很多自定义的代码，例如加上了 h265 编码的支持，flv.js 是不支持 h265 编码的，FLV 官方规范也不支持，但是业务又有这种需求，所以一般将 FLV 视频编码 ID 等于 12 当作 h265 的流。在斗鱼直播中如果发现直播流是 h265 编码并且浏览器不支持 h265，斗鱼会利用 WASM 来软解播放视频。
直播时移
对于赛事直播斗鱼是支持直播时移的，如下图所示。
但是这个播放器的进度条体验不是很好，进度条的高度只有 3px，鼠标非要精准的放上去，才能有 Hover 的效果，这是没那么容易做到的。这里推荐个好用开源的播放器进度条 ppbar，你可以把它集成到任何播放器中去，非常的好用。
斗鱼直播时移是基于 HLS 的，如果点击一下进度条，斗鱼播放器会黑一下，将 FLV 切换成 HLS。
在刚开始进入直播间拉流的时候，斗鱼播放器可以获取到服务器返回的一个时间戳，单位是秒，当用户点击进度条跳转到前 10 分钟时，就直接用当前时间减去 600 秒就得到了前 10 分钟视频的时间戳，然后会用这个时间戳去请求请求一个 getVodStream 接口获取到 HLS 时移流地址，获取到 HLS 过后，就和普通 HLS 直播一样去播放即可。
和 FLV 一样，要在浏览器中播放 HLS 流，同样需要 MSE API 来播放，目前可以借助开源的 hls.js 来在浏览器中播放 HLS 流。查看斗鱼 dist 过后的代码，斗鱼应该没有使用 hls.js，而是自己实现在浏览器中播放 HLS。
总结
这篇文章介绍了斗鱼 H5 直播技术的原理，斗鱼不仅使用国内常用的 HTTP-FLV 方案，还加入了 P2P 拉流，从而节省 CDN 流量。对于赛事直播，斗鱼还支持直播时移，直播时移是使用 HLS 来实现的，用户在 seek 后会通过 seek 到的时间点去服务器换取对应的时移 HLS 流地址，然后走 HLS 拉流即可。
更多
- CSS3 transform 和 canvas 背后不为人知的秘密
- 这么炫酷可交互的网站，居然没有一行 JS 代码！
- NPlayer 支持任何流媒体和 B 站弹幕体验的视频播放器
- 流媒体视频基础 MSE 入门 & FFmpeg 制作视频预览缩略图和 fmp4
- 原来爱优腾等视频网站都是用这个来播放流媒体的
- 3 秒左右的低延迟直播方案 - LHLS 和 LL-HLS
- LL-DASH CMAF 低延迟直播
我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。
