From 4f29a95119af0aef7a4a2e131ec4815df475e1a8 Mon Sep 17 00:00:00 2001
From: Jeffrey Warren <jeff@unterbahn.com>
Date: Thu, 10 Jun 2021 18:41:06 -0400
Subject: [PATCH 1/2] bump to v0.2.0 (#238)

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9731faac..aadfe322 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "spectral-workbench",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index e36398a9..b7001f40 100644
--- a/package.json
+++ b/package.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": {

From 2013be69697ebd6a9a9a615ab05ffdc09b4c4635 Mon Sep 17 00:00:00 2001
From: Mohammad Warid <58583793+waridrox@users.noreply.github.com>
Date: Sat, 21 Aug 2021 21:15:09 +0530
Subject: [PATCH 2/2] Camera switching in a dropdown list (#247)

* Added camera switching in a dropdown

* Added dropdown element for camera switching on old and new interface

Added dropdown element on old interface
---
 dist/capture.dist.js            | 82 ++++++++++++++++++++++++++++++++-
 examples/capture/index.html     |  4 ++
 examples/new-capture/index.html |  6 ++-
 3 files changed, 89 insertions(+), 3 deletions(-)

diff --git a/dist/capture.dist.js b/dist/capture.dist.js
index 6e6e0ed8..c1500f31 100644
--- a/dist/capture.dist.js
+++ b/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();
   });
 };
 
diff --git a/examples/capture/index.html b/examples/capture/index.html
index 82f8b22f..ddb03821 100644
--- a/examples/capture/index.html
+++ b/examples/capture/index.html
@@ -174,6 +174,10 @@
         <a rel="tooltip" title="Flip video horizontally" class="btn btn-default btn-flip" onClick="$W.flip_horizontal()"><i class="fa fa-white fa-arrows-h"></i></a>
         <a rel="tooltip" title="Scale video" class="btn btn-default" onClick="$W.scale_h = parseFloat(prompt('Enter a horizontal scaling factor (default is 1):'))"><i class="fa fa-white fa-expand"></i></a>
       </div>
+
+      <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;">
diff --git a/examples/new-capture/index.html b/examples/new-capture/index.html
index 62a2e766..9227ef73 100644
--- a/examples/new-capture/index.html
+++ b/examples/new-capture/index.html
@@ -170,8 +170,12 @@ <h1>
             <a rel="tooltip" title="" class="btn btn-default" onclick="$W.auto_detect_sample_row()" data-original-title="Auto select sample row"><i class="fa fa-white fa-arrows-v"></i> Auto-select Sample Row</a>
             <a rel="tooltip" title="Flip video horizontally" class="btn btn-default btn-flip" onClick="$W.flip_horizontal()"><i class="fa fa-white fa-arrows-h"></i> Flip image</a>
             <a rel="tooltip" title="Rotate video 90 &deg;" class="btn btn-default btn-rotate" onClick="$W.toggle_rotation()"><i class="fa fa-white fa-rotate-right"></i> Rotate</a>
-
           </p>
+
+          <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>