Add camera selector to checkin page

Allow the camera to be selected so tablets can use the
rear camera as well as the front camera.

vendor/regidesk/regidesk/templates/regidesk/ci_landing.html

@@ -21,6 +21,11 @@
 <div class="col-6">
     <p><strong id="note"></strong></p>
     <video id="preview"" autoplay style=" height: 400px;"></video>
+
+    <p>Select camera:</p>
+    <ul id="camera-list" class="list-group">
+        <li class="list-group-item active" aria-current="true">No camera found</li>
+    </ul>
 </div>
 
 <div class="col-6">
@@ -43,6 +48,9 @@
 
 <script type="text/javascript">
     let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
+    let activeCameraId = null;
+    let availableCameras = [];
+
     scanner.addListener('scan', function (content) {
         // This should ensure we start with the lca base domain. However, I don't have the time for this
         // considering we have quite a few domains right now.
@@ -57,9 +65,57 @@
         }
     });
 
-    function startCamera(cameras) { scanner.start(cameras[0]); }
+    function startCamera(cameras) {
+        // Update available cameras.
+        availableCameras = cameras;
+
+        // Display the cameras on the page.
+        let cameraList = document.getElementById('camera-list');
+        cameraList.innerHTML = "";
+
+        for (let i = 0; i < cameras.length; ++i) {
+            let camera = cameras[i];
+
+            let cameraItem = document.createElement('li');
+            cameraItem.textContent = formatCameraName(camera.name);
+            cameraItem.setAttribute('data-cameraId', camera.id);
+
+            let classNames = "list-group-item";
+            if (i == 0) {
+                classNames = classNames + " active";
+            }
+            cameraItem.className = classNames;
+
+            cameraItem.addEventListener("click", (event) => {
+                selectCamera(cameraItem);
+
+                let activeCameras = cameraList.getElementsByClassName("active");
+                for (let j = 0; j < activeCameras.length; ++j) {
+                    let newClassNames = activeCameras[j].className.replace(" active", "");
+                    activeCameras[j].className = newClassNames;
+                }
+
+                cameraItem.className = cameraItem.className + " active";
+            });
+
+            cameraList.appendChild(cameraItem);
+        }
+
+        scanner.start(cameras[0]);
+    }
+
     function errorCamera(error) { console.error(e); }
 
+    function formatCameraName(name) {
+        return name || '(unknown)';
+    }
+
+    function selectCamera(cameraItem) {
+        let cameraId = cameraItem.dataset.cameraId;
+        let camera = availableCameras[cameraId];
+        scanner.start(camera);
+    }
+
     Instascan.Camera.getCameras().then(startCamera).catch(errorCamera);
 </script>
 
@@ -92,4 +148,4 @@
         console.log(is_good);
     };
 </script>
-{% endblock %}
+{% endblock %}