WebRTC屏幕共享视频质量约束在Mac Safari 16.2（ReactJS）中不生效

在Mac OS 13.1 + Safari 16.2环境中，getDisplayMedia对屏幕共享的视频约束（如height、frameRate）支持存在局限性，你尝试的两种写法都无法生效的原因如下：

• 第一种写法的直接约束语法符合标准，但Safari在屏幕共享场景下会忽略这类分辨率/帧率约束，优先采用系统原生的屏幕捕获参数。
• 第二种写法的mandatory/optional是旧版WebRTC约束语法，现已被标准废弃，现代浏览器（包括Safari）不再支持。

针对这个问题，你可以尝试以下两种方案：

方案1：获取流后对轨道应用约束 #

虽然Safari可能不支持初始化时的约束，但可以尝试在获取到媒体流后，对视频轨道调用applyConstraints来调整参数：

navigator.mediaDevices.getDisplayMedia({ video: true })
  .then((stream) => {
    const videoTrack = stream.getVideoTracks()[0];
    // 尝试应用目标约束
    return videoTrack.applyConstraints({
      height: { max: 480 },
      frameRate: { max: 15 },
      aspectRatio: 1.777
    }).then(() => stream);
  })
  .then((stream) => {
    // 约束应用成功，处理流
  })
  .catch(e => {
    console.error("操作失败", e);
    // 若约束不生效，直接使用原始流做降级处理
  });

注意：这种方法仍有可能被Safari拒绝，取决于系统和浏览器的底层限制。

方案2：通过Canvas手动缩放视频流 #

如果上述方案无效，可以借助Canvas手动将原始屏幕流缩放到目标分辨率，并控制帧率：

navigator.mediaDevices.getDisplayMedia({ video: true })
  .then((stream) => {
    const video = document.createElement('video');
    video.srcObject = stream;
    video.play().then(() => {
      const canvas = document.createElement('canvas');
      // 设置目标分辨率：16:9比例的480p
      canvas.width = 854;
      canvas.height = 480;
      const ctx = canvas.getContext('2d');

      // 按15fps的频率绘制帧
      const drawInterval = setInterval(() => {
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      }, 1000 / 15);

      // 从Canvas获取受控的媒体流
      const constrainedStream = canvas.captureStream(15);

      // 后续使用constrainedStream即可
      // 记得在结束时清理资源：clearInterval(drawInterval); stream.getTracks().forEach(t=>t.stop());
    });
  })
  .catch(e => {
    console.error("捕获屏幕失败", e);
  });

这种方法是前端层面的强制缩放，不受浏览器约束支持的限制，兼容性更好。

另外，建议测试最新版本的Safari，苹果后续可能会完善getDisplayMedia的约束支持。

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