Analysis of the principle of Douyu H5 live broadcast, how does it save 80% of CDN traffic?

I believe everyone has heard of Douyu Live. You can watch the live broadcast directly in your browser by opening the Douyu official website. So how does Douyu realize browser video live broadcast? This article will analyze how Douyu realizes live broadcast and how it saves 80% of CDN traffic. You must know that live video traffic fees are not cheap. Douyu has to pay hundreds of millions of these traffic fees every month. Saving CDN traffic means saving money.

HTTP+P2P FLV pull stream

Before actually going to the Douyu live room to debug the live video, I guessed that it must use the HTTP-FLV scheme to realize the live video, because almost all live broadcast platforms in China use the HTTP-FLV scheme.

However, when I went to the Douyu live room, I did not find .flvthe network request of , but found the .xsnetwork request of , as shown in the following figure.

However, the response of the .xsnetwork request Content-Typeis video/x-flvthat it turns out that the suffix is different. It seems that my guess is correct. Douyu uses HTTP-FLV.

But why is .xsthe not .flv? In fact, this is because Douyu does not completely use HTTP to pull streams by default, but uses CDN and P2P to pull streams at the same time, which is .xsnot a complete FLV stream, but a sub-FLV stream.

Entering the Douyu live broadcast room, Douyu will first request a complete FLV stream, and then switch to a sub-stream after the P2P connection is completed. This is because the P2P connection is relatively slow. If you go to P2P, the video playback speed will be very slow.

The second connection in the above figure is a complete FLV stream. After the P2P connection is successful, the connection will be disconnected to pull the sub-stream.

After the P2P connection is successful, you can also see a WebSocket connection in the network panel, as shown in the figure below, it is used by Douyu to push other users who are watching the current stream, so that the player can directly pull from the pushed user. flow.

Douyu P2P is a DataChannel based on WebRTC. You can open the WebRTC debugging page of chrome. You can see that there are many WebRTC connections. It can receive video data shared by other users, and it will also share the currently downloaded video data to other users.

Douyu slices a complete live stream, divides it into small video segments and numbers them (so that users can share them easily), then divides these small segments into multiple sub-streams, and pulls a sub-stream from CDN through HTTP , and then go to other users to pull other substreams through P2P.

However, it is not very stable to pull streams from other users through P2P. For example, other users may log out of the live broadcast room, or there is a problem with the network, which will cause the users who receive it to share the live broadcast to be cut off. In order to improve the stability of the live broadcast, if the data shared by other users is not received within a certain period of time, Douyu Player will immediately pull the corresponding substream from the CDN, and WebSocket will also recommend new users to the player.

It can be found that, coupled with P2P streaming, the complexity of live broadcast is greatly increased. But the benefits it brings are also very obvious, that is, you can save money, and what you save is what you earn! Because the traffic fee is very expensive, Douyu spends hundreds of millions of dollars in bandwidth every month. Using P2P to pull streams from other users can save a lot of traffic. For example, a live stream is divided into two sub-streams, one is pulled from CDN and the other is pulled from other users, so theoretically, 50% of traffic can be saved, while Douyu will A live stream is divided into 6 sub-streams, one is pulled from CDN, and the remaining 5 are pulled from other users, which can theoretically save more than 80% of live traffic!

Of course, P2P streaming also has some disadvantages, such as high latency of live streaming, which is not suitable for low-latency live streaming scenarios, and consumes a certain amount of user computer and bandwidth, because in addition to streaming from other users, the current user has to upload video data to other users. user.

If you want to close P2P, it is relatively simple, you can block the address in the picture below in the network panel.

After shielding, Douyu will only pull streams from CDN, not P2P. As shown in the figure below, it can be found that the address of the stream has become a normal .flvsuffix .

Whether they use HTTP only, or use HTTP + P2P, their ultimate purpose is to obtain FLV video data.

FLV 视频格式是由 Adobe 公司开发，在 2003 年发布，用于视频文件在网络上传输。在 Flash 时代几乎所有流媒体平台都在使用 FLV 格式，但是随着 Flash 技术的淘汰，FLV 也跟着没落了，目前国外已经没有流媒体平台在使用 FLV 了，但是在国内 FLV 却广泛用于网络直播场景。

不像 Flash，H5 的 video 元素是无法播放 FLV 视频的，我们需要借助 MSE 来自己控制视频播放，具体原理是将 FLV 转封装成 FMP4 视频格式，然后交给 MSE 播放即可。

目前有开源的 flv.js 来帮我们完成这件事，查看斗鱼 dist 后代码，斗鱼也是使用的 flv.js，不过在之上加了很多自定义的代码，例如加上了 h265 编码的支持，flv.js 是不支持 h265 编码的，FLV 官方规范也不支持，但是业务又有这种需求，所以一般将 FLV 视频编码 ID 等于 12 当作 h265 的流。在斗鱼直播中如果发现直播流是 h265 编码并且浏览器不支持 h265，斗鱼会利用 WASM 来软解播放视频。

直播时移

对于赛事直播斗鱼是支持直播时移的，如下图所示。

但是这个播放器的进度条体验不是很好，进度条的高度只有 3px，鼠标非要精准的放上去，才能有 Hover 的效果，这是没那么容易做到的。这里推荐个好用开源的播放器进度条 ppbar，你可以把它集成到任何播放器中去，非常的好用。

斗鱼直播时移是基于 HLS 的，如果点击一下进度条，斗鱼播放器会黑一下，将 FLV 切换成 HLS。

When the user first enters the live room to pull the stream, the Douyu player can obtain a timestamp returned by the server in seconds. When the user clicks the progress bar to jump to the first 10 minutes, it directly subtracts 600 from the current time. The timestamp of the first 10 minutes of video is obtained in seconds, and then the timestamp will be used to request an getVodStreaminterface to obtain the HLS time-shift stream address. After the HLS is obtained, it can be played just like ordinary HLS live broadcast.

Like FLV, to play the HLS stream in the browser, the MSE API is also required to play it. Currently, the open source hls.js can be used to play the HLS stream in the browser. Looking at the code after Douyu dist, Douyu should not use hls.js, but implement HLS playback in the browser by itself.

Summarize

This article introduces the principle of Douyu H5 live broadcast technology. Douyu not only uses the HTTP-FLV scheme commonly used in China, but also adds P2P streaming to save CDN traffic. For the live broadcast of the event, Douyu also supports live time shift. The live time shift is realized by using HLS. After the seek, the user will go to the server at the time when the seek arrives to exchange for the corresponding time-shift HLS stream address, and then go to HLS to pull the stream. Can.

If you think this article is not bad, you can give a like to encourage it~

I am participating in the recruitment of the creator signing program of the Nuggets Technology Community, click the link to register and submit .