title: enumerateDevices after getUserMedia: how to find the active devices?
body: <p>Is there a way to detect which device (camera, microphone) is active, given a <code>MediaStream</code> instance?</p>
  <p>The app I'm currently working on does simply query for such a stream and attaches it to a <code>&lt;video/&gt;</code> element:</p>
  <pre class="lang-js prettyprint-override"><code>const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  
  const el = document.querySelector(&quot;video&quot;)
  el.srcObject = stream
  
  console.log(stream.getTracks())
  // MediaStreamTrack { kind: &quot;audio&quot;, id: &quot;{000d071e-f936-42d8-872e-a568cd96cc2d}&quot;, label: &quot;USB Audio Device Mono&quot;, … }
  ​// MediaStreamTrack { kind: &quot;video&quot;, id: &quot;{186427d5-b04a-4906-9177-1a088c5d4e0a}&quot;, label: &quot;C922 Pro Stream Webcam&quot;, … 
  </code></pre>
  <p>The next step is to give the user the ability to change camera/mic. The basic code for this is:</p>
  <pre class="lang-js prettyprint-override"><code>const devices = await navigator.mediaDevices.enumerateDevices()
  console.log(devices)
  // MediaDeviceInfo { deviceId: &quot;yQx5+MN7znbmkE0tV98jJHpvqrUaa6Gv5WIXF52jj0s=&quot;, kind: &quot;videoinput&quot;, label: &quot;C922 Pro Stream Webcam&quot;, … }
  ​// MediaDeviceInfo { deviceId: &quot;dIjwtaOGQbjT2HOqfJ4xjzjXBwBxz4CEeX3a2fn0ZgA=&quot;, kind: &quot;audioinput&quot;, label: &quot;USB Audio Device Mono&quot;, … }​
  // MediaDeviceInfo { deviceId: &quot;/t3u7BlfExATtBC4CUmyqIo8RORDxMu9aMrJJHN0Ez0=&quot;, kind: &quot;audioinput&quot;, label: &quot;C922 Pro Stream Webcam Analog Stereo&quot;, … }​
  // MediaDeviceInfo { deviceId: &quot;/5pqK1599b+mKHm26zCYQ+Ql3vG0Em7xiVbqfm1C/9A=&quot;, kind: &quot;audioinput&quot;, label: &quot;Monitor of Built-in Audio Digital Stereo (IEC958)&quot;, … }
  // MediaDeviceInfo { deviceId: &quot;Tib/PVScFuFUQuAtYYVgtxcxeu08opGKe9MXEVmxq84=&quot;, kind: &quot;audioinput&quot;, label: &quot;Monitor of USB Audio Device Analog Stereo&quot;, … }
  </code></pre>
  <p>I can simply transform this list into <code>&lt;select/&gt;</code>+<code>&lt;option/&gt;</code> lists (one for each <code>kind</code>), let the user decide and re-request the stream with the selected <code>deviceId</code> (<code>getUserMedia({ audio: { deviceId: selectedDeviceId } })</code>).</p>
  <p><strong>However:</strong> the track and device ID don't match, so how do I determine which <code>&lt;option/&gt;</code> should be pre-selected? Looking at MDN, the stream's track ID is <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/id" rel="noreferrer">generated by the browser</a> (which makes sense), but the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream#methods" rel="noreferrer"><code>MediaStream</code> API</a> doesn't provide much alternatives...</p>
  <p>Surely, the answer can't be &quot;go by the label&quot;—I can plug in a second identical webcam and have two video devices with the same name?</p>