WebTransport Protocol

WebTransport is a next-generation web transport technology based on the QUIC protocol (HTTP/3). Compared to WebSocket, it offers lower latency, native multiplexing, and head-of-line blocking elimination, making it the future-oriented web streaming transport solution.

Basic Information

Property	Value
Default Port	4433
Transport Layer	QUIC (HTTP/3)
Publish	✅ Supported
Subscribe	✅ Supported
Latency	< 500ms
Feature Flag	`webtransport`

Configuration

Feature Activation

[features]
webtransport = ["dep:plugin-webtransport"]

Configuration File

webtransport:
  enable: true
  listen_addr: "0.0.0.0:4433"
  cert_file: ""
  key_file: ""
  max_streams: 100
  enable_datagrams: true
  max_datagram_size: 65535
  idle_timeout: 30
  allowed_origins: []

Option	Type	Default	Description
`enable`	bool	`true`	Whether to enable the plugin
`listen_addr`	string	`"0.0.0.0:4433"`	Listen address
`cert_file`	string	`""`	TLS certificate file path
`key_file`	string	`""`	TLS private key file path
`max_streams`	u32	`100`	Maximum concurrent streams per connection
`enable_datagrams`	bool	`true`	Enable Datagram support
`max_datagram_size`	usize	`65535`	Maximum Datagram size
`idle_timeout`	u64	`30`	Idle timeout (seconds)
`allowed_origins`	Vec	`[]`	Allowed cross-origin sources

TLS Certificate

WebTransport is based on QUIC and requires TLS encrypted transport.

Using self-signed certificates (development):

If cert_file and key_file are not configured, the plugin will automatically generate a self-signed certificate.

Self-signed certificates require special handling in browsers. Chrome can trust self-signed certificates via launch parameters:

chrome --origin-to-force-quic-on=localhost:4433 \
       --ignore-certificate-errors-spki-list=<certificate-fingerprint>

Using production certificates:

webtransport:
  cert_file: "/etc/ssl/certs/server.crt"
  key_file: "/etc/ssl/private/server.key"

Certificates issued by CAs such as Let’s Encrypt are supported.

Browser Support

WebTransport is a relatively new Web API. Current support status:

Browser	Supported Version
Chrome	97+
Edge	97+
Firefox	114+
Safari	Not supported (as of 2025)
Opera	83+

Publishing

Browser Publishing Example

async function publish(streamPath) {
  const url = `https://localhost:4433/publish/${streamPath}`;
  const transport = new WebTransport(url);

  await transport.ready;
  console.log('WebTransport connection established');

  // Get camera
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true,
  });

  // Send media data via bidirectional stream
  const bidiStream = await transport.createBidirectionalStream();
  const writer = bidiStream.writable.getWriter();

  // Send media data...
  // Specific encoding and encapsulation logic depends on the application-layer protocol

  transport.closed.then(() => {
    console.log('WebTransport connection closed');
  });
}

publish('live/test');

Subscribing

Browser Subscribing Example

async function subscribe(streamPath) {
  const url = `https://localhost:4433/subscribe/${streamPath}`;
  const transport = new WebTransport(url);

  await transport.ready;
  console.log('WebTransport connection established');

  // Read data pushed by the server
  const reader = transport.incomingBidirectionalStreams.getReader();

  while (true) {
    const { value: stream, done } = await reader.read();
    if (done) break;

    // Process received media data
    const streamReader = stream.readable.getReader();
    while (true) {
      const { value, done } = await streamReader.read();
      if (done) break;
      // Decode and render...
    }
  }
}

subscribe('live/test');

Using Datagram Mode

Datagram mode is suitable for scenarios that demand extreme real-time performance and can tolerate minor packet loss:

const transport = new WebTransport(url);
await transport.ready;

// Send Datagram
const writer = transport.datagrams.writable.getWriter();
await writer.write(new Uint8Array([/* media data */]));

// Receive Datagram
const reader = transport.datagrams.readable.getReader();
const { value } = await reader.read();

WebTransport vs WebRTC

Feature	WebTransport	WebRTC
Underlying Protocol	QUIC (HTTP/3)	ICE/DTLS/SRTP
Connection Setup	Simple (HTTP upgrade)	Complex (ICE + SDP exchange)
NAT Traversal	Not required (HTTP-like)	Requires STUN/TURN
Multiplexing	Native support	Not supported
Ordered/Unordered	Both supported	Partially supported
Server Requirements	TLS certificate required	STUN/TURN server required
Browser Support	Newer	Mature

Selection Guide

Existing HTTPS infrastructure: Prefer WebTransport
Need P2P communication: Choose WebRTC
Need maximum browser compatibility: Choose WebRTC
Pursuing architectural simplicity: Choose WebTransport

Cross-Protocol Forwarding

Streams published via WebTransport can be played back through other protocols:

# Subscribe via RTMP
ffplay rtmp://localhost:1935/live/test

# Subscribe via HTTP-FLV
ffplay http://localhost:8080/flv/live/test.flv

# Subscribe via HLS
ffplay http://localhost:8080/hls/live/test/index.m3u8