Async enumerateDevices

by jib1

HTML

<video id="video" height="120" autoplay></video><br>
<button id="gum">Start!</button>
<button id="stopp">Stop!</button>
<button id="list">Enumerate!</button>
<label><input type="checkbox" id="muted">Face-muted</label>
<div id="div"><br></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

JavaScript

const console = { log: msg => div.innerHTML += msg + "<br>" };

const dumptrack = ([a,b],track) => `${a}${track.kind == "video" ? "Camera" : "Microphone"} (${track.readyState}): ${track.label}${b} (${track.getSettings().deviceId})`;

gum.onclick = async () => {
  try {
    video.srcObject = await navigator.mediaDevices.getUserMedia({video:true, audio:true});
    for (const track of video.srcObject.getTracks()) {
      console.log(dumptrack`${track}`);
      track.onended = () => console.log(`${track.kind} track ${track.readyState}`);
    }
  } catch (e) {
    console.log(e);
  }
};

stopp.onclick = () => {
  for (const track of video.srcObject.getTracks()) {
    track.stop();
    track.onended();
    console.log(dumptrack`${track}`);
  }
  video.srcObject = null;
};

muted.onclick = () => {
  video.srcObject.getTracks().forEach(track => track.enabled = !muted.checked);
};

list.onclick = async () => {
  let devices = await navigator.mediaDevices.enumerateDevices();
  console.log(`Enumerate ${devices.length} devices.`);
  for (let {kind, label, deviceId, groupId} of devices) {
    console.log(`${kind}: ${label} (${deviceId})`);
  }
}

navigator.mediaDevices.ondevicechange = () => {
  console.log("device change!");
  for (const track of video.srcObject.getTracks()) {
    console.log(dumptrack`${track}`);
  }
}