mobile ratio

components/CameraSetup.js

@@ -16,6 +16,20 @@ const CameraSetup = ({
   // Track if camera is currently being set up
   const isSettingUpCamera = useRef(false);
 
+  const updateDimensions = () => {
+    if (!videoRef.current || !isMounted.current) return;
+    
+    const videoWidth = videoRef.current.videoWidth;
+    const videoHeight = videoRef.current.videoHeight;
+    
+    // Only update if we have valid dimensions
+    if (videoWidth && videoHeight) {
+      const aspectRatio = videoWidth / videoHeight;
+      setVideoAspectRatio(aspectRatio);
+      updateCanvasSize(aspectRatio);
+    }
+  };
+
   // Set up the webcam
   useEffect(() => {
     // Set mounted flag
@@ -35,17 +49,24 @@ const CameraSetup = ({
           tracks.forEach(track => track.stop());
         }
         
-        // Get camera stream
-        const stream = await navigator.mediaDevices.getUserMedia({
-          video: { 
+        // Get camera constraints based on device
+        const constraints = {
+          video: {
             facingMode: facingMode,
-            width: { ideal: 1920 },
-            height: { ideal: 1080 }
+            // For mobile, prioritize height to prevent letterboxing
+            ...(isMobile ? {
+              height: { ideal: 1080, min: 720 },
+              width: { ideal: 1920, min: 1280 }
+            } : {
+              width: { ideal: 1920 },
+              height: { ideal: 1080 }
+            })
           },
           audio: false
-        });
+        };
+        
+        const stream = await navigator.mediaDevices.getUserMedia(constraints);
         
-        // Check if component is still mounted before continuing
         if (!isMounted.current) {
           stream.getTracks().forEach(track => track.stop());
           return;
@@ -53,30 +74,20 @@ const CameraSetup = ({
         
         videoRef.current.srcObject = stream;
         
-        // Use a try-catch block for the play() call
+        // Add loadeddata event listener for more reliable dimension detection
+        videoRef.current.addEventListener('loadeddata', updateDimensions);
+        
         try {
           await videoRef.current.play();
+          // Double check dimensions after a short delay to ensure they're correct
+          setTimeout(updateDimensions, 100);
         } catch (playError) {
           console.log("Play interrupted, this is normal if component remounted:", playError);
-          // Don't treat play interruptions as fatal errors
           if (playError.name !== "AbortError") {
             throw playError;
           }
         }
         
-        // Get the actual video dimensions once metadata is loaded
-        videoRef.current.onloadedmetadata = () => {
-          if (!isMounted.current) return;
-          
-          const videoWidth = videoRef.current.videoWidth;
-          const videoHeight = videoRef.current.videoHeight;
-          const aspectRatio = videoWidth / videoHeight;
-          setVideoAspectRatio(aspectRatio);
-          
-          // Update canvas size with the correct aspect ratio
-          updateCanvasSize(aspectRatio);
-        };
-        
         if (isMounted.current) {
           setCameraError(false);
           console.log("Camera set up successfully");
@@ -98,12 +109,15 @@ const CameraSetup = ({
       // Set mounted flag to false to prevent state updates after unmount
       isMounted.current = false;
       
-      if (videoRef.current && videoRef.current.srcObject) {
-        const tracks = videoRef.current.srcObject.getTracks();
-        tracks.forEach(track => track.stop());
+      if (videoRef.current) {
+        videoRef.current.removeEventListener('loadeddata', updateDimensions);
+        if (videoRef.current.srcObject) {
+          const tracks = videoRef.current.srcObject.getTracks();
+          tracks.forEach(track => track.stop());
+        }
       }
     };
-  }, [videoRef, canvasRef, containerRef, facingMode, setCameraError, setVideoAspectRatio, updateCanvasSize]);
+  }, [videoRef, canvasRef, containerRef, facingMode]);
 
   // Function to switch camera
   const switchCamera = async () => {

components/MainContent.js

@@ -63,10 +63,7 @@ const MainContent = ({
         <canvas 
           ref={canvasRef} 
           className="rounded-lg shadow-lg w-full"
-          style={{ 
-            height: `${canvasHeight}px`,
-            ...(isMobile && { margin: '0 auto', display: 'block' })
-          }}
+          style={{ height: `${canvasHeight}px` }}
           width={canvasWidth}
           height={canvasHeight}
         />

hooks/useDeviceAndCanvas.js

@@ -43,14 +43,32 @@ const useDeviceAndCanvas = () => {
     if (!isComponentMounted.current) return;
     
     const containerWidth = document.querySelector('.canvas-container')?.clientWidth || window.innerWidth;
-    // Set maximum width for the canvas - increased for desktop
+    const windowHeight = window.innerHeight;
+    
+    // Set maximum dimensions for the canvas
     const maxWidth = Math.min(containerWidth, isMobile ? 640 : 960);
-    // Apply 0.8 scale factor for mobile devices only
-    const scaledWidth = isMobile ? maxWidth * 0.8 : maxWidth;
-    const height = scaledWidth / aspectRatio;
+    // For mobile, limit height to 70% of viewport height to prevent excessive scrolling
+    const maxHeight = isMobile ? windowHeight * 0.7 : windowHeight * 0.8;
+    
+    // Calculate dimensions maintaining aspect ratio within constraints
+    let width = maxWidth;
+    let height = width / aspectRatio;
+    
+    // If height exceeds max height, recalculate width to maintain aspect ratio
+    if (height > maxHeight) {
+      height = maxHeight;
+      width = height * aspectRatio;
+    }
+    
+    // Ensure width doesn't exceed container
+    if (width > containerWidth) {
+      width = containerWidth;
+      height = width / aspectRatio;
+    }
     
-    setCanvasWidth(scaledWidth);
-    setCanvasHeight(height);
+    // Round dimensions to prevent subpixel rendering issues
+    setCanvasWidth(Math.round(width));
+    setCanvasHeight(Math.round(height));
   }, [isMobile]);
   
   return {