<p>Once you get&nbsp;<code>getUserMedia()</code>&nbsp;working with&nbsp;<a href="../../../../blog/getusermedia-audio-constraints/">audio</a>&nbsp;and&nbsp;<a href="../../../../blog/getusermedia-video-constraints/">video constraints</a>&nbsp;you immediately start hitting problems like:</p>

<ol>
<li>user has no webcam, just a microphone</li>
<li>user has (accidentally) denied access to the webcam</li>
<li>user plugs in the webcam/microphone after your&nbsp;<code>getUserMedia()</code>&nbsp;code has initialized</li>
<li>the device is already used by another app on Windows</li>
<li>Firefox only: the device is already used by another Firefox tab</li>
<li>Chrome only: the user dismisses the privacy dialog</li>
</ol>

<p>To tackle these situations the&nbsp;<a href="https://www.w3.org/TR/mediacapture-streams/#overconstrainederror-object" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Media Capture and Streams spec</a>&nbsp;that governs&nbsp;<code>getUserMedia()</code>&nbsp;defines several errors that you can look out for in your code (and correctly inform the user).</p>

<p>The table below lists the top 5 errors. They&rsquo;re different between Firefox, which currently follows the spec more closely, and Chrome. On top of these 5, the spec also defines&nbsp;<code>AbortError</code>&nbsp;&amp;&nbsp;<code>SecurityError</code>, but I was never able to trigger them.</p>

<table class="wp-block-table">
<thead>
<tr>
<th>FIREFOX 56</th>
<th>CHROME 62</th>
</tr>
</thead>
<tbody>
<tr>
<td>NotFoundError</td>
<td>DevicesNotFoundError</td>
</tr>
<tr>
<td>NotReadableError</td>
<td>TrackStartError</td>
</tr>
<tr>
<td>OverconstrainedError</td>
<td>ConstraintNotSatisfiedError</td>
</tr>
<tr>
<td>NotAllowedError</td>
<td>PermissionDeniedError</td>
</tr>
</tbody>
</table>

<h3 id="notfounderror">NotFoundError</h3>

<p>This one&rsquo;s&nbsp;<br>very common, it&rsquo;s thrown in these 3 cases:</p>

<ol>
<li>when you&rsquo;re&nbsp;<a href="../../../../blog/getusermedia-video-constraints/">requesting just a video track through constraints</a>&nbsp;but&nbsp;<strong>the user does not have a webcam</strong>.</li>
<li>when you&nbsp;<a href="../../../../blog/getusermedia-audio-constraints/">request just an audio track</a>&nbsp;but&nbsp;<strong>the user does not have a microphone<em>device</em></strong>:</li>
</ol>

<ul>
<li>the computer or device has no sound card or</li>
<li>the computer or device has a sound card but the recording&nbsp;<em>device</em>&nbsp;is disabled because there&rsquo;s no mic plugged in or</li>
<li>the recording&nbsp;<em>device</em> is disabled manually from the OS (can be done on Windows) but that&rsquo;s rare.<br><img src="../../../../uploads/1744775099043-2017-11-14-13_07_53-295x300.png" alt="" width="295" height="300"></li>
</ul>

<ol>
<li>when you&rsquo;re requesting both video and audio tracks but&nbsp;<strong>the user does not have a webcam OR a microphone</strong>&nbsp;(it&rsquo;s enough for one device to be missing for the error to be thrown)</li>
</ol>

<p>Firefox will throw a&nbsp;<code>MediaStreamError</code>&nbsp;with it&rsquo;s&nbsp;<code>name</code>&nbsp;property set to &ldquo;NotFoundError&rdquo; and the message &ldquo;The object can not be found here&rdquo;.</p>

<p>Chrome will throw a&nbsp;<code>NavigatorUserMediaError</code>&nbsp;with it&rsquo;s&nbsp;<code>name</code>&nbsp;property set to &ldquo;DevicesNotFoundError&rdquo;.</p>

<h3 id="notreadableerror">NotReadableError</h3>

<p>It most commonly happens on Windows when the browser tries to access the webcam or mic but they&rsquo;re already in use (by Skype, etc.) &ndash;&nbsp;<br>on Windows where processes get exclusive access to the webcam&nbsp;&ndash; but people have also been reporting the error showing up&nbsp;<a href="https://stackoverflow.com/a/36695835/813988" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">when using experimental constraints removed by Chrome</a>&nbsp;or&nbsp;<a href="https://stackoverflow.com/questions/44481163/webrtc-issue-in-chrome-59" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">because of bugs in the Chrome screen recording code</a>. On macOS, where processes share the webcam and microphone, I&rsquo;ve only seen it reported by Firefox.</p>

<p>The&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Mozilla Developer Network Web Docs explanation covers all these situations</a>:</p>

<blockquote class="wp-block-quote">
<p>Although the user granted permission to use the matching devices, a hardware error occurred at the operating system, browser, or Web page level which prevented access to the device.</p>
</blockquote>

<p>On Windows Firefox will throw a&nbsp;<code>MediaStreamError</code>&nbsp;with it&rsquo;s&nbsp;<code>name</code>&nbsp;property set to &ldquo;NotReadableError&rdquo; and it&rsquo;s message property set to &ldquo;Failed to allocate videosource&rdquo; when another app (or Firefox tab) is using the webcam or microphone.</p>

<p>On Windows Chrome will throw a&nbsp;<code>NavigatorUserMediaError</code>&nbsp;with it&rsquo;s&nbsp;<code>name</code>&nbsp;property set to &ldquo;TrackStartError&rdquo;, the non-spec Chrome-specific version, with no message. Different Chrome tabs can share the same webcam.</p>

