1. 首頁 > 生活百科 > >

斗魚 H5 直播原理解析，它是如何省了 80% 的 CDN 流量？

生活百科

斗魚直播相信大家都聽說過，打開斗魚官網就可以直接在瀏覽器中觀看直播 。那么斗魚是如何實現瀏覽器視頻直播的呢？本篇文章就來解析斗魚是如何實現直播的，以及它是如何節省 80% 的 CDN 流量，要知道視頻直播流量費并不便宜，斗魚每個月光這些流量費都要支付幾個億 ， 節省 CDN 流量就是省錢 。
直播技術方案在實際去斗魚直播間調試視頻直播之前，我就猜它肯定是使用 HTTP-FLV 方案來實現視頻直播，因為國內幾乎所有直播平臺都是使用 HTTP-FLV 方案 。
但是去斗魚直播間并沒有找到 .flv 的網絡請求，而是找到了 .xs 的網絡請求，如下圖所示 。

斗魚 H5 直播原理解析，它是如何省了 80% 的 CDN 流量？

文章插圖
不過 .xs 網絡請求的響應的 Content-Type 是 video/x-flv，原來只是后綴不同，看來我猜的果真沒錯，斗魚就是用的 HTTP-FLV 。
HTTP+P2P FLV 拉流不過為什么后綴是 .xs 而不是 .flv 呢？其實這里是因為斗魚默認并不完全使用 HTTP 去拉流，而是采用 CDN 和 P2P 兩種方式同時去拉流，.xs 并不是一個完整的 FLV 流，而是一個子 FLV 流 。
進入斗魚直播間，斗魚首先會去請求一個完整的 FLV 流，等 P2P 連接好了再去切換成子流 。這是因為 P2P 連接比較慢，如果走來就走 P2P ， 那么視頻起播速度會非常慢 。
斗魚 H5 直播原理解析，它是如何省了 80% 的 CDN 流量？

文章插圖
上圖中第二個連接就是一個完整的 FLV 流，等 P2P 連接成功后會斷開連接去拉子流 。
在 P2P 連接成功后，還可以在網絡面板看到一個 WebSocket 連接，如下圖所示 ， 它是斗魚用來推送其他正在觀看當前流的用戶的，這樣播放器就可以直接從推送的用戶這里拉流 。
斗魚 H5 直播原理解析，它是如何省了 80% 的 CDN 流量？

文章插圖
斗魚 P2P 是基于 WebRTC 的 DataChannel，可以打開 chrome 的 WebRTC 的調試頁面，可以看到有很多 WebRTC 連接，它可以接收其他用戶分享的視頻數據，自己也會共享當前下載到的視頻數據給其他用戶 。
斗魚 H5 直播原理解析，它是如何省了 80% 的 CDN 流量？

文章插圖
斗魚將一個完整的直播流進行切片 ， 分成一個個小的視頻分片并進行編號（這樣方便用戶之間共享）然后將這些小分片分為多個子流，通過 HTTP 從 CDN 拉一路子流 ， 然后通過 P2P 去其他用戶那里拉其他的子流 。
但是通過 P2P 從其他用戶那里拉流并不是很穩定，例如其他用戶可以能退出了直播間，或者網絡出了問題，這樣就會導致接收它分享的用戶直播斷流 。為了提升直播穩定性，如果在一定時間內沒有收到其他用戶分享的數據，斗魚播放器就會立刻從 CDN 去拉對應的子流，并且 WebSocket 也會推薦新的用戶給播放器 。
可以發現，加上 P2P 拉流，大大增加了直播的復雜度 。但是它帶來的好處也非常的明顯，就是可以省錢，省到就是賺到！因為流量費非常的貴，斗魚每個月光直播帶寬都得花好幾個億 。利用 P2P 從其他用戶那里拉流可以節省大量流量，例如一個直播流分為兩個子流，一個從 CDN 拉，一個從其他用戶那里拉，這樣理論上就可以節省 50% 的流量，而斗魚將一個直播流分成 6 個子流 ， 一個從 CDN 拉，其余 5 個全部從其他用戶那里拉，理論上可以節省超過 80% 的直播流量！
當然 P2P 拉流也有一些缺點，例如直播延遲較高，不適用于低延遲直播場景 ， 對用戶電腦和帶寬有一定消耗，因為除了從其他用戶那里拉流，當前用戶自己還要上傳視頻數據給其他用戶 。
如果你想關閉 P2P，也比較簡單，可以在網絡面板屏蔽下圖中的地址即可 。
斗魚 H5 直播原理解析，它是如何省了 80% 的 CDN 流量？

文章插圖
屏蔽之后，斗魚就只會從 CDN 拉流，不走 P2P ， 如下圖所示 ， 可以發現流的地址變成正常的 .flv 后綴 。
【斗魚 H5 直播原理解析，它是如何省了 80% 的 CDN 流量？】
斗魚 H5 直播原理解析，它是如何省了 80% 的 CDN 流量？

文章插圖
無論是只使用 HTTP，還是使用 HTTP + P2P，它們的最終目的是獲取 FLV 視頻數據 。
FLV 格式FLV 視頻格式是由 Adobe 公司開發，在 2003 年發布，用于視頻文件在網絡上傳輸 。在 Flash 時代幾乎所有流媒體平臺都在使用 FLV 格式，但是隨著 Flash 技術的淘汰 ， FLV 也跟著沒落了，目前國外已經沒有流媒體平臺在使用 FLV 了 ， 但是在國內 FLV 卻廣泛用于網絡直播場景 。

推薦閱讀