From d06e9419e1aeccfd66f5928a97a671079e6157e3 Mon Sep 17 00:00:00 2001
From: imrany <imranmat254@gmail.com>
Date: Tue, 15 Oct 2024 18:17:25 +0300
Subject: [PATCH] fixing video cam different width values

---
 src/App.css            |  2 +-
 src/App.tsx            |  6 +++---
 src/context/index.ts   |  6 +++---
 src/pages/MainPage.tsx | 27 +++++++++++++--------------
 4 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/App.css b/src/App.css
index a166c00..229a35a 100644
--- 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
index a31765b..f6ef89a 100644
--- 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
index 004850e..68c6417 100644
--- a/src/context/index.ts
+++ b/src/context/index.ts
@@ -3,7 +3,7 @@ import { createContext } from 'react'
 type ContextType={
     videoConstraints:{
         height?:number,
-        weigth?:number,
+        width?:number,
         facingMode:string
     },
     API_URL:string
@@ -11,8 +11,8 @@ type ContextType={
 
 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
index 5cf3c8f..2160c76 100644
--- 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>