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

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

@@ -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;">

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>