Fix camera UI visibility issue with enhanced debugging

src/components/CameraScanner.tsx

@@ -18,6 +18,7 @@ const CameraScanner: React.FC<CameraScannerProps> = ({ onCardScanned, onError })
   const [isProcessing, setIsProcessing] = useState(false);
   const [scanResult, setScanResult] = useState<ScanResult | null>(null);
   const [capturedImage, setCapturedImage] = useState<string | null>(null);
+  const [debugInfo, setDebugInfo] = useState<string>('Camera not started');
   
   const videoRef = useRef<HTMLVideoElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -25,6 +26,8 @@ const CameraScanner: React.FC<CameraScannerProps> = ({ onCardScanned, onError })
 
   // Start camera stream
   const startCamera = async () => {
+    setDebugInfo('🔄 Requesting camera access...');
+    
     try {
       const stream = await navigator.mediaDevices.getUserMedia({
         video: {
@@ -34,14 +37,36 @@ const CameraScanner: React.FC<CameraScannerProps> = ({ onCardScanned, onError })
         }
       });
 
+      setDebugInfo('✅ Camera stream obtained');
+
       if (videoRef.current) {
         videoRef.current.srcObject = stream;
         streamRef.current = stream;
+        
+        // Wait for video to be ready
+        videoRef.current.onloadedmetadata = () => {
+          setDebugInfo('🎥 Video metadata loaded, starting playback...');
+          videoRef.current?.play().then(() => {
             setIsStreaming(true);
+            setDebugInfo('✅ Camera streaming successfully');
+          }).catch((err) => {
+            setDebugInfo(`❌ Video play failed: ${err.message}`);
+            onError(`Video playback failed: ${err.message}`);
+          });
+        };
+        
+        videoRef.current.onerror = (err) => {
+          setDebugInfo(`❌ Video error: ${err}`);
+          onError('Video element error occurred');
+        };
+      } else {
+        setDebugInfo('❌ Video ref is null');
+        onError('Video element not available');
       }
-    } catch (err) {
+    } catch (err: any) {
       console.error('Camera access error:', err);
-      onError('Unable to access camera. Please check permissions.');
+      setDebugInfo(`❌ Camera error: ${err.message}`);
+      onError(`Unable to access camera: ${err.message}`);
     }
   };
 
@@ -54,6 +79,7 @@ const CameraScanner: React.FC<CameraScannerProps> = ({ onCardScanned, onError })
     setIsStreaming(false);
     setCapturedImage(null);
     setScanResult(null);
+    setDebugInfo('Camera stopped');
   };
 
   // Capture image from video stream
@@ -214,7 +240,7 @@ const CameraScanner: React.FC<CameraScannerProps> = ({ onCardScanned, onError })
       </div>
 
       {/* Camera Preview */}
-      {isStreaming && (
+      {(isStreaming || streamRef.current) && (
         <div className="relative bg-black rounded-lg overflow-hidden mb-4">
           <video
             ref={videoRef}
@@ -236,6 +262,22 @@ const CameraScanner: React.FC<CameraScannerProps> = ({ onCardScanned, onError })
         </div>
       )}
 
+      {/* Fallback: Always show video element for debugging */}
+      {!isStreaming && streamRef.current && (
+        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
+          <div className="text-yellow-800 font-medium mb-2">🔍 Debug: Stream exists but not marked as streaming</div>
+          <div className="relative bg-black rounded-lg overflow-hidden">
+            <video
+              ref={videoRef}
+              autoPlay
+              playsInline
+              muted
+              className="w-full h-auto max-h-96 object-cover"
+            />
+          </div>
+        </div>
+      )}
+
       {/* Hidden canvas for image capture */}
       <canvas ref={canvasRef} className="hidden" />
 
@@ -312,6 +354,20 @@ const CameraScanner: React.FC<CameraScannerProps> = ({ onCardScanned, onError })
           <li>• Works best with English cards</li>
         </ul>
       </div>
+
+      {/* Debug Info */}
+      <div className="bg-gray-100 rounded-lg p-3 mt-4 text-xs text-gray-800">
+        <div className="font-medium">Camera Status:</div>
+        <p>{debugInfo}</p>
+        <div className="mt-2 space-y-1">
+          <div>isStreaming: {isStreaming ? '✅ true' : '❌ false'}</div>
+          <div>videoRef.current: {videoRef.current ? '✅ exists' : '❌ null'}</div>
+          <div>streamRef.current: {streamRef.current ? '✅ exists' : '❌ null'}</div>
+          {videoRef.current && (
+            <div>Video ready state: {videoRef.current.readyState}</div>
+          )}
+        </div>
+      </div>
     </div>
   );
 };