Fix camera UI issue - always render video element

🐛 Root Cause Fixed:
- Video element was conditionally rendered based on isStreaming
- When user clicks 'Start Camera', video element doesn't exist yet
- This makes videoRef.current null, causing 'Video element not available' error

✅ Solution:
- Always render video element in DOM
- Show placeholder when not streaming
- Show scan guide overlay only when streaming
- Video ref is now always available for camera initialization

This fixes the core issue where camera works but UI doesn't show!

src/components/CameraScanner.tsx

@@ -239,18 +239,19 @@ const CameraScanner: React.FC<CameraScannerProps> = ({ onCardScanned, onError })
         )}
       </div>
 
-      {/* Camera Preview */}
+      {/* Camera Preview - Always render video element */}
-      {(isStreaming || streamRef.current) && (
+      <div className="relative bg-black rounded-lg overflow-hidden mb-4">
-        <div className="relative bg-black rounded-lg overflow-hidden mb-4">
+        <video
-          <video
+          ref={videoRef}
-            ref={videoRef}
+          autoPlay
-            autoPlay
+          playsInline
-            playsInline
+          muted
-            muted
+          className="w-full h-auto max-h-96 object-cover"
-            className="w-full h-auto max-h-96 object-cover"
+          style={{ minHeight: isStreaming ? 'auto' : '200px' }}
-          />
+        />
         
-          {/* Scan Guide Overlay */}
+        {/* Show overlay only when streaming */}
+        {isStreaming && (
           <div className="absolute inset-0 pointer-events-none">
             <div className="absolute inset-4 border-2 border-white border-dashed rounded-lg flex items-center justify-center">
               <div className="bg-black bg-opacity-50 text-white px-4 py-2 rounded-lg text-sm text-center">
@@ -259,24 +260,19 @@ const CameraScanner: React.FC<CameraScannerProps> = ({ onCardScanned, onError })
               </div>
             </div>
           </div>
-        </div>
+        )}
-      )}
         
-      {/* Fallback: Always show video element for debugging */}
+        {/* Show placeholder when not streaming */}
-      {!isStreaming && streamRef.current && (
+        {!isStreaming && (
-        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
+          <div className="absolute inset-0 flex items-center justify-center">
-          <div className="text-yellow-800 font-medium mb-2">🔍 Debug: Stream exists but not marked as streaming</div>
+            <div className="text-white text-center">
-          <div className="relative bg-black rounded-lg overflow-hidden">
+              <div className="text-4xl mb-2">📹</div>
-            <video
+              <div className="font-medium">Camera Preview</div>
-              ref={videoRef}
+              <div className="text-sm opacity-75">Click "Start Camera" to begin</div>
-              autoPlay
+            </div>
-              playsInline
-              muted
-              className="w-full h-auto max-h-96 object-cover"
-            />
           </div>
-        </div>
+        )}
-      )}
+      </div>
 
       {/* Hidden canvas for image capture */}
       <canvas ref={canvasRef} className="hidden" />