Force webcam to be full height

LinuzJ · Nov 12, 2023 · e3412f2 · e3412f2
1 parent fbe282d
commit e3412f2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/dance-app/src/Recording.css b/dance-app/src/Recording.css
@@ -66,11 +66,19 @@
   align-items: center;
   justify-content: center;
   height: 100dvh;
+  width: calc(1.778 * 100dvh);
 }
+
 video {
-  margin: auto;;
+  max-width: 600px;
+  margin: auto;
+}
+
+.video-container > video {
   width: 100%;
-  max-width: 700px;
+  transform: translateX(calc((100dvw - 1.778 * 100dvh) / 2));
+  max-width: 60000px;
+  margin: none;
 }
 
 .countdown:before {

diff --git a/dance-app/src/sections/recording.tsx b/dance-app/src/sections/recording.tsx
@@ -47,9 +47,9 @@ const RecordingPage = ({
   const classes = useStyles(theme);
 
   const constraints: { aspectRatio: number; height: number; width: number } = {
-    aspectRatio: 2.33,
-    height: 200,
-    width: 100,
+    aspectRatio: 3,
+    height: 720,
+    width: 1280,
   };
   const {
     applyConstraints,