Update jellron-display to automatically calculate the correct `widt…

…h` with respect to the webcam's aspect ratio
Valkryst · Dec 5, 2023 · 1637db1 · 1637db1
1 parent d30e048
commit 1637db1
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/css/styles.css b/css/styles.css
@@ -23,7 +23,6 @@ table, th, td {
     margin: 0 auto;
 
     height: 600px;
-    width: 800px;
 
     & > canvas, & > video {
         position: absolute;

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