Add ondevicechange event support to demo

src/content/devices/input-output/js/main.js

@@ -13,10 +13,22 @@
 const audioOutputSelect = document.querySelector('select#audioOutput');
 const videoSelect = document.querySelector('select#videoSource');
 const selectors = [audioInputSelect, audioOutputSelect, videoSelect];
+var hasMic = false;
+var hasCamera = false;
+var openMic = undefined;
+var openCamera = undefined;
 
 audioOutputSelect.disabled = !('sinkId' in HTMLMediaElement.prototype);
 
+function getDevices() {
+  console.log('getDevices');
+  navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
+}
+
 function gotDevices(deviceInfos) {
+  console.log('gotDevices', deviceInfos);
+  hasMic = false;
+  hasCamera = false;
   // Handles being called several times to update labels. Preserve values.
   const values = selectors.map(select => select.value);
   selectors.forEach(select => {
@@ -26,15 +38,18 @@
   });
   for (let i = 0; i !== deviceInfos.length; ++i) {
     const deviceInfo = deviceInfos[i];
+    console.log(deviceInfo);
     const option = document.createElement('option');
     option.value = deviceInfo.deviceId;
     if (deviceInfo.kind === 'audioinput') {
+      hasMic = true;
       option.text = deviceInfo.label || `microphone ${audioInputSelect.length + 1}`;
       audioInputSelect.appendChild(option);
     } else if (deviceInfo.kind === 'audiooutput') {
       option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`;
       audioOutputSelect.appendChild(option);
     } else if (deviceInfo.kind === 'videoinput') {
+      hasCamera = true;
       option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
       videoSelect.appendChild(option);
     } else {
@@ -46,10 +61,9 @@
       select.value = values[selectorIndex];
     }
   });
+  start();
 }
 
-navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
-
 // Attach audio output device to video element using device/sink ID.
 function attachSinkId(element, sinkId) {
   if (typeof element.sinkId !== 'undefined') {
@@ -79,32 +93,51 @@
 function gotStream(stream) {
   window.stream = stream; // make stream available to console
   videoElement.srcObject = stream;
-  // Refresh button list in case labels have become available
-  return navigator.mediaDevices.enumerateDevices();
+  if (stream.getVideoTracks()[0]) {
+    openCamera = stream.getVideoTracks()[0].getSettings().deviceId;
+  }
+  if (stream.getAudioTracks()[0]) {
+    openMic = stream.getAudioTracks()[0].getSettings().deviceId;
+  }
+  console.log('openCamera', openCamera, 'openMic', openMic);
+  // Refresh list in case labels have become available
+  return getDevices();
 }
 
 function handleError(error) {
   console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
 }
 
 function start() {
+  const audioSource = audioInputSelect.value || undefined;
+  const videoSource = videoSelect.value || undefined;
+  console.log('audio', audioSource, 'video', videoSource);
+  if (openMic == audioSource && openCamera == videoSource) {
+    return;
+  }
   if (window.stream) {
     window.stream.getTracks().forEach(track => {
       track.stop();
     });
+    openCamera = undefined;
+    openMic = undefined;
+  }
+  let constraints = {};
+  if (hasMic) {
+    constraints['audio'] = {deviceId: audioSource ? {exact: audioSource} : undefined};
+  }
+  if (hasCamera) {
+    constraints['video'] =  {deviceId: videoSource ? {exact: videoSource} : undefined};
+  }
+  console.log('start', constraints);
+  if (hasCamera || hasMic) {
+    navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(handleError);
   }
-  const audioSource = audioInputSelect.value;
-  const videoSource = videoSelect.value;
-  const constraints = {
-    audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
-    video: {deviceId: videoSource ? {exact: videoSource} : undefined}
-  };
-  navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError);
 }
 
 audioInputSelect.onchange = start;
 audioOutputSelect.onchange = changeAudioDestination;
-
 videoSelect.onchange = start;
+navigator.mediaDevices.ondevicechange = getDevices;
 
-start();
+getDevices();