Update jellron-display children to use its size

Valkryst · Dec 5, 2023 · 9160996 · 9160996
1 parent 645184c
commit 9160996
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -20,6 +20,11 @@ table, th, td {
 }
 
 #jellron-display {
+    margin: 0 auto;
+
+    height: 600px;
+    width: 800px;
+
     & > canvas, & > video {
         position: absolute;
     }

diff --git a/index.html b/index.html
@@ -168,8 +168,8 @@
                 const camera = await new Camera(deviceSelect.value);
 
                 const videoElement = await camera.getVideoElement();
-                keypointRenderer.setSize(videoElement.width, videoElement.height);
-                videoRenderer.setSize(videoElement.width, videoElement.height);
+                keypointRenderer.setSize(videoElement.parentElement.scrollWidth, videoElement.parentElement.scrollHeight);
+                videoRenderer.setSize(videoElement.parentElement.scrollWidth, videoElement.parentElement.scrollHeight);
 
                 if (!bodyDetector.isRunning()) {
                     bodyDetector.start();

diff --git a/js/camera.js b/js/camera.js
@@ -125,8 +125,8 @@ export class Camera {
          * Both FaceDetector and HandDetector use the video element's height and width properties to scale the input
          * MediaStream before processing it. This is why we need to set them.
          */
-        this.videoElement.height = await this.getMediaStreamHeight();
-        this.videoElement.width = await this.getMediaStreamWidth();
+        this.videoElement.height = this.videoElement.parentElement.scrollHeight;
+        this.videoElement.width = this.videoElement.parentElement.scrollWidth;
     }
 
     /**