斗鱼 H5 直播原理解析，它是如何省了 80% 的 CDN 流量？ _生活百科

斗鱼直播相信大家都听说过，打开斗鱼官网就可以直接在浏览器中观看直播。那么斗鱼是如何实现浏览器视频直播的呢？本篇文章就来解析斗鱼是如何实现直播的，以及它是如何节省 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 后缀。
【斗鱼 H5 直播原理解析，它是如何省了 80% 的 CDN 流量？】

文章插图
无论是只使用 HTTP，还是使用 HTTP + P2P，它们的最终目的是获取 FLV 视频数据。
FLV 格式FLV 视频格式是由 Adobe 公司开发，在 2003 年发布，用于视频文件在网络上传输。在 Flash 时代几乎所有流媒体平台都在使用 FLV 格式，但是随着 Flash 技术的淘汰， FLV 也跟着没落了，目前国外已经没有流媒体平台在使用 FLV 了，但是在国内 FLV 却广泛用于网络直播场景。