Update jellron-display to resize to fill available space, with resp…

…ect to the MediaStream's aspect ratio
Valkryst · Dec 7, 2023 · 878a945 · 878a945
1 parent 0f9b979
commit 878a945
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -22,8 +22,8 @@ table, th, td {
 #jellron-display {
     margin: 0 auto;
 
-    height: 600px;
-    width: 800px;
+    height: 800px;
+    width: 50%;
 
     & > canvas, & > video {
         position: absolute;

diff --git a/js/camera.js b/js/camera.js
@@ -121,7 +121,11 @@ export class Camera {
         }
 
         this.videoElement.srcObject = await this.getVideoInputDevice();
-        this.videoElement.height = this.jellronDisplay.scrollHeight;
+
+        const aspectRatio = await this.getMediaStreamWidth() / await this.getMediaStreamHeight();
+        this.videoElement.parentElement.style.aspectRatio = aspectRatio;
+        this.videoElement.style.aspectRatio = aspectRatio;
+
         this.videoElement.width = this.jellronDisplay.scrollWidth;
     }