WebRTC+Socket.io直播带宽限制失效问题求助

你遇到的码率限制无效问题，不完全是浏览器的锅，主要是当前实现方式存在几个关键问题：

1. SDP语义版本过时（Plan B vs Unified Plan） #

你配置里用的sdpSemantics: "plan-b"是旧版标准，Chrome对Plan B的码率协商支持已经弱化，现在推荐使用Unified Plan，它对码率、分辨率的动态调整支持更完善。

2. videoBitrate不是标准的getUserMedia约束 #

你在getUserMedia里加的videoBitrate: 100000不是W3C标准约束，Chrome根本不识别这个参数，所以这个设置完全无效。

3. SDP修改逻辑有缺陷 #

你的setBitrate函数用正则替换a=mid:(audio|video)\r\n，但实际SDP里a=mid行后面可能已经带有b=AS字段，或者格式不符合你的正则匹配规则，导致码率设置没有被正确写入SDP。

解决方案 #

方案一：切换到Unified Plan并使用RTCRtpSender动态调码率（推荐） #

这是现代WebRTC的标准做法，比修改SDP更可靠：

1. 修改config里的SDP语义：

const config = {
  iceServers: [
    { "urls": "stun:stun.l.google.com:19302" }
  ],
  sdpSemantics: "unified-plan" // 替换成unified-plan
};

2. 在主播端添加动态设置码率的函数，在创建PeerConnection后调用：

// 新增函数：设置指定轨道的码率
async function setTrackBitrate(sender, bitrateKbps) {
  const parameters = sender.getParameters();
  if (!parameters.encodings) {
    parameters.encodings = [{}];
  }
  parameters.encodings[0].maxBitrate = bitrateKbps * 1000; // 转成bps
  try {
    await sender.setParameters(parameters);
    console.log(`码率已设置为 ${bitrateKbps} kbps`);
  } catch (e) {
    console.error("设置码率失败:", e);
  }
}

// 在添加track到PeerConnection后调用
socket.on("watcher", id => {
  console.log("viewerConnect!!");
  const peerConnection = new RTCPeerConnection(config);
  peerConnections[id] = peerConnection;

  let stream = video.srcObject;
  stream.getTracks().forEach(track => {
    const sender = peerConnection.addTrack(track, stream);
    // 对视频轨道设置码率（比如5kbps）
    if (track.kind === "video") {
      setTrackBitrate(sender, 5);
    }
  });
  
  // ... 其他原有代码不变
});

方案二：修复Plan B下的SDP修改逻辑（不推荐，仅兼容旧环境） #

如果你必须用Plan B，修正setBitrate函数的正则，确保能正确覆盖或添加b=AS字段：

function setBitrate(sdp, bitrate) {
  // 先移除已存在的b=AS字段，再添加新的
  sdp = sdp.replace(/b=AS:\d+\r\n/g, "");
  // 给每个mid对应的媒体段添加b=AS
  return sdp.replace(/a=mid:(audio|video)\r\n/g, `a=mid:$1\r\nb=AS:${bitrate}\r\n`);
}

额外说明 #

• Chrome对WebRTC的码率控制有自己的自适应逻辑，如果网络条件很好，即使设置了低码率，浏览器可能仍会保持较高画质，你可以模拟弱网环境（Chrome开发者工具→网络→Throttling）测试效果。
• 分辨率调整：虽然video.videoWidth是只读，但可以通过getUserMedia的width/height约束重新获取低分辨率流，或者用RTCRtpSender.setParameters设置scaleResolutionDownBy参数来缩放分辨率。

内容的提问来源于stack exchange，提问作者J H