我在 Macbook Pro 上只有 Firefox 出现 OverconstrainedError

Question

这是我的代码

const userVideo = document.getElementById("user-video");

const CONSTRAINTS = {
  audio: {
    autoGainControl: false,
    channelCount: 2,
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 48000,
    sampleSize: 16,
  },
  video: {
    facingMode: "user",
    width: { min: 0, ideal: 320, max: 320 },
    height: { min: 0, ideal: 240, max: 240 },
    frameRate: { ideal: 15, max: 30 },
  },
};

(async () => {
  const userMedia = await navigator.mediaDevices.getUserMedia(CONSTRAINTS);
  console.log(userMedia);

  userVideo.srcObject = userMedia;
})();

它在 Chrome 和 Safari 上运行良好，但在 Firefox 中出现错误OverconstrainedError

MediaStreamError
constraint: "width"
message: "Constraints could be not satisfied."​
name: "OverconstrainedError"
stack: ""

所以我尝试将width和height约束更改为

width: { min: 0, ideal: 320, max: 360 },
height: { min: 0, ideal: 240, max: 300 },

它工作正常！！！！

附言。 I tested WebRTC on this website https://test.webrtc.org/ Firefox on MacBook not support 320x240 but another browser and another OS can support it.

我想知道为什么。 请给我解释一下。

Answer 1

这是错误 1286945 。 Firefox 还不支持将相机分辨率缩小到约束。

这意味着 Firefox 目前仅提供原生相机模式。

解决方法

删除对宽度和高度的max约束。 min和max被严格执行，并在此处导致OverconstrainedError 。

它们在很大程度上也是不必要的，因为ideal值具有重力。 所以不要使用它们，除非您准备好处理错误并使用后备重试。

浏览器应该已经找到最接近理想的分辨率。

在此处阅读有关约束的更多信息。