WebTransport launches its application practice

Business Challenges of Web Broadcasting

Whether it is local software streaming or web streaming, we need to solve problems such as streaming jitter, blurry images, and audio stuttering. In the existing web technology environment, how to stably present high-quality audio and video streams to more users is the focus of our technical team. Let's interpret a few key words here from a technical perspective:

• Stability: The stability of the transmission protocol itself needs to be guaranteed. Reliable transmission is preferred to prevent problems such as screen distortion and noise caused by network loss. More importantly, the service line can be quickly switched when the service link is unavailable. Therefore, multi-line backup capabilities are required in streaming scenarios.
• High quality: In some scenarios, such as medical and aesthetic marketing and product promotion, product details need to be displayed. This requires the technical solution to use encoding solutions that lose less image details as much as possible, provided that bandwidth allows.
• Large-scale users: To distribute to more users, the technical solution design will definitely introduce live CDN services. However, whether the streaming protocol can be supported by the live CDN is a consideration, and it is also a point that cannot be satisfied by private protocols.

Technical principles of WebTransport

First, let's take a brief look at the basic technical principles of the WebTransport transport protocol. WebTransport is an application layer transport protocol based on HTTP3, and the underlying layer of HTTP3 is based on the quic protocol. The quic protocol is a set of transport protocols implemented based on the UDP protocol, supporting both reliable and unreliable transmission.

WebTransport's technical advantages

WebTransport is more than just a better transport protocol for Web applications. It also brings a richer technology stack that can combine WebCodecs, WebAssembly, and WebNN to achieve a better application experience based on actual scenarios. Compared with the relatively centralized technology stack of WebRTC, this approach is obviously more flexible and easy to make more flexible technology combinations.

Another obvious advantage is that WebTransport can take advantage of multi-threading of the page. When using the WebRTC protocol, a large amount of logic can only be executed in the main thread, while using WebTransport can put the entire audio and video processing flow in WebWorker, reducing the occupancy of the main thread and improving page fluency. At the same time, using multi-threading can improve the scalability of the application, and threads can be used for abstraction and isolation when facing more audio and video tasks.

Make full use of multi-threading mechanism to reduce the burden of main thread

Using multithreading mechanism to improve application scalability

From the characteristics of the transmission protocol, its connection speed is faster. The first connection only requires 1 RTT. In contrast, TCP requires 2~3 RTTs. For the connection that has been established, reconnecting within the timeout period can achieve 0RTT. In the case of network congestion, reducing the number of RTTs will significantly optimize the speed. It can reach tens of ms. The last feature is connection migration. If the WIFI network is not good during the live broadcast. Switching to the mobile phone hotspot can also achieve 0RTT. In contrast, TCP and RTC need to re-establish the connection, and the recovery speed will be much slower.

The first connection is 1 to 2 RTT faster than TCP  

Support 0RTT for cached connections

Based on these advantages, the Volcano Engine live broadcast team chose to use WebTransport to optimize live streaming. The design solution is based on the stable transmission of one-way streams, and is benchmarked against RTMP in terms of transmission format. In this way, the support cost of the live CDN will be relatively small, and it is easier to reuse the current RTMP streaming logic. Since this technology stack is relatively new, some problems in the process also need to be solved: Although W3C defines the encoding capability of AAC, Chrome does not provide an implementation of AAC encoding. libFaaC can be compiled into a wasm library to implement it. In addition, the browser does not have encapsulation for the flv container, and additional support for this part of the capability is required. So compared to WebRTC streaming, what is the actual application effect of WebTransport streaming?

Comparison of WebTransport and WebRTC streaming effects

Why WebTransport can achieve better results than WebRTC streaming:

Network transmission (image quality and stability):

WebRTC is a transmission protocol for real-time communication and is sensitive to changes in network delay. When using the WebRTC protocol to push streams, it is greatly affected by network jitter. When network delay jitter occurs, the bandwidth estimation module of RTC will think that the current network is in a congested state and needs to reduce the sending bit rate to avoid congestion. The reduction in bit rate has a great impact on video quality, and local mosaics will appear intuitively. When using WebTransport based on QUIC reliable transmission, its congestion control algorithm is relatively less sensitive to network jitter, and can ensure sending reliability by sacrificing a certain delay. Therefore, it is not easy to significantly reduce the sending bandwidth, and the image quality is relatively guaranteed.

Coding optimization (quality):

WebTransport provides network transmission capabilities in the Web specification and can be deeply integrated with existing Web-side multimedia capabilities, such as WebCodecs and WebGPU, providing more room for application optimization in terms of encoding formats and parameter selection.

Easy integration into live CDN (large-scale distribution):

WebTransport is based on the finalized HTTP3 specification and is easily integrated and supported by live CDN. Its application complexity is lower than that of WebRTC. It also eliminates the signaling link in the RTC streaming and connection process, which can speed up the first frame push and facilitate deployment to more live CDNs.

First, in the scenario of network jitter, with the same 100ms delay jitter, the picture pushed by WebTransport will be significantly clearer than that pushed by RTC. In the scenario of network preemption, a fixed lower bandwidth and a data flow using the GCC congestion control algorithm, facing data transmission using the TCP protocol, the bandwidth resources it can be allocated are very small.

WebTransport streaming + 100ms delay jitter

WebRTC streaming + 100ms delay jitter

In addition, in a network with a fixed 3Mbps upstream bandwidth, when using WebTransport and RTC streaming at the same time, the target bitrate is set to 1.5M. During the process, the bitrate of RTC streaming will be seriously affected, the bitrate will drop significantly, and the image quality cannot be guaranteed. The smoothness of WebTransport streaming in different network conditions is basically the same as RTC streaming in other scenarios, except for the case of large packet loss.

WebTransport streaming

WebRTC streaming

Summary and Outlook

Different streaming protocols have their own advantages and disadvantages. Currently, there is no perfect solution. You need to choose according to the actual scenario. For example, WebRTC is generally used for retweeting in live broadcast scenarios, which is more suitable for low-latency interactive scenarios, while WebTransport is more suitable for scenarios with high image quality requirements. In general, the WebTransport streaming solution solves the problem of "how to stably deliver high-quality audio and video to a large number of users", that is, it achieves reliable transmission, the connection stability is guaranteed, and in the case of network loss, it can sacrifice some delays to ensure the quality of audio and video, giving a relatively satisfactory answer. If you want to experience the broadcast effect of WebTransport, you can enter the Volcano Engine console for an online demo experience.