From 72967908034b67a5f0585700eb48015772bc0b5d Mon Sep 17 00:00:00 2001
From: Karen Lees <karen@equanostic.com>
Date: Mon, 6 Feb 2023 18:43:05 +0100
Subject: [PATCH] Add camera to 3D View

---
 app/index.html | 61 ++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 57 insertions(+), 4 deletions(-)

diff --git a/app/index.html b/app/index.html
index b66a452..6d96f30 100644
--- a/app/index.html
+++ b/app/index.html
@@ -1147,11 +1147,17 @@
                   </div>
                   <div class="section" id="tab-three">
                     <div id="renderArea"></div>
-                    <div style="position: absolute; top: 10px; right:10px; z-index: 1; max-width: 100px; max-width: 100px;" id="overlayimg">
-                      <!-- <img src="img/mch/acro55.png" style="max-width:100%; max-height:100%;">
-                    <span style="position: absolute; top: 3px; right:3px; z-index: 1;" class="fas fa-cogs"></span> -->
+                    <div style="position: absolute; top: 10px; right:10px; z-index: 1; max-width: 100px;" id="overlayimg">
+                      <!-- <img src="img/mch/acro55.png" style="max-width:100%; max-height:100%;"> -->
+                      <span style="position: absolute; top: 3px; right:3px; z-index: 1;" class="fas fa-cogs"></span>
                     </div>
-                    <div class="fixed-bottom m-3 mb-9">
+                    <div style="position: absolute; top: 60px; right:10px; z-index: 1; width: 200px; border: 1px lightgrey solid;">
+                        <select data-prepend="&nbsp;<i class='fas fa-video'></i>" id="videoInputSelect" class="text-small" onchange="streamSelectedCamera()">
+                          <option value="">None</option>
+                      </select>
+                      <video width="200px" autoplay="true" id="videoElement"></video>
+                    </div>
+                    <div class="fixed-bottom m-3 mb-9" style="border: 1px grey solid;">
                       <button class="button dark" onclick="simSpeed();"><span class="icon"><span class="fas fa-tachometer-alt"></span></span><span class="caption"><span id="simspeedval">1</span>x</span>
                       </button>
                       <button id="runSimBtn" title="Run simulation" class="button dark drop-shadow" onclick="sim(0)"><i class="fas fa-fighter-jet"></i> Simulate</button>&nbsp;
@@ -1164,6 +1170,9 @@
                   <div class="section" id="tab-four">
                     <div id="macros"></div>
                   </div>
+                  <div class="section" id="tab-five">
+                    <div>Hello world</div>
+                  </div>
                 </div>
               </nav>
             </div>
@@ -2076,5 +2085,49 @@
 
   <script src="/lib/furcanIconPicker/iconpicker-1.5.0.js"></script>
 
+  <script>
+   function streamSelectedCamera() {
+       console.log('Streaming camera...');
+       const deviceId = document.getElementById("videoInputSelect").value;
+       const video = document.querySelector("#videoElement");
+       if (deviceId === "") {
+         console.log('No camera selected..');
+         video.srcObject = null;
+         return;
+       }
+
+       navigator.mediaDevices.getUserMedia({ video: { deviceId: { exact: deviceId }}})
+              .then((device)=>{
+                    console.log('updating camera stream');
+                    video.srcObject = device;
+              })
+              .catch(function (err) {
+                  console.error(`${err.name}: ${err.message}`);
+              });
+   }
+
+   function getVideoDevices() {
+      navigator.mediaDevices.enumerateDevices()
+              .then((devices) => {
+                const videoDevices = devices.filter(device => device.kind === "videoinput");
+                const videoSelect = document.getElementById("videoInputSelect");
+                videoDevices.forEach((device) => {
+                    let option = new Option(device.label, device.deviceId);
+                    videoSelect.options.add(option);
+                });
+              })
+              .catch((err) => {
+                  console.error(`${err.name}: ${err.message}`);
+              });
+   }
+
+    if (!navigator.mediaDevices?.enumerateDevices) {
+        console.log("enumerateDevices() not supported. Cannot stream video.");
+    } else {
+        getVideoDevices();
+    }
+
+  </script>
+
 </html>
 <!--  -->
\ No newline at end of file