Improve camera support and photo capture, especially on tablets

Enhance camera functionalities with improved constraints, fallbacks, UI, and error handling within CameraModal and useCamera hook.

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/dcf949f8-2931-4556-aa3c-e4bf61346ee3.jpg

client/src/components/CameraModal.tsx

@@ -32,7 +32,7 @@ export default function CameraModal({
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-md">
+      <DialogContent className="max-w-lg w-full mx-auto">
         <DialogHeader>
           <DialogTitle>
             Photo {photoType ? photoType.charAt(0).toUpperCase() + photoType.slice(1) : ''}
@@ -46,20 +46,33 @@ export default function CameraModal({
               autoPlay
               playsInline
               muted
-              className="w-full camera-preview"
+              className="w-full max-w-full h-auto camera-preview rounded-lg border"
+              style={{ 
+                aspectRatio: '16/9',
+                objectFit: 'cover',
+                maxHeight: '400px'
+              }}
             />
             <canvas ref={canvasRef} className="hidden" />
+            
+            {/* 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">
+                Cadrez la pièce d'identité dans le rectangle
+              </div>
+            </div>
           </div>
           
-          <div className="flex justify-end space-x-3">
-            <Button variant="outline" onClick={onClose}>
+          <div className="flex justify-between space-x-3">
+            <Button variant="outline" onClick={onClose} className="flex-1">
               <X className="h-4 w-4 mr-2" />
               Fermer
             </Button>
             <Button 
               onClick={onCapture} 
               disabled={isCapturing}
-              className="bg-primary hover:bg-primary/90"
+              className="bg-primary hover:bg-primary/90 flex-1"
             >
               <Camera className="h-4 w-4 mr-2" />
               {isCapturing ? 'Capture...' : 'Prendre la photo'}

client/src/components/NewSaleForm.tsx

@@ -180,6 +180,16 @@ export default function NewSaleForm() {
 
   // Photo capture functions
   const handlePhotoCapture = async (photoType: PhotoType) => {
+    // Vérifier d'abord si les caméras sont supportées
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+      toast({
+        title: "Caméra non supportée",
+        description: "Votre navigateur ne supporte pas l'accès aux caméras",
+        variant: "destructive",
+      });
+      return;
+    }
+
     try {
       await startCamera(photoType);
     } catch (error) {