@jaak.ai/stamps 2.0.0-dev.25 → 2.0.0-dev.27

package/dist/collection/components/my-component/my-component.js

@@ -6,6 +6,7 @@ export class JaakStamps {
     maskSize = 90; // Porcentaje del video que ocupará la máscara (default 90%)
     cropMargin = 0; // Margen en píxeles para el recorte del documento (default 0)
     useDocumentClassification = false; // Habilita la clasificación automática de documentos para determinar si solicitar reverso
+    preferredCamera = 'auto'; // Define qué cámara usar: 'auto' (automático según dispositivo), 'front' (frontal), 'back' (trasera)
     captureCompleted;
     isReady;
     isVideoActive = false;
@@ -31,6 +32,10 @@ export class JaakStamps {
     isLoading = false;
     isModelPreloaded = false;
     isMaskReady = false;
+    availableCameras = [];
+    selectedCameraId = null;
+    showCameraSelector = false;
+    isMultipleCamerasAvailable = false;
     videoRef;
     canvasRef;
     session;
@@ -41,6 +46,9 @@ export class JaakStamps {
     lastDetectedBox;
     mobileNetSession;
     mobileNetClassMap;
+    // Camera management properties
+    deviceType = 'desktop';
+    preferredCameraFacing = null;
     // Performance optimization properties
     frameSkipCounter = 0;
     FRAME_SKIP = 2; // Process every 3rd frame (reduces CPU by ~66%)
@@ -77,6 +85,13 @@ export class JaakStamps {
             this.cropMargin = 0;
         }
     }
+    validatePreferredCamera() {
+        const validOptions = ['auto', 'front', 'back'];
+        if (!validOptions.includes(this.preferredCamera)) {
+            console.warn(`preferredCamera debe ser uno de: ${validOptions.join(', ')}. Valor actual: ${this.preferredCamera}. Usando valor por defecto: 'auto'`);
+            this.preferredCamera = 'auto';
+        }
+    }
     emitReadyEvent() {
         const isDocumentReady = !!window.ort && this.isModelPreloaded;
         this.isReady.emit(isDocumentReady);
@@ -89,21 +104,318 @@ export class JaakStamps {
         const settings = videoTrack.getSettings();
         return settings.facingMode === 'environment';
     }
+    async detectDeviceTypeAndCameras() {
+        // Detect device type
+        const userAgent = navigator.userAgent;
+        const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+        const isTablet = /iPad|Android/i.test(userAgent) && window.innerWidth >= 768;
+        if (isTablet) {
+            this.deviceType = 'tablet';
+        }
+        else if (isMobile) {
+            this.deviceType = 'mobile';
+        }
+        else {
+            this.deviceType = 'desktop';
+        }
+        this.debugLog('📱 Device type detected:', this.deviceType);
+        // Enumerate available cameras
+        await this.enumerateAndDetectCameras();
+        // Load user preference
+        this.loadCameraPreference();
+    }
+    async enumerateAndDetectCameras() {
+        try {
+            // First, check if we have permission to enumerate devices
+            const permissionStatus = await this.checkCameraPermission();
+            if (permissionStatus === 'denied') {
+                this.debugLog('❌ Camera permission denied');
+                this.statusMessage = "Permiso de cámara denegado";
+                this.statusColor = "#ff6b6b";
+                return;
+            }
+            // Request minimal permission to get device labels
+            if (permissionStatus === 'prompt') {
+                const tempStream = await navigator.mediaDevices.getUserMedia({ video: true });
+                tempStream.getTracks().forEach(track => track.stop());
+            }
+            // Now enumerate devices with labels
+            const devices = await navigator.mediaDevices.enumerateDevices();
+            this.availableCameras = devices.filter(device => device.kind === 'videoinput');
+            this.isMultipleCamerasAvailable = this.availableCameras.length > 1;
+            this.debugLog('📹 Available cameras:', {
+                count: this.availableCameras.length,
+                isMultipleCamerasAvailable: this.isMultipleCamerasAvailable,
+                cameras: this.availableCameras.map(cam => ({
+                    id: cam.deviceId,
+                    label: cam.label || 'Unknown Camera'
+                }))
+            });
+            // Set initial camera preference based on device type
+            this.setInitialCameraPreference();
+        }
+        catch (error) {
+            this.debugLog('❌ Error enumerating cameras:', error);
+            this.handleCameraPermissionError(error);
+        }
+    }
+    async checkCameraPermission() {
+        try {
+            if (!navigator.permissions) {
+                return 'prompt'; // Assume we need to prompt on older browsers
+            }
+            const permission = await navigator.permissions.query({ name: 'camera' });
+            return permission.state;
+        }
+        catch (error) {
+            this.debugLog('⚠️ Could not check camera permission:', error);
+            return 'prompt';
+        }
+    }
+    handleCameraPermissionError(error) {
+        if (error.name === 'NotAllowedError') {
+            this.statusMessage = "Permiso de cámara denegado. Active el permiso en configuración.";
+            this.statusColor = "#ff6b6b";
+            this.availableCameras = [];
+            this.isMultipleCamerasAvailable = false;
+        }
+        else if (error.name === 'NotFoundError') {
+            this.statusMessage = "No se encontraron cámaras disponibles.";
+            this.statusColor = "#ff6b6b";
+            this.availableCameras = [];
+            this.isMultipleCamerasAvailable = false;
+        }
+        else if (error.name === 'NotReadableError') {
+            this.statusMessage = "Cámara en uso por otra aplicación.";
+            this.statusColor = "#ff6b6b";
+            this.availableCameras = [];
+            this.isMultipleCamerasAvailable = false;
+        }
+        else {
+            this.statusMessage = "Error al acceder a las cámaras.";
+            this.statusColor = "#ff6b6b";
+            this.availableCameras = [];
+            this.isMultipleCamerasAvailable = false;
+        }
+    }
+    setInitialCameraPreference() {
+        if (this.availableCameras.length === 0)
+            return;
+        // Apply user preference for camera selection
+        if (this.preferredCamera === 'front') {
+            // User explicitly wants front camera
+            this.preferredCameraFacing = 'user';
+            const frontCamera = this.availableCameras.find(camera => camera.label.toLowerCase().includes('front') ||
+                camera.label.toLowerCase().includes('user') ||
+                camera.label.toLowerCase().includes('selfie') ||
+                !camera.label.toLowerCase().includes('back') && !camera.label.toLowerCase().includes('rear'));
+            if (frontCamera) {
+                this.selectedCameraId = frontCamera.deviceId;
+                this.debugLog('👤 User selected front camera:', frontCamera.label);
+            }
+            else {
+                this.selectedCameraId = this.availableCameras[0].deviceId;
+                this.debugLog('⚠️ Front camera not found, using first available:', this.availableCameras[0].label);
+            }
+        }
+        else if (this.preferredCamera === 'back') {
+            // User explicitly wants back camera
+            this.preferredCameraFacing = 'environment';
+            const backCamera = this.availableCameras.find(camera => camera.label.toLowerCase().includes('back') ||
+                camera.label.toLowerCase().includes('rear') ||
+                camera.label.toLowerCase().includes('environment'));
+            if (backCamera) {
+                this.selectedCameraId = backCamera.deviceId;
+                this.debugLog('📷 User selected back camera:', backCamera.label);
+            }
+            else {
+                this.selectedCameraId = this.availableCameras[0].deviceId;
+                this.debugLog('⚠️ Back camera not found, using first available:', this.availableCameras[0].label);
+            }
+        }
+        else {
+            // Auto mode - use device type to determine best camera
+            if (this.deviceType === 'mobile' || this.deviceType === 'tablet') {
+                // For mobile/tablet, prefer rear camera for document scanning
+                this.preferredCameraFacing = 'environment';
+                const rearCamera = this.availableCameras.find(camera => camera.label.toLowerCase().includes('back') ||
+                    camera.label.toLowerCase().includes('rear') ||
+                    camera.label.toLowerCase().includes('environment'));
+                if (rearCamera) {
+                    this.selectedCameraId = rearCamera.deviceId;
+                    this.debugLog('📱 Auto-selected rear camera for mobile:', rearCamera.label);
+                }
+                else {
+                    this.selectedCameraId = this.availableCameras[0].deviceId;
+                    this.debugLog('📱 Rear camera not found, using first available:', this.availableCameras[0].label);
+                }
+            }
+            else {
+                // For desktop, use first available camera (usually the only one)
+                this.selectedCameraId = this.availableCameras[0].deviceId;
+                this.debugLog('💻 Auto-selected desktop camera:', this.availableCameras[0].label);
+            }
+        }
+    }
+    loadCameraPreference() {
+        try {
+            const saved = localStorage.getItem('jaak-stamps-camera-preference');
+            if (saved) {
+                const preference = JSON.parse(saved);
+                // Validate that the saved camera is still available
+                const isStillAvailable = this.availableCameras.some(camera => camera.deviceId === preference.cameraId);
+                if (isStillAvailable) {
+                    this.selectedCameraId = preference.cameraId;
+                    this.preferredCameraFacing = preference.facing;
+                    this.debugLog('💾 Loaded camera preference:', preference);
+                }
+            }
+        }
+        catch (error) {
+            this.debugLog('⚠️ Error loading camera preference:', error);
+        }
+    }
+    saveCameraPreference() {
+        try {
+            const preference = {
+                cameraId: this.selectedCameraId,
+                facing: this.preferredCameraFacing,
+                timestamp: Date.now()
+            };
+            localStorage.setItem('jaak-stamps-camera-preference', JSON.stringify(preference));
+            this.debugLog('💾 Saved camera preference:', preference);
+        }
+        catch (error) {
+            this.debugLog('⚠️ Error saving camera preference:', error);
+        }
+    }
+    async switchCamera(cameraId) {
+        if (!this.isVideoActive || this.selectedCameraId === cameraId)
+            return;
+        try {
+            // Check if the selected camera is still available
+            const selectedCamera = this.availableCameras.find(cam => cam.deviceId === cameraId);
+            if (!selectedCamera) {
+                this.debugLog('❌ Selected camera not found, re-enumerating...');
+                await this.enumerateAndDetectCameras();
+                return;
+            }
+            // Show loading state
+            if (this.debug) {
+                this.statusMessage = "Cambiando cámara...";
+                this.statusColor = "#007bff";
+            }
+            // Stop current stream
+            if (this.videoStream) {
+                this.videoStream.getTracks().forEach(track => track.stop());
+            }
+            // Update selected camera
+            this.selectedCameraId = cameraId;
+            // Update facing mode preference
+            const isRearCamera = selectedCamera.label.toLowerCase().includes('back') ||
+                selectedCamera.label.toLowerCase().includes('rear') ||
+                selectedCamera.label.toLowerCase().includes('environment');
+            this.preferredCameraFacing = isRearCamera ? 'environment' : 'user';
+            // Save preference
+            this.saveCameraPreference();
+            // Setup new camera with error handling
+            await this.setupCameraWithRetry();
+            this.debugLog('🔄 Switched to camera:', selectedCamera.label);
+        }
+        catch (error) {
+            this.debugLog('❌ Error switching camera:', error);
+            this.handleCameraPermissionError(error);
+        }
+    }
+    async setupCameraWithRetry(maxRetries = 3) {
+        for (let attempt = 1; attempt <= maxRetries; attempt++) {
+            try {
+                await this.setupCamera();
+                if (this.debug) {
+                    this.statusMessage = "Cámara configurada correctamente";
+                    this.statusColor = "#28a745";
+                }
+                return; // Success
+            }
+            catch (error) {
+                this.debugLog(`❌ Camera setup attempt ${attempt} failed:`, error);
+                if (attempt === maxRetries) {
+                    // Last attempt failed, handle the error
+                    this.statusMessage = "Error al configurar la cámara";
+                    this.statusColor = "#ff6b6b";
+                    this.handleCameraPermissionError(error);
+                    throw error;
+                }
+                // Update status for retry attempt
+                if (this.debug) {
+                    this.statusMessage = `Reintentando configuración de cámara... (${attempt}/${maxRetries})`;
+                    this.statusColor = "#ffb366";
+                }
+                // Wait before retrying
+                await new Promise(resolve => setTimeout(resolve, 500 * attempt));
+            }
+        }
+    }
+    toggleCameraSelector() {
+        this.showCameraSelector = !this.showCameraSelector;
+        this.debugLog('📹 Camera selector toggled:', {
+            showCameraSelector: this.showCameraSelector,
+            isMultipleCamerasAvailable: this.isMultipleCamerasAvailable,
+            availableCameras: this.availableCameras.length,
+            isVideoActive: this.isVideoActive
+        });
+    }
+    async flipCamera() {
+        if (!this.isMultipleCamerasAvailable)
+            return;
+        const currentIndex = this.availableCameras.findIndex(camera => camera.deviceId === this.selectedCameraId);
+        const nextIndex = (currentIndex + 1) % this.availableCameras.length;
+        const nextCamera = this.availableCameras[nextIndex];
+        await this.switchCamera(nextCamera.deviceId);
+    }
     async componentDidLoad() {
+        if (this.debug) {
+            // Show detailed initialization loading state only in debug mode
+            this.isLoading = true;
+            this.statusMessage = 'Inicializando componente...';
+            this.statusColor = '#007bff';
+            // Small delay to ensure initialization message is visible
+            await new Promise(resolve => setTimeout(resolve, 500));
+        }
         this.validateMaskSize();
         this.validateCropMargin();
+        this.validatePreferredCamera();
+        if (this.debug) {
+            // Update status for camera detection
+            this.statusMessage = 'Detectando cámaras disponibles...';
+        }
+        await this.detectDeviceTypeAndCameras();
         if (!window.ort) {
+            if (this.debug) {
+                // Update status for ONNX runtime loading
+                this.statusMessage = 'Cargando librerías de IA...';
+            }
             const script = document.createElement('script');
             script.src = 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js';
             document.head.appendChild(script);
             // Wait for ONNX runtime to load before emitting ready event
             script.onload = () => {
-                this.emitReadyEvent();
+                setTimeout(() => {
+                    this.statusMessage = 'Presione el botón para activar la cámara';
+                    this.statusColor = '#aaa';
+                    this.isLoading = false;
+                    this.emitReadyEvent();
+                }, 300);
             };
         }
         else {
             // ONNX runtime already loaded
-            this.emitReadyEvent();
+            setTimeout(() => {
+                this.statusMessage = 'Presione el botón para activar la cámara';
+                this.statusColor = '#aaa';
+                this.isLoading = false;
+                this.emitReadyEvent();
+            }, 300);
         }
         // Initialize canvas pool for better performance
         this.initializeCanvasPool();
@@ -293,6 +605,35 @@ export class JaakStamps {
             this.completeProcess(true);
         }
     }
+    async getCameraInfo() {
+        return {
+            availableCameras: this.availableCameras.map(camera => ({
+                id: camera.deviceId,
+                label: camera.label || 'Unknown Camera',
+                selected: camera.deviceId === this.selectedCameraId
+            })),
+            selectedCameraId: this.selectedCameraId,
+            deviceType: this.deviceType,
+            isMultipleCamerasAvailable: this.isMultipleCamerasAvailable,
+            preferredFacing: this.preferredCameraFacing,
+            userPreferredCamera: this.preferredCamera
+        };
+    }
+    async setPreferredCamera(camera) {
+        this.preferredCamera = camera;
+        this.debugLog('🎯 Camera preference changed to:', camera);
+        // Re-detect and apply new camera preference
+        await this.enumerateAndDetectCameras();
+        // If video is active, switch to the new preferred camera
+        if (this.isVideoActive && this.selectedCameraId) {
+            await this.switchCamera(this.selectedCameraId);
+        }
+        return {
+            success: true,
+            selectedCamera: this.selectedCameraId,
+            availableCameras: this.availableCameras.length
+        };
+    }
     async loadMobileNetModel() {
         try {
             this.debugLog('🤖 Loading MobileNet model...');
@@ -409,18 +750,38 @@ export class JaakStamps {
     }
     async getMaxResolution() {
         try {
-            // Primero obtén un stream básico para acceder a las capacidades
+            // Build constraints with selected camera if available
+            const videoConstraints = {};
+            if (this.selectedCameraId) {
+                videoConstraints.deviceId = { exact: this.selectedCameraId };
+            }
+            else if (this.preferredCameraFacing) {
+                videoConstraints.facingMode = this.preferredCameraFacing;
+            }
+            else {
+                videoConstraints.facingMode = "environment";
+            }
+            // Get temporary stream to access capabilities
             const tempStream = await navigator.mediaDevices.getUserMedia({
-                video: { facingMode: "environment" }
+                video: videoConstraints
             });
             const videoTrack = tempStream.getVideoTracks()[0];
             const capabilities = videoTrack.getCapabilities();
             // Detener el stream temporal
             tempStream.getTracks().forEach(track => track.stop());
-            // Construir restricciones con resolución optimizada para tablets
-            const constraints = {
-                facingMode: "environment"
-            };
+            // Build constraints with resolution optimized for tablets
+            const constraints = {};
+            // Set camera selection constraints
+            if (this.selectedCameraId) {
+                constraints.deviceId = { exact: this.selectedCameraId };
+            }
+            else if (this.preferredCameraFacing) {
+                constraints.facingMode = this.preferredCameraFacing;
+            }
+            else {
+                constraints.facingMode = "environment";
+            }
+            ;
             if (capabilities.width && capabilities.height) {
                 // Limitar resolución máxima para tablets para evitar problemas de rendimiento
                 const maxWidth = Math.min(capabilities.width.max, 1920);
@@ -447,13 +808,23 @@ export class JaakStamps {
         }
         catch (err) {
             this.debugLog('⚠️ Could not get capabilities, using fallback');
-            // Fallback optimizado para tablets
+            // Optimized fallback for tablets
             const isTablet = /iPad|Android/i.test(navigator.userAgent) && window.innerWidth >= 768;
-            return {
-                facingMode: "environment",
+            const fallbackConstraints = {
                 width: { ideal: isTablet ? 1280 : 1920 },
                 height: { ideal: isTablet ? 720 : 1080 }
             };
+            // Add camera selection to fallback
+            if (this.selectedCameraId) {
+                fallbackConstraints.deviceId = { exact: this.selectedCameraId };
+            }
+            else if (this.preferredCameraFacing) {
+                fallbackConstraints.facingMode = this.preferredCameraFacing;
+            }
+            else {
+                fallbackConstraints.facingMode = "environment";
+            }
+            return fallbackConstraints;
         }
     }
     async setupCamera() {
@@ -488,8 +859,7 @@ export class JaakStamps {
         }
         catch (err) {
             this.debugLog("❌ No se pudo acceder a la cámara:", err);
-            this.statusMessage = "Error: No se pudo acceder a la cámara.";
-            this.statusColor = "#ff6b6b";
+            this.handleCameraPermissionError(err);
         }
     }
     preprocess(video) {
@@ -534,28 +904,48 @@ export class JaakStamps {
             // Check if model is already preloaded
             if (!this.session) {
                 this.isLoading = true;
-                this.statusMessage = "Cargando modelos...";
-                this.statusColor = "#007bff";
+                if (this.debug) {
+                    this.statusMessage = "Cargando modelo de detección...";
+                    this.statusColor = "#007bff";
+                }
+                else {
+                    this.statusMessage = "Cargando modelos...";
+                    this.statusColor = "#007bff";
+                }
                 const modelPath = this.MODEL_PATH;
                 this.debugLog('🤖 Loading detection model:', modelPath);
                 const sessionOptions = this.getSessionOptions();
                 this.session = await window.ort.InferenceSession.create(modelPath, sessionOptions);
                 // Load MobileNet model if classification is enabled and not already loaded
                 if (this.useDocumentClassification && !this.mobileNetSession) {
+                    if (this.debug) {
+                        this.statusMessage = "Cargando modelo de clasificación...";
+                    }
                     await this.loadMobileNetModel();
                 }
                 this.isModelPreloaded = true;
+                if (this.debug) {
+                    this.statusMessage = "Modelos cargados exitosamente";
+                }
                 this.emitReadyEvent();
             }
             else {
                 this.debugLog('🚀 Using preloaded models');
-                this.statusMessage = "Usando modelos precargados...";
-                this.statusColor = "#007bff";
+                if (this.debug) {
+                    this.statusMessage = "Usando modelos precargados...";
+                    this.statusColor = "#007bff";
+                }
+            }
+            if (this.debug) {
+                this.statusMessage = "Configurando cámara...";
             }
-            this.statusMessage = "Configurando cámara...";
             await this.setupCamera();
             this.startTime = Date.now();
             this.isLoading = false;
+            if (this.debug) {
+                this.statusMessage = "Detección activa - Busque su identificación";
+                this.statusColor = "#28a745";
+            }
             this.detectFrame();
         }
         catch (err) {
@@ -1027,8 +1417,14 @@ export class JaakStamps {
             this.videoStream.getTracks().forEach(track => track.stop());
             this.videoStream = undefined;
             this.isVideoActive = false;
-            this.statusMessage = "Sesión finalizada.";
-            this.statusColor = "#aaa";
+            if (this.debug) {
+                this.statusMessage = "Cámara desactivada - Listo para nueva sesión";
+                this.statusColor = "#6c757d";
+            }
+            else {
+                this.statusMessage = "Presione el botón para activar la cámara";
+                this.statusColor = "#aaa";
+            }
         }
         this.isLoading = false;
         // Limpiar canvas al finalizar sesión
@@ -1039,7 +1435,20 @@ export class JaakStamps {
         this.cleanup();
     }
     render() {
-        return (h("div", { key: '42591479495df221b101555198a23288d7d765b0', class: "detector-container" }, h("div", { key: '2b9ab48572aa2fb5542b8a8dc1b70a0f2a6eca89', class: "video-container" }, h("video", { key: 'b9e84f2eb67fa6f7f158e19b90871a1eebee624b', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: this.isVideoActive ? 'block' : 'none' } }), h("canvas", { key: 'a82fc4826e220e696799b07b3510456f174a6628', ref: el => this.canvasRef = el, class: this.shouldMirrorVideo ? 'mirror' : '' }), this.isMaskReady && (h("div", { key: '9b3b838f99030e3dfa760fa0dd7c89ff24f26ed9', class: "overlay-mask" }, h("div", { key: 'f6a3b1ac2f12c1fb081f6b5eb853e627040396f4', class: "card-outline" }, h("div", { key: '6626259249ac5e0fd6ba665ab802af1ac2f9fc17', class: "side side-top" }), h("div", { key: '7a3195c96b2406b40b122f4267c2a251614cdede', class: "side side-right" }), h("div", { key: 'ece78305cfb083ada1d44de1d7d5226730879cc3', class: "side side-bottom" }), h("div", { key: '107468c583bbb01dd46c36c096e49be8e0b574ba', class: "side side-left" }), h("div", { key: 'c590f13b80c5e37c0ac0c68cfc2e2904b4345ebc', class: "corner corner-tl" }), h("div", { key: 'ab1e5aab179068ad1bc7b58ef3628d9618a877a8', class: "corner corner-tr" }), h("div", { key: '3a1db6cf1105bd3a2dfe7d4b998e79f6e40625ec', class: "corner corner-bl" }), h("div", { key: '5f9bc4e4557e5539335894160dccbaa2a6d6ac2d', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (h("div", { key: '8226d6721b0ae800f935e978a93113bd3b99656a', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (h("button", { key: '16cec7ca4a80ba0db1ace768826da17063eddb3e', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")))), this.isCapturing && (h("div", { key: 'bfdca0059eb50d37a77e8e43ef963ba7ed953edf', class: "capture-animation" })), this.showFlipAnimation && (h("div", { key: 'a1ad4b4f884d7d9f6090f148ddd6df19250073dd', class: "flip-animation" }, h("div", { key: 'e159ce385824dc049a6e9409d3747105c6f0a08e', class: "id-card-icon" }), h("div", { key: '6fcff650a3c7fdb16f8d327750e06055b9a93d0d', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (h("div", { key: 'c4b76ecb19c65969676e5156689c2c0b1c9a584e', class: "success-animation" }, h("div", { key: '12203a8fe7ee878089b3dda1d1142cde5489eed0', class: "check-icon" }), h("div", { key: 'a2d41c8944873d33106994b8d56c3ee1ee1ae9fc', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (h("div", { key: 'a155cd999fa40c35fa7b391cde7c1026edb250a7', class: "loading-overlay" }, h("div", { key: 'ccba76c5d4a472158c28bc564ba95bd65829b58d', class: "loading-spinner" }), h("div", { key: '23168f9bdcf4e993539288ff5703acaed13bb16a', class: "loading-text" }, this.statusMessage))), h("div", { key: '0107b82ad19726c1bab131e17892a46b04e08cfd', class: "watermark" }, h("img", { key: 'ad8831a6f77fa61805f22e3a27f5c5619ac1cc0e', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
+        return (h("div", { key: '86ff6966e69804bea4faef5a9201480bd7ef5b9a', class: "detector-container" }, h("div", { key: 'aaed4a078d4eff98674f2163a56a1596782612bd', class: "video-container" }, h("video", { key: '6ae6a7c626c9b2b6e6915c826517d1365205b3a0', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: this.isVideoActive ? 'block' : 'none' } }), h("canvas", { key: 'c8666e4b4814e633155be738e23ada098fb3be93', ref: el => this.canvasRef = el, class: this.shouldMirrorVideo ? 'mirror' : '' }), this.isMaskReady && (h("div", { key: '968bcd21315afcf054f881647723299e7e57c29b', class: "overlay-mask" }, h("div", { key: '77f8a331f3d9e19b35c11b6c23b06420cbab9fd5', class: "card-outline" }, h("div", { key: '9d0164e7b2dcf6392471151c236127cd57507512', class: "side side-top" }), h("div", { key: '05a003eb49d25c72644aea2511b6519c5241ffb4', class: "side side-right" }), h("div", { key: 'a561ae9a94eb78aacfc24bac717164b3e22f41e5', class: "side side-bottom" }), h("div", { key: '81d64e5b58032c14062fc8efdee417db7f8a9f12', class: "side side-left" }), h("div", { key: '03c02e2c4c73c525965e34c7c47bb74f769d577f', class: "corner corner-tl" }), h("div", { key: '84780aec021ec4e0c7d38f6a659be765c4604ed5', class: "corner corner-tr" }), h("div", { key: '1ea67789c5a38cbc790f911f8f06b55c866d3927', class: "corner corner-bl" }), h("div", { key: 'e0e1999b0c5c37451850203eed4dbc2ff5834261', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (h("div", { key: '4909eb28d62b1674436c148ef46cd05a35ff8ec8', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (h("button", { key: '5a971c2121cf9962719ad89fc45530b8acccb550', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")), this.isVideoActive && (h("div", { key: '109e5885c49212f89d5678d9c9716ebd48614126', class: "camera-controls" }, this.isMultipleCamerasAvailable && (h("button", { key: '7c8ce2cd775c0646c80378cd0ad1f70243443ddf', class: "flip-camera-button", onClick: () => this.flipCamera(), type: "button", title: "Cambiar c\u00E1mara" }, "Girar c\u00E1mara")), h("button", { key: '5d3d066ba7e317fdc33878eeb9f2f7d28c6f65dc', class: "camera-selector-button", onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara" }, "C\u00E1maras"), this.debug && (h("div", { key: '4cbc284f2efbcb90ef91ea2e064bf0aa1e7980af', style: {
+                position: 'absolute',
+                top: '50px',
+                right: '0',
+                background: 'rgba(0,0,0,0.8)',
+                color: 'white',
+                padding: '8px',
+                fontSize: '10px',
+                borderRadius: '4px',
+                whiteSpace: 'nowrap'
+            } }, "C\u00E1maras: ", this.availableCameras.length, h("br", { key: 'df214515289add2cc73f989bfacb59069334a0e6' }), "M\u00FAltiples: ", this.isMultipleCamerasAvailable ? 'Sí' : 'No', h("br", { key: 'aa2b1784781b5b45d24139e2b6cc4865d9f3a00c' }), "Selector: ", this.showCameraSelector ? 'Visible' : 'Oculto', h("br", { key: 'fb95b2b58c9fb89f632d85a9271b7788d45a66c0' }), "Video: ", this.isVideoActive ? 'Activo' : 'Inactivo')))), this.showCameraSelector && this.availableCameras.length > 0 && (h("div", { key: 'ec1c90c5a6c84e3ef75724e7e600a60714545608', class: "camera-selector-dropdown" }, h("div", { key: 'ea118817b6563c78b7fbf5ee66af2e38a441a8b7', class: "camera-selector-header" }, h("span", { key: '52603259d50ffb7aa6ea5753762f0f0d018b39ff' }, "Seleccionar C\u00E1mara"), h("button", { key: '422ae0643f5d1451cf539b3a77becbf44904a484', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: 'd5acef7ba0b1645c52fb3ea7b3c64e70fa187a5f', class: "camera-list" }, this.availableCameras.map((camera) => (h("button", { key: camera.deviceId, class: `camera-option ${this.selectedCameraId === camera.deviceId ? 'selected' : ''}`, onClick: () => {
+                this.switchCamera(camera.deviceId);
+                this.toggleCameraSelector();
+            }, type: "button" }, h("span", { class: "camera-label" }, camera.label || `Cámara ${this.availableCameras.indexOf(camera) + 1}`), this.selectedCameraId === camera.deviceId && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: 'b670e7bf441559bf156874dbe3bbf83dbff2fa0d', class: "device-info" }, h("small", { key: '4d333925c1ff4197b6009414ed694b0a0eb06159' }, "Dispositivo: ", this.deviceType)))))), this.isCapturing && (h("div", { key: '21f7ea0e50575226daba8607ab4bccc5029aa179', class: "capture-animation" })), this.showFlipAnimation && (h("div", { key: 'c2350cc43d3a119391f62f2cf771ed5afcdb3558', class: "flip-animation" }, h("div", { key: 'a91de9e8662a4750555bce2a879b89f9216b8156', class: "id-card-icon" }), h("div", { key: 'def1c2534e1aae27e262deb6fd26a73ff0c8cb9b', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (h("div", { key: 'acbbfb6d07e4f6bf343ff18af2d55979e76db3d4', class: "success-animation" }, h("div", { key: 'f5acd84325226e6b1ede1180335d7495a6b2d95e', class: "check-icon" }), h("div", { key: '393fd8300ce48e59bd3ef94f0e895abc3a938c1f', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (h("div", { key: 'ce0d1baebab8bf0e18531a26b549f38e349a0d72', class: "loading-overlay" }, h("div", { key: '14c76fa00ddd814f37bd9c6dc57f761119886566', class: "loading-spinner" }), h("div", { key: '87ccb288f927e61ec126d83f44061699810c9e06', class: "loading-text" }, this.statusMessage))), this.debug && (h("div", { key: '943dff6e2772f2595a95116e8943866f97cada6e', class: "status-bar" }, h("div", { key: '00fe53b71ef94d51636259f106e4518df910848d', class: "status-message", style: { 'color': this.statusColor } }, this.statusMessage))), h("div", { key: '4c3bd150006473d9540fb1418f11f45fb96d1e56', class: "watermark" }, h("img", { key: 'c634701f52a4422c7be5b4007bf34ba4aeb4ebcc', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
     }
     static get is() { return "jaak-stamps"; }
     static get encapsulation() { return "shadow"; }
@@ -1154,6 +1563,26 @@ export class JaakStamps {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "preferredCamera": {
+                "type": "string",
+                "attribute": "preferred-camera",
+                "mutable": false,
+                "complexType": {
+                    "original": "'auto' | 'front' | 'back'",
+                    "resolved": "\"auto\" | \"back\" | \"front\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'auto'"
             }
         };
     }
@@ -1176,7 +1605,11 @@ export class JaakStamps {
             "isDetectionPaused": {},
             "isLoading": {},
             "isModelPreloaded": {},
-            "isMaskReady": {}
+            "isMaskReady": {},
+            "availableCameras": {},
+            "selectedCameraId": {},
+            "showCameraSelector": {},
+            "isMultipleCamerasAvailable": {}
         };
     }
     static get events() {
@@ -1349,6 +1782,44 @@ export class JaakStamps {
                     "text": "",
                     "tags": []
                 }
+            },
+            "getCameraInfo": {
+                "complexType": {
+                    "signature": "() => Promise<{ availableCameras: { id: string; label: string; selected: boolean; }[]; selectedCameraId: string; deviceType: \"mobile\" | \"desktop\" | \"tablet\"; isMultipleCamerasAvailable: boolean; preferredFacing: \"environment\" | \"user\"; userPreferredCamera: \"auto\" | \"front\" | \"back\"; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ availableCameras: { id: string; label: string; selected: boolean; }[]; selectedCameraId: string; deviceType: \"mobile\" | \"desktop\" | \"tablet\"; isMultipleCamerasAvailable: boolean; preferredFacing: \"environment\" | \"user\"; userPreferredCamera: \"auto\" | \"front\" | \"back\"; }>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setPreferredCamera": {
+                "complexType": {
+                    "signature": "(camera: \"auto\" | \"front\" | \"back\") => Promise<{ success: boolean; selectedCamera: string; availableCameras: number; }>",
+                    "parameters": [{
+                            "name": "camera",
+                            "type": "\"auto\" | \"front\" | \"back\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ success: boolean; selectedCamera: string; availableCameras: number; }>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }