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,8 +239,7 @@ const CameraScanner: React.FC<CameraScannerProps> = ({ onCardScanned, onError })
         )}
       </div>
 
-      {/* Camera Preview */}
-      {(isStreaming || streamRef.current) && (
+      {/* Camera Preview - Always render video element */}
       <div className="relative bg-black rounded-lg overflow-hidden mb-4">
         <video
           ref={videoRef}
@@ -248,9 +247,11 @@ const CameraScanner: React.FC<CameraScannerProps> = ({ onCardScanned, onError })
           playsInline
           muted
           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 */}
-      {!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"
-            />
+        {/* Show placeholder when not streaming */}
+        {!isStreaming && (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="text-white text-center">
+              <div className="text-4xl mb-2">📹</div>
+              <div className="font-medium">Camera Preview</div>
+              <div className="text-sm opacity-75">Click "Start Camera" to begin</div>
             </div>
           </div>
         )}
+      </div>
 
       {/* Hidden canvas for image capture */}
       <canvas ref={canvasRef} className="hidden" />