I got OverconstrainedError only Firefox on Macbook Pro

Question

here is my code

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;
})();

It is working fine on Chrome and Safari BUT in Firefox I got an error OverconstrainedError

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

So I try to change width and height constraints to

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

IT'S WORKING FINE!!!!

Ps. 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.

I want to know why. Please explain to me.

Answer 1

This is bug 1286945 . Firefox doesn't yet support downscaling of camera resolutions to constraints.

This means Firefox offers native camera modes only at the moment.

Workaround

Remove the max constraint on width and height. min and max are strictly enforced and are causing the OverconstrainedError here.

They're also largely unnecessary since the ideal value has gravity. So don't use them unless you're prepared to handle errors and try again with a fallback.

The browser should already find you the resolution closest to the ideal.

Read more about constraints here .