From ed38c25c9fde3701977dd9fa8bec5190480025a1 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Fri, 11 Jul 2025 17:51:04 +0000
Subject: [PATCH] Improve camera functionality and address issues with blank
 image display

Enhances CameraModal and useCamera hook with autoplay, error handling, and metadata checks to resolve blank image issues.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: dec54137-d5a2-4406-8ad4-5f2f9fb110bf
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/957e99ed-c3d1-4917-a66f-70911fc0ed4b.jpg
---
 client/src/components/CameraModal.tsx |  9 ++++-
 client/src/hooks/useCamera.tsx        | 55 +++++++++++++++++++++++----
 2 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/client/src/components/CameraModal.tsx b/client/src/components/CameraModal.tsx
index 87075ca..886f514 100644
--- a/client/src/components/CameraModal.tsx
+++ b/client/src/components/CameraModal.tsx
@@ -70,12 +70,17 @@ export default function CameraModal({
               autoPlay
               playsInline
               muted
-              className="w-full max-w-full h-auto camera-preview rounded-lg border"
+              className="w-full max-w-full h-auto camera-preview rounded-lg border bg-black"
               style={{ 
                 aspectRatio: '16/9',
                 objectFit: 'cover',
-                maxHeight: '400px'
+                maxHeight: '400px',
+                minHeight: '200px'
               }}
+              onLoadedMetadata={() => console.log('CameraModal: Video metadata loaded')}
+              onCanPlay={() => console.log('CameraModal: Video can play')}
+              onPlay={() => console.log('CameraModal: Video playing')}
+              onError={(e) => console.error('CameraModal: Video error:', e)}
             />
             <canvas ref={canvasRef} className="hidden" />
             
diff --git a/client/src/hooks/useCamera.tsx b/client/src/hooks/useCamera.tsx
index 1169416..6d9e7b7 100644
--- a/client/src/hooks/useCamera.tsx
+++ b/client/src/hooks/useCamera.tsx
@@ -55,36 +55,75 @@ export function useCamera() {
       setIsOpen(true);
       
       if (videoRef.current) {
-        videoRef.current.srcObject = stream;
+        const video = videoRef.current;
+        video.srcObject = stream;
         console.log('Video stream attached to video element');
         
+        // Forcer le démarrage de la vidéo
+        video.autoplay = true;
+        video.playsInline = true;
+        video.muted = true;
+        
+        // Forcer le play immédiatement
+        try {
+          await video.play();
+          console.log('Video play() successful');
+        } catch (playError) {
+          console.warn('Video play() failed:', playError);
+        }
+        
         // Attendre que la vidéo soit prête
         return new Promise<boolean>((resolve, reject) => {
-          const video = videoRef.current!;
-          
           const handleLoadedMetadata = () => {
-            console.log('Video metadata loaded, dimensions:', video.videoWidth, 'x', video.videoHeight);
+            console.log('Video metadata loaded successfully');
+            console.log('Video dimensions:', video.videoWidth, 'x', video.videoHeight);
+            console.log('Video readyState:', video.readyState);
+            console.log('Video paused:', video.paused);
+            console.log('Video ended:', video.ended);
             video.removeEventListener('loadedmetadata', handleLoadedMetadata);
             video.removeEventListener('error', handleError);
+            video.removeEventListener('canplay', handleCanPlay);
             resolve(true);
           };
           
+          const handleCanPlay = () => {
+            console.log('Video can play event fired');
+            if (video.videoWidth > 0 && video.videoHeight > 0) {
+              handleLoadedMetadata();
+            }
+          };
+          
           const handleError = (error: Event) => {
-            console.error('Video error:', error);
+            console.error('Video error event:', error);
             video.removeEventListener('loadedmetadata', handleLoadedMetadata);
             video.removeEventListener('error', handleError);
+            video.removeEventListener('canplay', handleCanPlay);
             reject(new Error('Erreur lors du chargement de la vidéo'));
           };
           
           video.addEventListener('loadedmetadata', handleLoadedMetadata);
+          video.addEventListener('canplay', handleCanPlay);
           video.addEventListener('error', handleError);
           
-          // Timeout de sécurité
+          // Si les métadonnées sont déjà chargées
+          if (video.readyState >= 1 && video.videoWidth > 0) {
+            console.log('Video metadata already available');
+            handleLoadedMetadata();
+          }
+          
+          // Timeout de sécurité réduit
           setTimeout(() => {
             video.removeEventListener('loadedmetadata', handleLoadedMetadata);
             video.removeEventListener('error', handleError);
-            resolve(true); // Continuer même si metadata pas encore chargé
-          }, 5000);
+            video.removeEventListener('canplay', handleCanPlay);
+            console.log('Video load timeout, current state:', {
+              readyState: video.readyState,
+              videoWidth: video.videoWidth,
+              videoHeight: video.videoHeight,
+              paused: video.paused
+            });
+            resolve(true);
+          }, 3000);
         });
       }