Add ability to capture from webcam video source

web/index.html

@@ -275,7 +275,22 @@ <h4 class="mdl-dialog__title">Settings</h4>
                       </span>
                     </li>
                   </ul>
-
+
+                  <ul class="mdl-list">
+                    <li class="mdl-list__item">
+                      <span class="mdl-list__item-primary-content">
+                        Select New Capture Device
+                      </span>
+                      <div class="select">
+                          <label for="captureSource">Capture source: </label><select id="captureSource"></select>
+                      </div>
+                      <span class="mdl-list__item-secondary-action">
+                        <button onclick="selectCaptureDevice()" class="mdl-button mdl-js-button mdl-button--icon">
+                          <i class="material-icons">keyboard_arrow_right</i>
+                        </button>
+                      </span>
+                    </li>
+                  </ul>
               </div>
 
               <div class="mdl-tabs__panel" id="hotkeys">

web/index.js

@@ -23,6 +23,8 @@ const displayMediaOptions = {
   },
   audio: false
 }
+
+
 let dialogWindow, autoModeTimer, croppedVideoTimer, currentText;
 let audioSources, audioDeviceIndex;
 
@@ -73,20 +75,46 @@ const croppedVideoCanvas = document.getElementById("croppedVideoCanvas");
 const croppedVideoCtx = croppedVideoCanvas.getContext("2d");
 const settingsDialog = document.getElementById("settingsDialog");
 const dialogCloseButton = document.getElementById("dialogCloseButton");
+const captureSelect = document.getElementById("captureSource");
 
 init();
 
 function init() {
   (async() => {
     loadProfiles();
     loadAnki();
+    getCaptureDevices();
   })();
 }
 
 function selectApplication() {
   startCapture();
 }
 
+async function getCaptureDevices() {
+  if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
+    console.log("enumerateDevices() not supported.");
+    return;
+  }
+
+  captureSelect.options.length = 0;
+  navigator.mediaDevices.enumerateDevices().then(function(devices) {
+    devices.forEach(function(device) {
+      if (device.kind == "videoinput") {
+        const option = document.createElement('option');
+        option.value = device.deviceId;
+        option.text = device.label || `source ${captureSelect.length +1}`;
+        captureSelect.appendChild(option)
+      }
+    })
+  });
+
+}
+
+function selectCaptureDevice() {
+    startDeviceCapture();
+}
+
 async function startCapture(){
   try {
     videoElement.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
@@ -98,6 +126,23 @@ async function startCapture(){
   }
 }
 
+async function startDeviceCapture(){
+  const videoSource = captureSelect.value;
+  const userMediaOptions = {
+    video: {width: 1920, height: 1080, deviceId: videoSource ? {exact: videoSource} : undefined},
+    audio: false
+  }
+  try {
+    videoElement.srcObject = await navigator.mediaDevices.getUserMedia(userMediaOptions);
+    getCaptureDevices();
+    if (settingsDialog.open) {
+      closeSettings();
+    }
+  }catch(err) {
+    console.error("Error" + err)
+  }
+}
+
 function videoOnLoad(element) {
   videoLoaded = true;
   resizeCanvas(element);