From 91609962b3b42851ed1cb09c2935b9682838236d Mon Sep 17 00:00:00 2001
From: Valkryst <github@valkryst.com>
Date: Tue, 5 Dec 2023 15:08:57 -0400
Subject: [PATCH] Update `jellron-display` children to use its size

---
 css/styles.css | 5 +++++
 index.html     | 4 ++--
 js/camera.js   | 4 ++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index ede493e..3693da9 100644
--- 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
index 6e98be1..f309811 100644
--- 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
index 29ad1c9..ed2ad31 100644
--- 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;
     }
 
     /**