fixing heights, draw function and draw line width

imrany · Oct 16, 2024 · c17bf16 · c17bf16
1 parent ed7b80e
commit c17bf16
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -16,11 +16,11 @@ export default function App(){
     })
 
     window.onresize=function(){
-        screen.width>1080?setIsSupported(false):setVideoConstraints({height:screen.height, width:screen.width, facingMode:"environment"})
+        screen.width>1080?setIsSupported(false):setVideoConstraints({height:720, width:screen.width, facingMode:"environment"})
     }
 
     useEffect(()=>{
-        screen.width>1080?setIsSupported(false):setVideoConstraints({height:screen.height, width:screen.width, facingMode:"environment"})
+        screen.width>1080?setIsSupported(false):setVideoConstraints({height:720, width:screen.width, facingMode:"environment"})
     },[screen.width])
     return(
         <>

diff --git a/src/components/utilities.ts b/src/components/utilities.ts
@@ -22,6 +22,7 @@ export const drawRect = (detections:any, ctx:any) =>{
 
                 // Set styling
                 const color = Math.floor(Math.random()*16777215).toString(16);
+                ctx.lineWidth = 20;
                 ctx.strokeStyle = '#' + color
                 ctx.font = '18px Arial';
 

diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
@@ -55,6 +55,7 @@ export default function MainPage() {
       // console.log(obj)
       // Draw mesh
       const ctx = canvasRef.current.getContext("2d");
+      //ctx.lineWidth = 3
       drawRect(obj, ctx); 
       setObject(obj)
     }
@@ -97,8 +98,7 @@ export default function MainPage() {
                                 right: 0,
                                 textAlign: "center",
                                 zIndex: 9,
-                                height:videoConstraints.height,
-                                width:videoConstraints.width
+                                width:"100vw"
                             }}
                             screenshotFormat="image/png"
                             height={videoConstraints.height}
@@ -116,9 +116,9 @@ export default function MainPage() {
                                 right: 0,
                                 textAlign: "center",
                                 zIndex: 10,
-                                height:videoConstraints.height,
-                                width:videoConstraints.width
+                                width:"100vw"
                             }}
+                            width={videoConstraints.width}
                         />
                         <div className="fixed bottom-0 left-0 right-0 z-20 h-[180px]">
                             <div className="h-fit w-full flex gap-5 flex-col items-center justify-center">