如何在WebRTC所有设备上始终发送640x480分辨率的视频？

你遇到的问题是浏览器WebRTC栈的动态优化机制导致的——即使初始设置了exact分辨率约束，当系统CPU负载过高或带宽不足时，浏览器会自动降低视频分辨率以节省资源。以下是几种可靠的解决方法：

1. 对视频轨道强制应用约束 #

获取媒体流后，直接对视频轨道重新应用严格约束，覆盖浏览器的动态调整：

navigator.mediaDevices.getUserMedia({
  video: {
    width: { exact: 640 },
    height: { exact: 480 }
  }
}).then(stream => {
  const videoTrack = stream.getVideoTracks()[0];
  
  // 重新应用约束，确保运行时分辨率不被修改
  videoTrack.applyConstraints({
    width: { exact: 640 },
    height: { exact: 480 },
    frameRate: { ideal: 30 } // 固定帧率可减少分辨率波动
  }).catch(err => {
    console.error('约束应用失败:', err);
  });

  // 后续将stream用于RTCPeerConnection
});

2. 配置RTCPeerConnection的发送端参数 #

通过设置发送端的编码参数，强制固定分辨率和比特率，避免浏览器自动调整：

const pc = new RTCPeerConnection();

// 添加视频轨道后，获取发送端实例
pc.addTrack(videoTrack, stream);
const videoSender = pc.getSenders().find(sender => sender.track.kind === 'video');

if (videoSender) {
  videoSender.setParameters({
    encodings: [{
      width: 640,
      height: 480,
      maxBitrate: 1000000, // 640x480@30fps建议1Mbps左右，单位bps
      maxFramerate: 30
    }]
  }).catch(err => {
    console.error('设置发送参数失败:', err);
  });
}

3. 兼容浏览器的约束写法 #

部分浏览器对exact支持有限，可改用min/max等于目标值的方式，确保分辨率锁定：

navigator.mediaDevices.getUserMedia({
  video: {
    width: { min: 640, ideal: 640, max: 640 },
    height: { min: 480, ideal: 480, max: 480 }
  }
})

核心原理 #

浏览器的WebRTC自适应机制优先级高于初始的getUserMedia约束，通过轨道实时约束+发送端编码参数的双重限制，能最大程度阻止浏览器因CPU/带宽优化而压缩分辨率。

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