From fbbe1375ab8595f082bb02a5525de2f64b92e409 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Fri, 11 Jul 2025 16:55:20 +0000
Subject: [PATCH] Improve photo capture reliability and address camera access
 issues

Adds enhanced camera setup, error handling, and canvas drawing in `useCamera.tsx`, `CameraModal.tsx`, and `NewSaleForm.tsx`.

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/e6a2493b-9ed8-4bd8-be32-29049cc60fa3.jpg
---
 client/src/components/CameraModal.tsx |  35 ++++++++-
 client/src/components/NewSaleForm.tsx |   4 +
 client/src/hooks/useCamera.tsx        | 106 ++++++++++++++++++++------
 3 files changed, 119 insertions(+), 26 deletions(-)

diff --git a/client/src/components/CameraModal.tsx b/client/src/components/CameraModal.tsx
index 066874d..87075ca 100644
--- a/client/src/components/CameraModal.tsx
+++ b/client/src/components/CameraModal.tsx
@@ -26,7 +26,31 @@ export default function CameraModal({
   useEffect(() => {
     if (isOpen && videoRef.current) {
       // Ensure video starts playing when modal opens
-      videoRef.current.play().catch(console.error);
+      const video = videoRef.current;
+      
+      const handleLoadedMetadata = () => {
+        console.log('Video loaded metadata:', video.videoWidth, 'x', video.videoHeight);
+      };
+      
+      const handleCanPlay = () => {
+        console.log('Video can play');
+      };
+      
+      const handleError = (error: Event) => {
+        console.error('Video error:', error);
+      };
+      
+      video.addEventListener('loadedmetadata', handleLoadedMetadata);
+      video.addEventListener('canplay', handleCanPlay);
+      video.addEventListener('error', handleError);
+      
+      video.play().catch(console.error);
+      
+      return () => {
+        video.removeEventListener('loadedmetadata', handleLoadedMetadata);
+        video.removeEventListener('canplay', handleCanPlay);
+        video.removeEventListener('error', handleError);
+      };
     }
   }, [isOpen, videoRef]);
 
@@ -57,10 +81,13 @@ export default function CameraModal({
             
             {/* Overlay pour aider à cadrer la pièce d'identité */}
             <div className="absolute inset-0 pointer-events-none">
-              <div className="absolute inset-4 border-2 border-white border-dashed rounded-lg opacity-50"></div>
-              <div className="absolute bottom-2 left-2 text-white text-sm bg-black bg-opacity-50 px-2 py-1 rounded">
+              <div className="absolute inset-4 border-2 border-white border-dashed rounded-lg opacity-70"></div>
+              <div className="absolute bottom-2 left-2 text-white text-sm bg-black bg-opacity-70 px-2 py-1 rounded">
                 Cadrez la pièce d'identité dans le rectangle
               </div>
+              <div className="absolute top-2 right-2 text-white text-xs bg-black bg-opacity-70 px-2 py-1 rounded">
+                {photoType === 'recto' ? 'RECTO' : 'VERSO'}
+              </div>
             </div>
           </div>
           
@@ -72,7 +99,7 @@ export default function CameraModal({
             <Button 
               onClick={onCapture} 
               disabled={isCapturing}
-              className="bg-primary hover:bg-primary/90 flex-1"
+              className="bg-green-600 hover:bg-green-700 text-white flex-1"
             >
               <Camera className="h-4 w-4 mr-2" />
               {isCapturing ? 'Capture...' : 'Prendre la photo'}
diff --git a/client/src/components/NewSaleForm.tsx b/client/src/components/NewSaleForm.tsx
index fb517d9..3e96abb 100644
--- a/client/src/components/NewSaleForm.tsx
+++ b/client/src/components/NewSaleForm.tsx
@@ -205,7 +205,10 @@ export default function NewSaleForm() {
     if (!currentPhotoType) return;
     
     try {
+      console.log('Attempting to capture photo...');
       const photoData = await capturePhoto();
+      console.log('Photo captured successfully, data length:', photoData.length);
+      
       form.setValue(currentPhotoType === 'recto' ? 'photoRecto' : 'photoVerso', photoData);
       
       toast({
@@ -216,6 +219,7 @@ export default function NewSaleForm() {
       
       stopCamera();
     } catch (error) {
+      console.error('Photo capture error:', error);
       toast({
         title: "Erreur de capture",
         description: error instanceof Error ? error.message : "Erreur lors de la capture",
diff --git a/client/src/hooks/useCamera.tsx b/client/src/hooks/useCamera.tsx
index fe824ac..f14bd96 100644
--- a/client/src/hooks/useCamera.tsx
+++ b/client/src/hooks/useCamera.tsx
@@ -12,6 +12,15 @@ export function useCamera() {
 
   const startCamera = useCallback(async (photoType: PhotoType) => {
     try {
+      // Vérification des permissions avant d'essayer
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const videoDevices = devices.filter(device => device.kind === 'videoinput');
+      console.log('Available video devices:', videoDevices.length);
+      
+      if (videoDevices.length === 0) {
+        throw new Error('Aucune caméra détectée sur cet appareil');
+      }
+
       // Configuration avancée pour tablettes et appareils mobiles
       const constraints = {
         video: {
@@ -28,6 +37,7 @@ export function useCamera() {
       try {
         // Essai avec caméra arrière
         stream = await navigator.mediaDevices.getUserMedia(constraints);
+        console.log('Back camera started successfully');
       } catch (backCameraError) {
         console.warn('Caméra arrière non disponible, essai avec caméra avant:', backCameraError);
         
@@ -44,6 +54,7 @@ export function useCamera() {
         
         try {
           stream = await navigator.mediaDevices.getUserMedia(frontConstraints);
+          console.log('Front camera started successfully');
         } catch (frontCameraError) {
           console.warn('Caméra avant non disponible, essai basique:', frontCameraError);
           
@@ -51,6 +62,7 @@ export function useCamera() {
           stream = await navigator.mediaDevices.getUserMedia({
             video: true
           });
+          console.log('Basic camera started successfully');
         }
       }
       
@@ -60,6 +72,14 @@ export function useCamera() {
       
       if (videoRef.current) {
         videoRef.current.srcObject = stream;
+        
+        // Attendre que la vidéo soit prête
+        await new Promise<void>((resolve) => {
+          videoRef.current!.onloadedmetadata = () => {
+            console.log('Video metadata loaded');
+            resolve();
+          };
+        });
       }
       
       return true;
@@ -83,36 +103,78 @@ export function useCamera() {
       const context = canvas.getContext('2d');
       
       if (!context) {
+        setIsCapturing(false);
         reject(new Error('Canvas context not available'));
         return;
       }
 
+      // Vérifier que la vidéo a des dimensions valides
+      if (video.videoWidth === 0 || video.videoHeight === 0) {
+        console.error('Video dimensions:', video.videoWidth, 'x', video.videoHeight);
+        setIsCapturing(false);
+        reject(new Error('Video not ready - no dimensions'));
+        return;
+      }
+      
+      console.log('Video dimensions:', video.videoWidth, 'x', video.videoHeight);
+
+      // Définir les dimensions du canvas
       canvas.width = video.videoWidth;
       canvas.height = video.videoHeight;
       
-      context.drawImage(video, 0, 0);
+      // Dessiner l'image de la vidéo sur le canvas
+      try {
+        // Effacer le canvas avant de dessiner
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.drawImage(video, 0, 0, canvas.width, canvas.height);
+        console.log('Image drawn on canvas successfully');
+      } catch (error) {
+        console.error('Failed to draw image on canvas:', error);
+        setIsCapturing(false);
+        reject(new Error('Failed to draw image on canvas'));
+        return;
+      }
       
-      canvas.toBlob(
-        (blob) => {
-          if (!blob) {
-            reject(new Error('Failed to create image blob'));
-            return;
-          }
-          
-          const reader = new FileReader();
-          reader.onload = (e) => {
-            setIsCapturing(false);
-            resolve(e.target?.result as string);
-          };
-          reader.onerror = () => {
-            setIsCapturing(false);
-            reject(new Error('Failed to read image'));
-          };
-          reader.readAsDataURL(blob);
-        },
-        'image/jpeg',
-        0.8
-      );
+      // Méthode alternative plus robuste - utiliser toDataURL directement
+      try {
+        const dataURL = canvas.toDataURL('image/jpeg', 0.8);
+        console.log('Canvas dataURL generated, length:', dataURL.length);
+        
+        if (!dataURL || dataURL === 'data:,') {
+          setIsCapturing(false);
+          reject(new Error('Failed to create image data'));
+          return;
+        }
+        
+        setIsCapturing(false);
+        resolve(dataURL);
+      } catch (error) {
+        console.error('Canvas toDataURL error:', error);
+        
+        // Fallback avec toBlob si toDataURL échoue
+        canvas.toBlob(
+          (blob) => {
+            if (!blob) {
+              setIsCapturing(false);
+              reject(new Error('Failed to create image blob'));
+              return;
+            }
+            
+            const reader = new FileReader();
+            reader.onload = (e) => {
+              setIsCapturing(false);
+              resolve(e.target?.result as string);
+            };
+            reader.onerror = () => {
+              setIsCapturing(false);
+              reject(new Error('Failed to read image'));
+            };
+            reader.readAsDataURL(blob);
+          },
+          'image/jpeg',
+          0.8
+        );
+      }
     });
   }, []);