Update BodyDetector and FaceDetector to initialize their internal…

… detectors as soon as they're created, so that they're "warmed up" by the time the user needs them

Update UI to represent "readyness" of `BodyDetector` and `FaceDetector` and to prevent the user from selecting a video input device until the detectors are ready

index.html

@@ -32,7 +32,15 @@
 
                         <label>
                             Select a Video Input Device:
-                            <select name="video-input-devices" id="video-input-device-select"></select>
+                            <select disabled name="video-input-devices" id="video-input-device-select"></select>
+                        </label>
+                        <label>
+                            Body Detector Ready:
+                            <span id="body-detector-ready">False</span>
+                        </label>
+                        <label>
+                            Face Detector Ready:
+                            <span id="face-detector-ready">False</span>
                         </label>
                     </fieldset>
 
@@ -275,6 +283,16 @@
             }
         }, 100);
 
+        const warmupInterval = setInterval(() => {
+            if (faceDetector.isReady() && bodyDetector.isReady()) {
+                clearInterval(warmupInterval);
+
+                document.getElementById("face-detector-ready").innerText = "True";
+                document.getElementById("body-detector-ready").innerText = "True";
+                document.getElementById("video-input-device-select").disabled = false;
+            }
+        }, 100);
+
         const deviceSelect = await Camera.createOrUpdateSelectElement(document.getElementById("video-input-device-select"));
         deviceSelect.onchange = async () => {
             try {

js/body_detector.js

@@ -66,6 +66,15 @@ export class BodyDetector {
         }
     }
 
+    /**
+     * Determines whether the detector is ready to be used.
+     *
+     * @returns {boolean} Whether the detector is ready to be used.
+     */
+    isReady() {
+        return this.detector != null;
+    }
+
     /**
      * Retrieves the most recent runtime of the detector, in milliseconds.
      *

js/face_detector.js

@@ -66,6 +66,15 @@ export class FaceDetector {
         }
     }
 
+    /**
+     * Determines whether the detector is ready to be used.
+     *
+     * @returns {boolean} Whether the detector is ready to be used.
+     */
+    isReady() {
+        return this.detector != null;
+    }
+
     /**
      * Retrieves the most recent runtime of the detector, in milliseconds.
      *