Merge branch 'main' into downloadSpectrum

Author: waridrox

dist/capture.dist.js

@@ -265,20 +265,98 @@ $W.getUserMedia = function(options) {
     container.appendChild(video);
     video.autoplay = true;
     video.id = 'webcam-video'
+
+    var videoElement = document.getElementById('webcam-video');
+    var videoSelect = document.querySelector('select#videoSource');
+    var selectors = [videoSelect];
 
-    const successCallback = stream => {
+    successCallback = stream => {
       $('#heightIndicator').show()
       $('#webcam-msg').hide()
-      attachMediaStream(video, stream)
+
+      window.stream = stream;
+      videoElement = attachMediaStream(videoElement, stream)
       if ($W.flipped == true) {
         $W.flipped = false; // <= turn it false because f_h() will toggle it. messy.
         $W.flip_horizontal();
       }
+      return getVidDevices();
     };
 
     const errorCallback = () => console.warn(error);
 
     getUserMedia($W.defaultConstraints, successCallback, errorCallback);
+
+    gotVidDevices = (deviceInfos) => {
+      let values = selectors.map(function(select) {
+        return select.value; 
+      });
+    
+      selectors.forEach(function(select) {
+        while (select.firstChild) {
+          select.removeChild(select.firstChild);
+        }
+      });
+      for (let i = 0; i !== deviceInfos.length; ++i) {
+        let deviceInfo = deviceInfos[i];
+        let option = document.createElement('option');
+        option.value = (deviceInfo.id || deviceInfo.deviceId);
+        if (deviceInfo.kind === 'videoinput' || deviceInfo.kind === 'video') {
+          console.log(deviceInfo.label);
+          option.text = deviceInfo.label || 'camera ' + (videoSelect.length + 1);
+          videoSelect.appendChild(option);
+        } 
+      }
+      
+      selectors.forEach(function(select, selectorIndex) {
+        if (Array.prototype.slice.call(select.childNodes).some(function(n) {
+          return n.value === values[selectorIndex];
+        })) {
+          select.value = values[selectorIndex];
+        }
+      });
+    }
+  
+    getVidDevices = () => {
+      if (typeof Promise === 'undefined') {
+        return MediaStreamTrack.getSources(gotVidDevices);
+      } else {
+        return navigator.mediaDevices.enumerateDevices()
+        .then(gotVidDevices)
+        .catch((error) => {
+          console.error(error);
+        });
+      }
+    }
+  
+    getVidDevices();
+  
+    start = () => {
+      if (window.stream) {
+        window.stream.getTracks().forEach(function(track) {
+          track.stop(); //stopping the current video stream
+        });
+      }
+  
+      var videoSource = videoSelect.value;
+      var constraints = {
+        video: {
+          deviceId: videoSource ? {exact: videoSource} : undefined //Taking device ids as the video source 
+        }
+      };
+  
+      if (typeof Promise === 'undefined') {
+      navigator.getUserMedia(constraints, successCallback, function(){}); 
+      } 
+      else {
+      navigator.mediaDevices.getUserMedia(constraints)
+      .then(successCallback);
+      } 
+    }
+  
+    videoSelect.onchange = start; //repeating the process for source change
+  
+    start();
   });
 };
 

examples/capture/index.html

@@ -178,7 +178,7 @@
       <div class="select" style="padding-top:5px;">
         <label for="videoSource">Camera source: </label><select id="videoSource"></select>
       </div>
-
+ 
       <p><small><b>TOOLS</b></small></p>
       <div class="btn-group toolbar" style="margin-bottom:5px;">
         <a rel="tooltip" title="Scripting" class="btn btn-default" href="#macros" data-toggle="tab"><i class="fa fa-white fa-terminal"></i></a>

examples/new-capture/index.html

@@ -175,7 +175,7 @@ <h1>
           <div class="select" style="padding-top:5px;">
             <label for="videoSource">Camera source: </label><select id="videoSource"></select>
           </div>
-
+          
           <p style="padding-top:5px;">
             Help <a href="http://publiclab.org/wiki/spectral-workbench-usage#Webcam+selection">selecting a camera</a>
           </p>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "spectral-workbench",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "Framework for spectrometric data management & analysis by Public Lab",
   "main": "dist/spectral-workbench.js",
   "scripts": {