fixing video cam different width values

imrany · Oct 15, 2024 · d06e941 · d06e941
1 parent f5d4212
commit d06e941
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 21 deletions.
diff --git a/src/App.css b/src/App.css
@@ -15,7 +15,7 @@
 
 .App-header {
   background-color: #252525;
-  min-height: 100vh;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/src/App.tsx b/src/App.tsx
@@ -8,17 +8,17 @@ import { GlobalContext } from "./context";
 export default function App(){
     const API_URL=`http://127.0.0.1:5000`
     const [videoConstraints, setVideoConstraints]=useState<any>({
-        /*width: 1280,*/
+        width: screen.width-400,
         height: 720,
         facingMode: "user"
     })
 
     window.onresize=function(){
-        screen.width>1080?"":setVideoConstraints({height:720, facingMode:"environment"})
+        screen.width>1080?"":setVideoConstraints({height:screen.height, width:screen.width, facingMode:"environment"})
     }
 
     useEffect(()=>{
-        screen.width>1080?"":setVideoConstraints({height:720, facingMode:"environment"})
+        screen.width>1080?"":setVideoConstraints({height:screen.height, width:screen.width, facingMode:"environment"})
     },[screen.width])
     return(
         <BrowserRouter>

diff --git a/src/context/index.ts b/src/context/index.ts
@@ -3,16 +3,16 @@ import { createContext } from 'react'
 type ContextType={
     videoConstraints:{
         height?:number,
-        weigth?:number,
+        width?:number,
         facingMode:string
     },
     API_URL:string
 }
 
 export const GlobalContext=createContext<ContextType>({
     videoConstraints:{
-        /*width: 1280,*/
-        height: 720,
+        width: screen.width-400,
+        height: screen.height,
         facingMode: "user"
     },
     API_URL:""

diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
@@ -34,7 +34,7 @@ export default function MainPage() {
       webcamRef.current.video.readyState === 4
     ) {
       // Get Video Properties
-        const video:any = webcamRef.current.video;
+      const video:any = webcamRef.current.video;
       const videoWidth = webcamRef.current.video.videoWidth;
       const videoHeight = webcamRef.current.video.videoHeight;
 
@@ -60,12 +60,12 @@ export default function MainPage() {
   },[]);
 
   return (
-      <>
-          {isLoading&&isLoading?(
-              <div style={{display:"flex",justifyContent:"center", background:"#252525", alignItems:"center", height:"100vh"}}>
-                <p style={{fontSize:14, color:"white"}}>Loading, please wait...</p>
-              </div>
-          ):(
+        <>
+            {isLoading&&isLoading?(
+                <div style={{display:"flex",justifyContent:"center", background:"#252525", alignItems:"center", height:"100vh"}}>
+                    <p style={{fontSize:14, color:"white", textAlign:"center"}}>Loading, please wait...</p>
+                </div>
+            ):(
                 <div className="App">
                     <header className="App-header">
                         <Webcam
@@ -78,11 +78,10 @@ export default function MainPage() {
                                 left: 0,
                                 right: 0,
                                 textAlign: "center",
-                                zIndex: 9,
-                                width: "100vw",
-                                height: "100vh",
+                                zIndex: 9
                             }}
-                            height={720}
+                            height={videoConstraints.height}
+                            width={videoConstraints.width}
                             videoConstraints={videoConstraints}
                         />
 
@@ -95,10 +94,10 @@ export default function MainPage() {
                                 left: 0,
                                 right: 0,
                                 textAlign: "center",
-                                zIndex: 10,
-                                width: "100vw",
-                                height: "100vh",
+                                zIndex: 10
                             }}
+                            height={videoConstraints.height}
+                            width={videoConstraints.width}
                         />
                     </header>
                 </div>