<p>On macOS it&rsquo;s only thrown by Firefox when another Firefox tab tries to get access to the webcam and mic. On macOs it&rsquo;s paired with the message: &ldquo;Concurrent mic process limit&rdquo;.</p>

<h3 id="overconstrainederror">OverconstrainedError</h3>

<blockquote class="wp-block-quote">
<p>The specified constraints resulted in no candidate devices which met the criteria requested. The error is an object of type&nbsp;<code>OverconstrainedError</code>, and has a&nbsp;<code>constraint</code>&nbsp;property whose string value is the name of a constraint which was impossible to meet, and a&nbsp;<code>message</code>&nbsp;property containing a human-readable string explaining the problem.</p>
</blockquote>

<p>It&rsquo;s thrown when you&rsquo;re requesting a constraint that can not be satisfied by the available hardware, for example a high frame rate or high resolution requested using the&nbsp;<code>min</code>&nbsp;or&nbsp;<code>exact</code>&nbsp;keywords.</p>

<p>Firefox will throw a&nbsp;<code>MediaStreamError</code>&nbsp;with it&rsquo;s&nbsp;<code>name</code>&nbsp;property set to &ldquo;OverconstrainedError&rdquo; .</p>

<p>Chrome will throw a&nbsp;<code>NavigatorUserMediaError</code>&nbsp;with it&rsquo;s&nbsp;<code>name</code>&nbsp;property set to &ldquo;ConstraintNotSatisfiedError&rdquo;, the non-spec Chrome-specific version.</p>

<p>Chrome &amp; Firefox will return the requested resolution or the closest one when using&nbsp;<code>ideal</code>&nbsp;values but if you start using the&nbsp;<code>min</code>&nbsp;keyword with high values or the&nbsp;<code>exact</code>keyword with unsupported values you will immediately trigger the error.</p>

<p>The error object will also mention the constraint that could not be satisfied through the&nbsp;<code>constraintName</code>&nbsp;property and the&nbsp;<code>message</code> &ldquo;Constraints could be not satisfied.&rdquo;.</p>
<p><img src="../../../../uploads/1744775185524-screen-shot-2017-11-21-at-11.22" alt="" width="1024" height="293"></p>

<h3 id="notallowederror">NotAllowedError</h3>

<p>Is thrown when the user denies (or has previously denied) access to the webcam or microphone.</p>

<p>Firefox will throw a&nbsp;<code>MediaStreamError</code>&nbsp;with it&rsquo;s&nbsp;<code>name</code>&nbsp;property set to &ldquo;NotAllowedError&rdquo; and the message &ldquo;The request is not allowed by the user agent or the platform in the current context&rdquo;.</p>

<p>Chrome will throw a&nbsp;<code>NavigatorUserMediaError</code>&nbsp;with it&rsquo;s&nbsp;<code>name</code> property set to &ldquo;PermissionDeniedError&rdquo;.</p>
<p><img src="../../../../uploads/1744775241851-screen-shot-2017-11-27-at-16.07" alt="" width="538" height="328"></p>

<h3 id="typeerror">TypeError</h3>

<p>It&rsquo;s thrown when the constraints object passed to&nbsp;<code>getUserMedia()</code>&nbsp;is empty or has all tracks (audio, video or both) set to false.</p>

<p>Firefox will throw a&nbsp;<code>MediaStreamError</code>&nbsp;with it&rsquo;s&nbsp;<code>name</code>&nbsp;property set to &ldquo;TypeError&rdquo; and the message &ldquo;audio and/or video is required&rdquo;.</p>

<p>Chrome will throw a &ldquo;TypeError: Failed to execute &lsquo;getUserMedia&rsquo; on &lsquo;MediaDevices&rsquo;: At least one of audio and video must be requested&rdquo;.</p>

<h3 id="permissiondismissederror">PermissionDismissedError</h3>

<p>It&rsquo;s thrown by Chrome when the user closes the privacy dialog asking for mic and webcam access.</p>
<p><img src="../../../../uploads/1744775282357-screen-shot-2017-11-27-at-16.10" alt="" width="431" height="234"></p>

<p>Dismissing the dialog is only possible on Chrome so there&rsquo;s no equivalent error on other browsers.&nbsp;<strong>It&rsquo;s not spec compliant</strong>&nbsp;so the error might be removed in Chrome 64 in the&nbsp;<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=721412" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">move towards spec compliant errors</a>.</p>

<h3 id="handlingtheseerrors">Handling these errors</h3>

<p>Handling these errors is quite simple when using the newer&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">promise based&nbsp;</a><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">getUserMedia()</a></code>. You can use the code below or&nbsp;<a href="https://codepen.io/naicuoctavian/pen/wPeZWO" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">this code pen.</a></p>

<pre class="wp-block-code"><code>var constraints = {
    video: false,
    audio: false
}
navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
    /* do stuff */
}).catch(function(err) {
    //log to console first 
    console.log(err); /* handle the error */
    if (err.name == "NotFoundError" || err.name == "DevicesNotFoundError") {
        //required track is missing 
    } else if (err.name == "NotReadableError" || err.name == "TrackStartError") {
        //webcam or mic are already in use 
    } else if (err.name == "OverconstrainedError" || err.name == "ConstraintNotSatisfiedError") {
        //constraints can not be satisfied by avb. devices 
    } else if (err.name == "NotAllowedError" || err.name == "PermissionDeniedError") {
        //permission denied in browser 
    } else if (err.name == "TypeError" || err.name == "TypeError") {
        //empty constraints object 
    } else {
        //other errors 
    }
});</code></pre>

<p>The code starts out with false for both the video and audio track to immediately trigger the&nbsp;<code>TypeError</code>&nbsp;.</p>

Once you get getUserMedia() working with audio and video constraints you immediately start hitting problems like: user has no webcam, just a m...

Common getUserMedia() Errors