title: I got OverconstrainedError only Firefox on Macbook Pro
body: <p>here is my code</p>
  <pre class="lang-js prettyprint-override"><code>const userVideo = document.getElementById(&quot;user-video&quot;);
  
  const CONSTRAINTS = {
    audio: {
      autoGainControl: false,
      channelCount: 2,
      echoCancellation: true,
      noiseSuppression: true,
      sampleRate: 48000,
      sampleSize: 16,
    },
    video: {
      facingMode: &quot;user&quot;,
      width: { min: 0, ideal: 320, max: 320 },
      height: { min: 0, ideal: 240, max: 240 },
      frameRate: { ideal: 15, max: 30 },
    },
  };
  
  (async () =&gt; {
    const userMedia = await navigator.mediaDevices.getUserMedia(CONSTRAINTS);
    console.log(userMedia);
  
    userVideo.srcObject = userMedia;
  })();
  </code></pre>
  <p>It is working fine on Chrome and Safari
  BUT in Firefox I got an error <code>OverconstrainedError</code></p>
  <pre><code>MediaStreamError
  constraint: &quot;width&quot;
  message: &quot;Constraints could be not satisfied.&quot;​
  name: &quot;OverconstrainedError&quot;
  stack: &quot;&quot;
  </code></pre>
  <p>So I try to change <code>width</code> and <code>height</code> constraints to</p>
  <pre><code>width: { min: 0, ideal: 320, max: 360 },
  height: { min: 0, ideal: 240, max: 300 },
  </code></pre>
  <p>IT'S WORKING FINE!!!!</p>
  <p>Ps. I tested WebRTC on this website <a href="https://test.webrtc.org/" rel="nofollow noreferrer">https://test.webrtc.org/</a>
  Firefox on MacBook not support 320x240
  but another browser and another OS can support it.</p>
  <p>I want to know why. Please explain to me.</p>