Add automatic fixed-size resizing of the video and canvas elements based on the available page width

Author: Valkryst

README.md

@@ -34,14 +34,8 @@ Additionally, the [Mesh](https://github.com/Valkryst/Jellron/blob/master/js/mesh
 ### Styling
 
 You _must_ specify a fixed size for the `video` element VIA CSS. There are a number of issues in implementing dynamic
-sizing, in a way that works across many browsers, so it is currently unsupported.
-
-```css
-video {
-    height: 480px;
-    width: 640px;
-}
-```
+sizing, in a way that works across many browsers, so it is currently unsupported. See [styles.css](https://github.com/Valkryst/Jellron/blob/master/css/styles.css)
+for an example of how to implement various fixed sizes depending on the available width.
 
 ### Keypoint Rendering
 

css/styles.css

@@ -8,11 +8,6 @@ html {
             & > canvas, & > video {
                 position: absolute;
             }
-
-            & > video {
-                height: 480px;
-                width: 640px;
-            }
         }
     }
 }
@@ -29,3 +24,65 @@ table, th, td {
 #webcam-settings, #keypoint-settings {
     grid-template-columns: 1fr 1fr;
 }
+
+#jellron-display {
+    & > canvas, & > video {
+        position: absolute;
+
+        transform-origin: top left;
+        transform: scale(-1, 1) translateX(-100%);
+    }
+}
+
+@media only screen and (min-width: 320px) {
+    #jellron-display {
+        & > video {
+            height: 240px;
+            width: 320px;
+        }
+    }
+}
+
+@media only screen and (min-width: 640px) {
+    #jellron-display {
+        & > video {
+            height: 480px;
+            width: 640px;
+        }
+    }
+}
+
+@media only screen and (min-width: 800px) {
+    #jellron-display > video {
+        height: 600px;
+        width: 800px;
+    }
+}
+
+@media only screen and (min-width: 1024px) {
+    #jellron-display  > video {
+        height: 768px;
+        width: 1024px;
+    }
+}
+
+@media only screen and (min-width: 1280px) {
+    #jellron-display > video {
+        height: 960px;
+        width: 1280px;
+    }
+}
+
+@media only screen and (min-width: 1600px) {
+    #jellron-display > video {
+        height: 1200px;
+        width: 1600px;
+    }
+}
+
+@media only screen and (min-width: 1920px) {
+    #jellron-display > video {
+        height: 1440px;
+        width: 1920px;
+    }
+}

index.html

@@ -223,11 +223,13 @@
                 </fieldset>
             </form>
 
-            <video autoplay playsinline>
-                This page requires a browser that supports the <em>video</em> element.
-            </video>
+            <div id="jellron-display">
+                <video autoplay playsinline>
+                    This page requires a browser that supports the <em>video</em> element.
+                </video>
 
-            <canvas></canvas>
+                <canvas></canvas>
+            </div>
         </main>
     </body>
 

js/detector/body_detector.js

@@ -40,14 +40,20 @@ export class BodyDetector extends Detector {
         this.intervalId = setInterval(async () => {
             const currentTime = performance.now();
 
+            let frame = null;
             let rawBodies = [];
             try {
-                rawBodies = await this.detector.estimatePoses(videoElement);
+                frame = tf.browser.fromPixels(videoElement);
+                frame = tf.image.resizeBilinear(frame, [videoElement.height, videoElement.width]);
+
+                rawBodies = await this.detector.estimatePoses(frame);
             } catch (e) {
                 /*
                  * Depending on the state of the video element, this can throw a "Requested texture size [0x0] is
                  * invalid." error. It doesn't seem to cause any issues, so we ignore it.
                  */
+            } finally {
+                frame?.dispose();
             }
 
             if (rawBodies.length === 0) {