写过实时应用的人都踩过这个坑——视频音频游戏状态挤在一起抢带宽，今天 WebTransport 把这件事彻底原生化了

阿监·前端工程化 内容创作者 2026-09-12 16 阅读

做视频会议、云游戏、IoT Dashboard 的人，大概都踩过这个坑：多个数据流同时跑，带宽一紧张，到底该丢谁、该保谁，全靠猜。

以前你只能祈祷浏览器的 TCP 拥塞控制「识货」，但它根本不知道你的视频流比游戏手柄状态重要多少。今天 Firefox 155 用 WebTransport Send Groups，把这件事彻底原生化了。

这个问题到底有多痛

实时应用里从来不只有一个数据流：

  • 视频会议：音频（必须保）、视频（可以降）、屏幕共享（可以丢）
  • 云游戏：输入指令（必须保）、游戏状态（重要）、画面帧（可以降级）
  • IoT Dashboard：遥测数据（重要）、日志（次要）、实时画面（可丢）

带宽不够时，浏览器按 TCP 自己的规则来，跟你的业务优先级八竿子打不着。结果就是音频卡顿、视频糊成一团、关键遥测数据也丢了——你还不知道为什么。

Send Groups 是什么

WebTransport Send Groups 是 Firefox 155（2026-09-01）和 Safari 26.4 新增的 API，让你给同一连接下的多个流设定发送优先级。核心两个概念：

  • SendGroup：把一组流和 datagram 打包，它们内部按 sendOrder 分优先级
  • sendOrder：数字越大，带宽不够时越先被发送
const wt = new WebTransport(wss://your-server.com/wt);
await wt.ready;

// 创建优先级组
const sendGroup = wt.createSendGroup();

// 创建视频流，优先级 1（较低）
const videoStream = await wt.createUnidirectionalStream({
  sendGroup,
  sendOrder: 1,
});

// 创建 datagram 写接口，优先级 2（较高，带宽紧张时先发）
const datagramW = wt.datagrams.createWritable({
  sendGroup,
  sendOrder: 2,
});

带宽紧张时，浏览器会优先清空 sendOrder=2 的队列，再处理 sendOrder=1 的。视频卡了，但你的音频和控制信号稳了。

典型场景

多人视频会议：

// 音频 datagram，优先级最高
const audioDg = wt.datagrams.createWritable({ sendGroup, sendOrder: 3 });
// 视频流，优先级中等
const videoStream = wt.createUnidirectionalStream({ sendGroup, sendOrder: 2 });
// 屏幕共享流，优先级最低
const screenStream = wt.createUnidirectionalStream({ sendGroup, sendOrder: 1 });

云游戏：

// 手柄指令，优先级最高
const inputStream = wt.createBidirectionalStream({ sendGroup, sendOrder: 3 });
// 服务器游戏状态，优先级中等
const stateStream = wt.createUnidirectionalStream({ sendGroup, sendOrder: 2 });
// 渲染帧，优先级最低，可降级
const frameStream = wt.createUnidirectionalStream({ sendGroup, sendOrder: 1 });

浏览器自动按优先级发送

你不需要手动控制拥塞。浏览器在发送队列积压时，会自动按 sendOrder 从高到低清空。这意味着：

  • 带宽降级是自动的：视频帧积压了，音频还能跑
  • 不用改服务器逻辑：服务器收到的数据顺序反映了客户端的优先级
  • 多个流可以绑定同一组：共享拥塞控制策略

注意事项

不同组之间是平等的。 同一个 WebTransport 连接里，不同 SendGroup 之间带宽分配由浏览器决定，组间平等、组内按 sendOrder 排队。

datagram 不可靠。 datagram 是 UDP 式的丢包不重传，只保证按优先级发送、不保证到达。语音通话场景要自己处理丢包补偿。

兼容性： Firefox 155+、Safari 26.4+ 完整支持，Chrome/Edge 暂不支持。生产环境需要 @supports 渐进增强：

if (wt.createSendGroup) {
  // 使用 Send Groups
} else {
  // 降级到默认行为，或提示用户浏览器不支持
}

怎么用

  1. 确认浏览器支持：wt.createSendGroup !== undefined
  2. 建连后创建 SendGroup
  3. 打开流/创建 datagram 时传入 sendGroup 和 sendOrder
  4. 降级兜底：Chrome 不支持时至少保证功能可用

适用场景： 视频会议（音频优先）、云游戏（指令优先）、实时协作白板（笔迹优先）、IoT 遥测（关键数据优先）。

这个 API 解决的不是「能不能发」的问题，而是「谁先发、谁可以等」的问题——带宽紧张时，这个判断以前只能靠框架或服务端做，现在浏览器终于能替你管了。

评论区

0 条评论

登录后可评论。

阿监·前端工程化 16 阅读