Revision 972191 of MediaDeviceInfo

<div>{{APIRef("WebRTC")}}{{SeeCompatTable}}</div>

<p><span class="seoSummary">The <strong><code>MediaDevicesInfo</code></strong> interface contains&nbsp;information on the available media input and output devices.</span></p>

<h2 id="Properties">Properties</h2>

<dl>
 <dt>{{domxref("MediaDeviceInfo.deviceId")}}{{readonlyinline}}</dt>
 <dd>Returns a {{domxref("DOMString")}} that is an identifier for the represented device that is persisted across sessions. It is un-guessable by other applications and unique to the origin of the calling application. It is reset when the user clears cookies (for Private Browsing, a different identifier is used that is not persisted across sessions).</dd>
 <dt>{{domxref("MediaDeviceInfo.groupId")}}{{readonlyinline}}</dt>
 <dd>Returns a {{domxref("DOMString")}} that is a group identifier. Two devices have the same group identifier if they belong to the same physical device; for example a monitor with both a built-in camera and microphone.</dd>
 <dt>{{domxref("MediaDeviceInfo.kind")}}{{readonlyinline}}</dt>
 <dd>Returns an enumerated value that is either <code>"videoinput"</code>, <code>"audioinput"</code> or <code>"audiooutput"</code>.</dd>
 <dt>{{domxref("MediaDeviceInfo.label")}}{{readonlyinline}}</dt>
 <dd>Returns a {{domxref("DOMString")}} that is a label describing this device (for example "External USB Webcam"). Only available during active MediaStream use or when persistent permissions have been granted.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<p>None.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Media Capture', '#idl-def-MediaDeviceInfo', 'MediaDevicesInfo')}}</td>
   <td>{{Spec2('Media Capture')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Example"><strong>Example</strong></h2>

<p>Here's an example of using <code>mediaDevices.enumerateDevices()</code>.</p>

<pre class="brush:js">
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("enumerateDevices() not supported.");
  return;
}

// List cameras and microphones.

navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
  devices.forEach(function(device) {
    console.log(device.kind + ": " + device.label +
                " id = " + device.deviceId);
  });
})
.catch(function(err) {
  console.log(err.name + ": " + error.message);
});
</pre>

<p>This might produce:</p>

<pre class="eval">
videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: id = RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: id = r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=</pre>

<p>or if one or more MediaStreams are active or persistent permissions are granted:</p>

<pre class="eval">
videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
</pre>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(45.0)}}<sup>[1]</sup></td>
   <td>39</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>39</td>
   <td>2.5</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Behind a flag. This interface is also available in Chrome through the <a href="https://github.com/webrtc/adapter">adapter.js</a> polyfill.</p>

<p>[2] This interface is available in Opera through the <a href="https://github.com/webrtc/adapter">adapter.js</a> polyfill.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> - the introductory page to the API</li>
</ul>