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

@@ -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'}

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",