Improve camera function to reliably capture photo with valid dimensions

Adds a dimension check with a timeout to `useCamera.tsx` to ensure the video stream is ready before capturing.

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/05f4db99-14a1-408b-902a-26488120fee2.jpg

client/src/hooks/useCamera.tsx

@@ -99,7 +99,7 @@ export function useCamera() {
   }, []);
 
   const capturePhoto = useCallback((): Promise<string> => {
-    return new Promise((resolve, reject) => {
+    return new Promise(async (resolve, reject) => {
       if (!videoRef.current || !canvasRef.current) {
         reject(new Error('Video or canvas not available'));
         return;
@@ -117,19 +117,44 @@ export function useCamera() {
         return;
       }
 
-      // Vérifier que la vidéo a des dimensions valides
+      console.log('Starting photo capture, current dimensions:', video.videoWidth, 'x', video.videoHeight);
-      if (video.videoWidth === 0 || video.videoHeight === 0) {
+
-        console.error('Video dimensions:', video.videoWidth, 'x', video.videoHeight);
+      // Attendre que la vidéo ait des dimensions valides
-        setIsCapturing(false);
+      let attempts = 0;
-        reject(new Error('Video not ready - no dimensions'));
+      const maxAttempts = 50; // 5 secondes max
-        return;
+      
+      const waitForDimensions = () => {
+        return new Promise<void>((resolveWait) => {
+          const checkDimensions = () => {
+            attempts++;
+            console.log(`Checking video dimensions, attempt ${attempts}: ${video.videoWidth}x${video.videoHeight}`);
+            
+            if (video.videoWidth > 0 && video.videoHeight > 0) {
+              console.log('Video dimensions are valid:', video.videoWidth, 'x', video.videoHeight);
+              resolveWait();
+            } else if (attempts >= maxAttempts) {
+              setIsCapturing(false);
+              reject(new Error('Timeout: video dimensions not available after 5 seconds'));
+            } else {
+              setTimeout(checkDimensions, 100);
+            }
+          };
+          checkDimensions();
+        });
+      };
+
+      try {
+        await waitForDimensions();
+      } catch (error) {
+        return; // Error already handled in waitForDimensions
       }
       
-      console.log('Video dimensions:', video.videoWidth, 'x', video.videoHeight);
+      console.log('Proceeding with capture, video dimensions:', video.videoWidth, 'x', video.videoHeight);
 
-      // Définir les dimensions du canvas
+      // Définir les dimensions du canvas en s'assurant qu'elles sont valides
       canvas.width = video.videoWidth;
       canvas.height = video.videoHeight;
+      console.log('Canvas dimensions set to:', canvas.width, 'x', canvas.height);
       
       // Dessiner l'image de la vidéo sur le canvas
       try {