camera constraints

guyettinger · Oct 25, 2023 · 4a3fdf0 · 4a3fdf0
1 parent b2c91bb
commit 4a3fdf0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/components/CoinCounter/CoinCounter.tsx b/src/components/CoinCounter/CoinCounter.tsx
@@ -41,6 +41,7 @@ const CoinCounterToolbar = styled.div`
 
 const CoinCounterVideoContent = styled.div`
   position: relative;
+  background: black;
 `
 
 const CoinCounterWebcam = styled(Webcam)`
@@ -88,21 +89,21 @@ export const CoinCounter = ({coinCounterDetectionModel, coinCounterDetectionMode
     let constraintHeight = 480
 
     if (isXs || isSm) {
-        constraintWidth = 512
-        constraintHeight = 288
+        constraintWidth = 320
+        constraintHeight = 240
     } else if (isMd || isLg) {
-        constraintWidth = 768
-        constraintWidth = 432
-    } else if (isXl || isXxl) {
-        constraintWidth = 1024
         constraintWidth = 576
+        constraintHeight = 432
+    } else if (isXl || isXxl) {
+        constraintWidth = 640
+        constraintHeight = 480
     }
 
     // video constraints based on current video input mode
     let videoConstraints: MediaTrackConstraints = {
         facingMode: FACING_MODE_USER,
-        width: constraintWidth,
-        height: constraintHeight
+        width: { max: constraintWidth},
+        height: {max: constraintHeight}
     }
 
     if (videoInputMode) {
@@ -330,10 +331,12 @@ export const CoinCounter = ({coinCounterDetectionModel, coinCounterDetectionMode
                         <CoinCounterButton variant={"small"} primary={true} onClick={handleSwitchVideoModeClick}>Switch
                             camera</CoinCounterButton>}
                 </CoinCounterToolbar>
-                <CoinCounterVideoContent>
+                <CoinCounterVideoContent style={{width:constraintWidth, height:constraintHeight}}>
                     <CoinCounterWebcam
                         ref={webcamRef}
                         muted={true}
+                        width={constraintWidth}
+                        height={constraintHeight}
                         videoConstraints={videoConstraints}
                     />
                     <CoinCounterCanvas

diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -17,6 +17,7 @@ const NavContainer = styled.div`
   justify-content: space-between;
   align-items: center;
   padding: 1rem 20px 1rem 0;
+  color: #efefef;
   background-color: #1D1E20;
 `
 
@@ -37,6 +38,10 @@ const HelpIcon = styled(MdHelp)`
   font-size: 32px;
   margin-right: 4px;
   vertical-align: text-top;
+  
+  &:hover {
+    color: white;
+  }
 `
 
 export const Navbar = () => {