add camera chooser - remove toggle button

use video prefs in startup function

setup_microscope.html

@@ -56,14 +56,14 @@
         <video autoplay="true" id="video"></video>
       </div>
       <div class="col-4 ">
-        <div class = "row">
-          <button class="btn btn-primary float-end" onclick="takePicture();" id="start-button">
-            Take photo
-          </button>
-          <button class="btn btn-primary float-end" onclick="toggle_cam();">
-            Toggle camera
-          </button>
-        </div>
+
+          <label class = "form-label" for="camera_chooser">
+            Select a Camera
+          </label>
+          <select class="form-select" aria-label="Default select example" name="camera_chooser" id = "camera_chooser">
+
+          </select>
+
         <div id="control_elements" class="row align-items-end">
           <div class="col" name="length" >
             <label class = "form-label" for="real_length">
@@ -150,6 +150,17 @@
               </input>
             </div>
           </div>
+          <div class="row">
+        	  <div class="col">
+              <label class = "form-check-label" for="default">
+                This should be the default Camera setup
+              </label>
+            </div>
+            <div class="col">
+              <input class="form-check-input" type="checkbox" id = "Default" name="default">
+              </input>
+            </div>
+          </div>
           <button class="btn btn-primary float-end" type="submit">submit</button>
         </form>
   </div>
@@ -188,17 +199,28 @@
   form.addEventListener("submit", add);
 
   function add(event){
+    event.preventDefault();
+
     let microscope_setup = {
       "name" : document.getElementById("name").value,
       "FoV_Height" : document.getElementById("FoV_height").value,
       "FoV_Width" : document.getElementById("FoV_width").value,
       "Slip_Height" : document.getElementById("Slip_height").value,
-      "Slip_Width" : document.getElementById("Slip_width").value
+      "Slip_Width" : document.getElementById("Slip_width").value,
+      "video_prefs" : video_prefs,
     }
+
     let transaction =  db.transaction(["microscope_setup"], "readwrite");
     let objectStore = transaction.objectStore("microscope_setup");
     let add_request = objectStore.add(microscope_setup); // (3)
-
+    add_request.onsuccess = (event) => {
+      console.log("All done!");
+      let id_of_setup = event.target.result;
+      if (document.getElementById("Default").checked){
+        let my_default = {"id" : 0, "microscope_setup" : id_of_setup};
+        let next_transaction = db.transaction(["defaults"], "readwrite");
+        let next_objectStore = next_transaction.objectStore("defaults");
+        let add_next_request = next_objectStore.put(my_default);
         transaction.oncomplete = (event) => {
           console.log("All done!");
         };
@@ -206,23 +228,40 @@
           console.log("something went wrong");
           // Don't forget to handle errors!
         };
-    event.preventDefault();
+      }
+    };
+    add_request.onerror = (event) => {
+      console.log("something went wrong");
+      // Don't forget to handle errors!
+    };
+
 
   }
-</script>
-<script>
+
 var video = document.querySelector("#video");
 var out = document.querySelector("#output");
+var camera_chooser = document.querySelector("#camera_chooser")
 // init video switching get IDs of video inputs
-
+let video_prefs={ video: {width: { ideal:  99999} , height: { ideal: 99999 }}, audio: false };
+let streaming = false;
+let index = 1;
 navigator.mediaDevices
     .enumerateDevices()
     .then((devices) => {
       devices.forEach((device) => {
         if (device.kind=="videoinput"){
-        deviceIDs.push(device.deviceId);
+        let cameraID = document.createElement("option");
+        let text = document.createTextNode("camera " + index);
+        if (index == 1){
+          video_prefs.video.deviceId = device.deviceId;
+          cameraID.defaultSelected = true;
+        }
+        ++index;
+        cameraID.value = device.deviceId;
+        cameraID.appendChild(text);
+        camera_chooser.appendChild(cameraID);
+
         }
-        console.log(`${device.kind}: ${device.label} id = ${device.deviceId}`);
       });
     })
     .catch((err) => {
@@ -230,28 +269,11 @@ navigator.mediaDevices
     });
 
 
-// toggle between cameras
 
-var deviceIDs = [];
-var device_index = 0;
-
-function toggle_cam(){
-  device_index += 1
-  if (device_index>=deviceIDs.length){
-    device_index=0
-  };
-
-  if (navigator.mediaDevices.getUserMedia) {
-  navigator.mediaDevices.getUserMedia({ video: {
-    deviceId: deviceIDs[device_index],
-  }, })
-    .then(function (stream) {
-      video.srcObject = stream;
-    })
-    .catch(function (error) {
-      console.log("Something went wrong!");
-    });
-  }
+camera_chooser.addEventListener("change", change_cam);
+function change_cam(){
+  video_prefs.video.deviceId = this.value;
+  startup();
 };
 
 var real_dimensions = document.querySelector("#real_dimensions");
@@ -338,7 +360,8 @@ function draw(e) {
   }
 }
 
-  let streaming = false;
+startup();
+
 
   function startup() {
     output = document.getElementById("output");
@@ -348,7 +371,7 @@ function draw(e) {
     startButton = document.getElementById("start-button");
 
     navigator.mediaDevices
-      .getUserMedia({ video: {width: { ideal:  99999} , height: { ideal: 99999 }}, audio: false })
+      .getUserMedia(video_prefs)
       .then((stream) => {
         video.srcObject = stream;
         video.play();
@@ -427,10 +450,7 @@ function draw(e) {
     }
   }
 
-  // Set up our event listener to run the startup process
-  // once loading is complete.
-  window.addEventListener("load", startup, false);
-//})();
+
 
 </script>
 </html>