如何在WebRTC视频与Fetch请求间平衡客户端带宽？

由于浏览器目前没有原生的跨HTTP/WebRTC全局优先级调度机制，只能通过应用层的策略来手动平衡两者的带宽占用，以下是几个可行的实操方案：

1. 为WebRTC视频设置最小带宽约束 #

之前限制发送端带宽上限无效，核心是要强制WebRTC保留最低带宽配额，避免被Fetch请求挤占。通过RTCRtpSender的参数配置实现：

async function enforceWebRTCMinBitrate(videoSender, minKbps) {
  const params = videoSender.getParameters();
  if (!params.encodings) params.encodings = [{}];
  // 将最小带宽转为bps（浏览器API要求单位）
  params.encodings[0].minBitrate = minKbps * 1000;
  await videoSender.setParameters(params);
}

// 使用示例：给视频轨道设置500kbps的最小带宽保障
const videoTrack = peerConnection.getSenders().find(s => s.track.kind === 'video');
enforceWebRTCMinBitrate(videoTrack, 500);

这个设置会让WebRTC的拥塞控制优先满足最低带宽需求，即便网络紧张也不会让画质降到不可用的程度。

2. 手动节流Fetch上传速率 #

既然跨类型优先级不生效，就直接限制Fetch的上传速度，避免它占满带宽。可以将大文件拆分为小块，通过定时器控制发送间隔：

async function throttledUpload(url, blob, maxUploadKbps) {
  // 计算每秒允许上传的字节数（1kbps = 125字节/秒）
  const chunkSize = Math.floor(maxUploadKbps * 125);
  const chunks = [];
  let offset = 0;

  // 拆分Blob为小块
  while (offset < blob.size) {
    const end = Math.min(offset + chunkSize, blob.size);
    chunks.push(blob.slice(offset, end));
    offset = end;
  }

  // 按间隔发送小块
  for (const chunk of chunks) {
    await fetch(url, {
      method: 'POST',
      body: chunk,
      priority: 'low' // 配合HTTP低优先级设置
    });
    // 间隔1秒，匹配设定的速率
    await new Promise(resolve => setTimeout(resolve, 1000));
  }
}

可以根据实际网络情况调整maxUploadKbps的值，比如设为300-500kbps，给WebRTC留足剩余带宽。

3. 动态监控WebRTC状态，调整Fetch策略 #

通过WebRTC的统计API实时监控视频带宽，当检测到画质下降时自动暂停或降低Fetch上传速率：

function monitorWebRTCQuality(peerConnection, thresholdKbps) {
  let isUploadPaused = false;
  setInterval(async () => {
    const stats = await peerConnection.getStats();
    let outboundVideoBitrate = 0;
    // 遍历统计数据，获取视频发送端的实际带宽
    stats.forEach(report => {
      if (report.type === 'outbound-rtp' && report.mediaType === 'video') {
        outboundVideoBitrate = report.bitrate / 1000; // 转为kbps
      }
    });

    // 当视频带宽低于阈值时，暂停Fetch上传
    if (outboundVideoBitrate < thresholdKbps && !isUploadPaused) {
      pauseCurrentFetchUploads(); // 需自行实现暂停逻辑
      isUploadPaused = true;
    } else if (outboundVideoBitrate >= thresholdKbps && isUploadPaused) {
      resumeFetchUploads(); // 恢复上传
      isUploadPaused = false;
    }
  }, 2000); // 每2秒检测一次
}

这个方案能根据实时网络状况动态平衡，比固定节流更灵活。

4. 优化WebRTC编码与拥塞控制 #

• 优先使用VP8/VP9编码：这类编码的拥塞控制算法更成熟，能更好地在带宽波动时维持基础画质；
• 启用RTCP多路复用：在创建RTCPeerConnection时配置rtcpMuxPolicy: 'require'，减少额外的RTCP流量开销。

内容的提问来源于stack exchange，提问作者Rich Andrews