@jaak.ai/stamps 2.0.0 → 2.1.0-dev.2

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

@@ -7,6 +7,7 @@ export class JaakStamps {
     maskSize = 90;
     cropMargin = 20;
     useDocumentClassification = false;
+    useDocumentDetector = true;
     preferredCamera = 'auto';
     captureDelay = 1500;
     enableBackDocumentTimer = false;
@@ -23,9 +24,16 @@ export class JaakStamps {
     showCameraSelector = false;
     isSwitchingCamera = false;
     hasDocumentDetected = false;
+    cameraInfoWithAutofocus = {
+        availableCameras: [],
+        selectedCameraId: null,
+        deviceType: 'desktop',
+        isMultipleCamerasAvailable: false,
+        preferredFacing: null
+    };
     currentStatus = {
-        message: 'Inicializando componente...',
-        description: 'Configurando servicios y cargando recursos',
+        message: 'Preparando capturador...',
+        description: 'Configurando herramientas de captura',
         type: 'initializing',
         isInitialized: false
     };
@@ -40,9 +48,9 @@ export class JaakStamps {
         detectionRate: 0
     };
     backDocumentTimerRemaining = 0;
+    showManualCaptureButton = false;
     // Services
     serviceContainer;
-    logger;
     eventBus;
     stateManager;
     cameraService;
@@ -73,19 +81,25 @@ export class JaakStamps {
         lastUpdateTime: 0
     };
     performanceUpdateInterval;
-    // Performance optimization
+    // Performance optimization with adaptive frame skipping
     frameSkipCounter = 0;
-    FRAME_SKIP = 2;
+    BASE_FRAME_SKIP = 2;
+    MAX_FRAME_SKIP = 8;
     consecutiveFailures = 0;
     MAX_FAILURES = 30;
     lastInferenceTime = 0;
     MIN_INFERENCE_INTERVAL = 50;
+    performanceHistory = [];
+    PERFORMANCE_HISTORY_SIZE = 10;
+    // Canvas pool for optimized screenshot capture
+    canvasPool = [];
+    MAX_CANVAS_POOL_SIZE = 3;
     async componentDidLoad() {
-        this.updateStatus('Iniciando servicios...', 'Configurando módulos internos', 'initializing');
+        this.updateStatus('Preparando capturador...', 'Configurando herramientas de captura', 'initializing');
         await this.initializeServices();
-        this.updateStatus('Configurando eventos...', 'Preparando comunicación entre servicios', 'initializing');
+        this.updateStatus('Preparando funciones...', 'Configurando herramientas de trabajo', 'initializing');
         await this.setupEventListeners();
-        this.updateStatus('Inicializando cámara...', 'Detectando dispositivos disponibles', 'initializing');
+        this.updateStatus('Configurando cámara...', 'Detectando dispositivos disponibles', 'initializing');
         await this.initializeComponent();
         if (this.debug) {
             this.initializePerformanceMonitor();
@@ -98,37 +112,28 @@ export class JaakStamps {
             maskSize: this.maskSize,
             cropMargin: this.cropMargin,
             useDocumentClassification: this.useDocumentClassification,
+            useDocumentDetector: this.useDocumentDetector,
             preferredCamera: this.preferredCamera,
             captureDelay: this.captureDelay
         };
         this.serviceContainer = new ServiceContainer(config);
-        this.logger = this.serviceContainer.getLogger();
         this.eventBus = this.serviceContainer.getEventBus();
         this.stateManager = this.serviceContainer.getStateManager();
         this.cameraService = this.serviceContainer.getCameraService();
         this.detectionService = this.serviceContainer.getDetectionService();
-        this.logger.state('SERVICIOS_INICIALIZADOS', { timestamp: Date.now() });
     }
     async setupEventListeners() {
         this.eventBus.on('state-changed', (data) => {
             this.handleStateChange(data);
         });
-        this.eventBus.on('camera-changed', (cameraId) => {
-            this.logger.state('CAMARA_CAMBIADA_EVENT', { cameraId });
+        this.eventBus.on('camera-changed', () => {
+            // Camera changed event
         });
-        this.eventBus.on('error', (error) => {
-            this.logger.error('Error en servicio:', error);
+        this.eventBus.on('error', () => {
+            // Handle service errors
         });
     }
     async initializeComponent() {
-        this.logger.state('COMPONENTE_INICIALIZANDO', {
-            debug: this.debug,
-            maskSize: this.maskSize,
-            cropMargin: this.cropMargin,
-            useDocumentClassification: this.useDocumentClassification,
-            preferredCamera: this.preferredCamera,
-            captureDelay: this.captureDelay
-        });
         this.validateProps();
         if (this.debug) {
             this.stateManager.updateCaptureState({ isLoading: true });
@@ -137,58 +142,67 @@ export class JaakStamps {
         this.updateStatus('Detectando cámaras...', 'Buscando dispositivos de captura', 'initializing');
         await this.cameraService.detectDeviceType();
         await this.cameraService.enumerateDevices();
-        this.updateStatus('Cargando modelo IA...', 'Preparando reconocimiento de documentos', 'initializing');
+        await this.updateCameraInfoWithAutofocus();
+        this.updateStatus('Preparando reconocimiento...', 'Configurando detección de documentos', 'initializing');
         await this.loadOnnxRuntime();
         this.initializeResizeObserver();
     }
     validateProps() {
         if (this.maskSize < 50 || this.maskSize > 100) {
-            this.logger.warn(`Propiedad maskSize inválida. Valor: ${this.maskSize}, esperado: 50-100. Usando valor por defecto: 90`);
             this.maskSize = 90;
         }
         if (this.cropMargin < 0 || this.cropMargin > 100) {
-            this.logger.warn(`Propiedad cropMargin inválida. Valor: ${this.cropMargin}, esperado: 0-100. Usando valor por defecto: 0`);
             this.cropMargin = 0;
         }
         const validOptions = ['auto', 'front', 'back'];
         if (!validOptions.includes(this.preferredCamera)) {
-            this.logger.warn(`Propiedad preferredCamera inválida. Valor: ${this.preferredCamera}, esperado: ${validOptions.join(', ')}. Usando valor por defecto: 'auto'`);
             this.preferredCamera = 'auto';
         }
         if (this.captureDelay < 0 || this.captureDelay > 10000) {
-            this.logger.warn(`Propiedad captureDelay inválida. Valor: ${this.captureDelay}, esperado: 0-10000. Usando valor por defecto: 1500`);
             this.captureDelay = 1500;
         }
     }
     async loadOnnxRuntime() {
         if (!window.ort) {
-            this.updateStatus('Descargando librerías...', 'Obteniendo recursos de reconocimiento', 'initializing');
+            this.updateStatus('Preparando herramientas...', 'Configurando funciones de captura', 'initializing');
             const script = document.createElement('script');
             script.src = 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js';
             document.head.appendChild(script);
             await new Promise((resolve) => {
                 script.onload = () => {
-                    setTimeout(() => {
-                        this.finalizeInitialization();
+                    setTimeout(async () => {
+                        await this.finalizeInitialization();
                         resolve(undefined);
                     }, 300);
                 };
             });
         }
         else {
-            setTimeout(() => {
-                this.finalizeInitialization();
+            setTimeout(async () => {
+                await this.finalizeInitialization();
             }, 300);
         }
     }
-    finalizeInitialization() {
+    async finalizeInitialization() {
         this.stateManager.updateCaptureState({ isLoading: false });
-        this.currentStatus = {
-            message: 'Listo para capturar',
-            description: '',
-            type: 'ready',
-            isInitialized: true
-        };
+        // Check camera permissions before showing "ready" status
+        const hasPermissions = await this.checkCameraPermissions();
+        if (hasPermissions) {
+            this.currentStatus = {
+                message: 'Listo para capturar',
+                description: '',
+                type: 'ready',
+                isInitialized: true
+            };
+        }
+        else {
+            this.currentStatus = {
+                message: 'Permisos de cámara requeridos',
+                description: 'Por favor, otorgue permisos de cámara para continuar',
+                type: 'error',
+                isInitialized: true
+            };
+        }
         this.emitReadyEvent();
     }
     updateStatus(message, description, type = 'loading') {
@@ -202,11 +216,26 @@ export class JaakStamps {
     emitReadyEvent() {
         const isDocumentReady = !!window.ort && this.detectionService.isModelLoaded();
         this.isReady.emit(isDocumentReady);
-        this.logger.state('COMPONENTE_LISTO', {
-            ortLibraryLoaded: !!window.ort,
-            modelPreloaded: this.detectionService.isModelLoaded(),
-            isReady: isDocumentReady
-        });
+    }
+    async checkCameraPermissions() {
+        try {
+            if (!navigator.permissions) {
+                // Fallback: try to access camera directly
+                try {
+                    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+                    stream.getTracks().forEach(track => track.stop());
+                    return true;
+                }
+                catch {
+                    return false;
+                }
+            }
+            const permission = await navigator.permissions.query({ name: 'camera' });
+            return permission.state === 'granted';
+        }
+        catch (error) {
+            return false;
+        }
     }
     handleStateChange(data) {
         // React to state changes from StateManager
@@ -229,9 +258,31 @@ export class JaakStamps {
             const container = this.detectionContainer.parentElement;
             const rect = container.getBoundingClientRect();
             this.updateMaskDimensions(rect);
-            this.logger.debug('Container redimensionado:', { width: rect.width, height: rect.height });
         }
     }
+    getGuideText(step) {
+        if (step === 'completed') {
+            return 'Proceso completado';
+        }
+        if (step === 'front') {
+            // Para el frente, si el detector manual está activo, mostrar instrucciones de captura manual
+            if (this.showManualCaptureButton) {
+                return 'Posicione el frente de su documento en el marco y presione el botón para capturar';
+            }
+            // Instrucción básica de alineación
+            return 'Alinee su identificación con el marco';
+        }
+        else if (step === 'back') {
+            // Para el reverso, mostrar instrucciones específicas según el modo
+            if (this.useDocumentDetector) {
+                return 'Si tu documento no tiene lado trasero, da clic en el botón para continuar con el proceso';
+            }
+            else {
+                return 'Posicione el reverso de su documento en el marco y capture, o salte este paso';
+            }
+        }
+        return 'Alinee su identificación con el marco';
+    }
     updateMaskDimensions(containerRect) {
         if (!this.videoRef)
             return;
@@ -283,16 +334,38 @@ export class JaakStamps {
         this.el.style.setProperty('--mask-center-x', `${videoCenterXPercent}%`);
         this.el.style.setProperty('--mask-center-y', `${videoCenterYPercent}%`);
         this.isMaskReady = true;
-        this.logger.state('DIMENSIONES_MASCARA_ACTUALIZADAS', {
-            video: { width: videoWidth, height: videoHeight },
-            displayed: { width: displayedVideoWidth, height: displayedVideoHeight },
-            mask: { widthPercent: maskWidthPercent, heightPercent: maskHeightPercent },
-            center: { x: videoCenterXPercent, y: videoCenterYPercent },
-            offset: { x: videoOffsetX, y: videoOffsetY }
-        });
     }
     // PUBLIC METHODS
+    // Helper method to check if component is ready for operations
+    isComponentReady() {
+        if (!this.currentStatus.isInitialized) {
+            return {
+                ready: false,
+                message: 'El componente aún se está inicializando',
+                status: 'initializing'
+            };
+        }
+        if (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') {
+            return {
+                ready: false,
+                message: 'El componente está cargando recursos',
+                status: 'loading'
+            };
+        }
+        if (!this.serviceContainer || !this.stateManager || !this.cameraService || !this.detectionService) {
+            return {
+                ready: false,
+                message: 'Los servicios del componente no están disponibles',
+                status: 'error'
+            };
+        }
+        return { ready: true };
+    }
     async getCapturedImages() {
+        const readyCheck = this.isComponentReady();
+        if (!readyCheck.ready) {
+            throw new Error(readyCheck.message);
+        }
         const state = this.stateManager.getCaptureState();
         if (state.step !== 'completed') {
             throw new Error('El proceso de captura no ha sido completado');
@@ -300,47 +373,128 @@ export class JaakStamps {
         return this.stateManager.getCapturedImages();
     }
     async isProcessCompleted() {
+        const readyCheck = this.isComponentReady();
+        if (!readyCheck.ready) {
+            return false; // Return false instead of error for this method
+        }
         return this.stateManager.isProcessCompleted();
     }
     async startCapture() {
-        await this.startDetection();
+        const readyCheck = this.isComponentReady();
+        if (!readyCheck.ready) {
+            this.updateStatus(readyCheck.message, 'Espere a que termine la inicialización', readyCheck.status);
+            return { success: false, error: readyCheck.message };
+        }
+        try {
+            await this.startDetection();
+            return { success: true };
+        }
+        catch (error) {
+            this.updateStatus('Error al iniciar captura', error.message, 'error');
+            return { success: false, error: error.message };
+        }
     }
     async stopCapture() {
-        this.exitSession();
+        const readyCheck = this.isComponentReady();
+        if (!readyCheck.ready) {
+            return { success: false, error: readyCheck.message };
+        }
+        try {
+            this.exitSession();
+            return { success: true };
+        }
+        catch (error) {
+            return { success: false, error: error.message };
+        }
     }
     async resetCapture() {
-        this.resetDetection();
+        const readyCheck = this.isComponentReady();
+        if (!readyCheck.ready) {
+            return { success: false, error: readyCheck.message };
+        }
+        try {
+            this.resetDetection();
+            return { success: true };
+        }
+        catch (error) {
+            return { success: false, error: error.message };
+        }
     }
     async skipBackCapture() {
-        const captureState = this.stateManager.getCaptureState();
-        const capturedImages = this.stateManager.getCapturedImages();
-        if (captureState.step === 'back' && capturedImages.front.fullFrame) {
-            this.completeProcess(true);
+        const readyCheck = this.isComponentReady();
+        if (!readyCheck.ready) {
+            return { success: false, error: readyCheck.message };
+        }
+        try {
+            const captureState = this.stateManager.getCaptureState();
+            const capturedImages = this.stateManager.getCapturedImages();
+            if (captureState.step === 'back' && capturedImages.front.fullFrame) {
+                this.completeProcess(true);
+                return { success: true };
+            }
+            else {
+                return { success: false, error: 'No se puede saltar el reverso en el estado actual' };
+            }
+        }
+        catch (error) {
+            return { success: false, error: error.message };
         }
     }
     async getStatus() {
-        const captureState = this.stateManager.getCaptureState();
-        const capturedImages = this.stateManager.getCapturedImages();
-        return {
-            isVideoActive: captureState.isVideoActive,
-            captureStep: captureState.step,
-            hasImages: !!(capturedImages.front.fullFrame || capturedImages.back.fullFrame),
-            isProcessCompleted: this.stateManager.isProcessCompleted(),
-            isModelPreloaded: this.detectionService.isModelLoaded()
-        };
+        const readyCheck = this.isComponentReady();
+        if (!readyCheck.ready) {
+            return {
+                isVideoActive: false,
+                captureStep: 'front',
+                hasImages: false,
+                isProcessCompleted: false,
+                isModelPreloaded: false,
+                componentStatus: readyCheck.status,
+                componentMessage: readyCheck.message
+            };
+        }
+        try {
+            const captureState = this.stateManager.getCaptureState();
+            const capturedImages = this.stateManager.getCapturedImages();
+            return {
+                isVideoActive: captureState.isVideoActive,
+                captureStep: captureState.step,
+                hasImages: !!(capturedImages.front.fullFrame || capturedImages.back.fullFrame),
+                isProcessCompleted: this.stateManager.isProcessCompleted(),
+                isModelPreloaded: this.detectionService.isModelLoaded(),
+                componentStatus: 'ready'
+            };
+        }
+        catch (error) {
+            return {
+                isVideoActive: false,
+                captureStep: 'front',
+                hasImages: false,
+                isProcessCompleted: false,
+                isModelPreloaded: false,
+                componentStatus: 'error',
+                componentMessage: error.message
+            };
+        }
     }
     async preloadModel() {
+        const readyCheck = this.isComponentReady();
+        if (!readyCheck.ready) {
+            this.updateStatus(readyCheck.message, 'Espere a que termine la inicialización', readyCheck.status);
+            return { success: false, error: readyCheck.message };
+        }
         if (this.detectionService.isModelLoaded()) {
-            this.logger.state('MODELO_YA_PRECARGADO');
-            this.updateStatus('Modelos ya cargados', '', 'ready');
+            this.updateStatus('Reconocimiento listo', '', 'ready');
             return { success: true, message: 'Model already loaded' };
         }
         try {
             const loadStartTime = performance.now();
-            this.updateStatus('Descargando modelo de detección...', 'Obteniendo red neuronal para reconocimiento de documentos', 'loading');
-            this.stateManager.updateCaptureState({ isLoading: true });
+            this.updateStatus('Preparando reconocimiento...', 'Configurando detección de documentos', 'loading');
+            if (this.stateManager) {
+                this.stateManager.updateCaptureState({ isLoading: true });
+            }
             await this.detectionService.loadModel();
-            this.updateStatus('Cargando clasificador...', 'Preparando modelo de clasificación de tipos de documento', 'loading');
+            this.updateStatus('Optimizando detección...', 'Configurando reconocimiento de documentos', 'loading');
             await this.detectionService.loadClassificationModel();
             const loadEndTime = performance.now();
             const loadTime = loadEndTime - loadStartTime;
@@ -348,80 +502,118 @@ export class JaakStamps {
             if (this.debug) {
                 this.recordOnnxPerformance(loadTime, 0);
             }
-            this.updateStatus('Optimizando modelos...', 'Configurando parámetros de rendimiento', 'loading');
+            this.updateStatus('Finalizando configuración...', 'Preparando herramientas para captura', 'loading');
             await new Promise(resolve => setTimeout(resolve, 300));
-            this.updateStatus('Modelos precargados', '', 'ready');
-            this.stateManager.updateCaptureState({ isLoading: false });
+            this.updateStatus('Reconocimiento preparado', '', 'ready');
+            if (this.stateManager) {
+                this.stateManager.updateCaptureState({ isLoading: false });
+            }
             this.emitReadyEvent();
-            this.logger.state('MODELOS_PRECARGADOS_EXITOSAMENTE', { loadTime: Math.round(loadTime) });
             return { success: true, message: 'Models preloaded successfully' };
         }
         catch (error) {
-            this.logger.error('Error al precargar modelos:', error);
-            this.updateStatus('Error al cargar modelos', 'No se pudieron descargar los recursos necesarios', 'error');
-            this.stateManager.updateCaptureState({ isLoading: false });
+            this.updateStatus('Error de configuración', 'No se pudieron preparar las herramientas necesarias', 'error');
+            if (this.stateManager) {
+                this.stateManager.updateCaptureState({ isLoading: false });
+            }
             return { success: false, error: error.message };
         }
     }
     async getCameraInfo() {
-        return this.cameraService.getCameraInfo();
+        const readyCheck = this.isComponentReady();
+        if (!readyCheck.ready) {
+            return {
+                availableCameras: [],
+                selectedCameraId: null,
+                deviceType: 'desktop',
+                isMultipleCamerasAvailable: false,
+                preferredFacing: null,
+                error: readyCheck.message
+            };
+        }
+        try {
+            return await this.cameraService.getCameraInfo();
+        }
+        catch (error) {
+            return {
+                availableCameras: [],
+                selectedCameraId: null,
+                deviceType: 'desktop',
+                isMultipleCamerasAvailable: false,
+                preferredFacing: null,
+                error: error.message
+            };
+        }
     }
     async setPreferredCamera(camera) {
-        this.preferredCamera = camera;
-        this.serviceContainer.updateConfig({ preferredCamera: camera });
-        await this.cameraService.enumerateDevices();
-        const captureState = this.stateManager.getCaptureState();
-        if (captureState.isVideoActive) {
-            const selectedCameraId = this.cameraService.getSelectedCameraId();
-            if (selectedCameraId) {
-                await this.cameraService.switchCamera(selectedCameraId);
+        const readyCheck = this.isComponentReady();
+        if (!readyCheck.ready) {
+            return {
+                success: false,
+                error: readyCheck.message,
+                selectedCamera: null,
+                availableCameras: 0
+            };
+        }
+        try {
+            this.preferredCamera = camera;
+            this.serviceContainer.updateConfig({ preferredCamera: camera });
+            await this.cameraService.enumerateDevices();
+            await this.updateCameraInfoWithAutofocus();
+            const captureState = this.stateManager.getCaptureState();
+            if (captureState.isVideoActive) {
+                const selectedCameraId = this.cameraService.getSelectedCameraId();
+                if (selectedCameraId) {
+                    await this.cameraService.switchCamera(selectedCameraId);
+                }
             }
+            return {
+                success: true,
+                selectedCamera: this.cameraService.getSelectedCameraId(),
+                availableCameras: this.cameraService.getAvailableCameras().length
+            };
+        }
+        catch (error) {
+            return {
+                success: false,
+                error: error.message,
+                selectedCamera: null,
+                availableCameras: 0
+            };
         }
-        return {
-            success: true,
-            selectedCamera: this.cameraService.getSelectedCameraId(),
-            availableCameras: this.cameraService.getAvailableCameras().length
-        };
     }
     async setCaptureDelay(delay) {
         if (delay < 0 || delay > 10000) {
-            throw new Error('Capture delay must be between 0 and 10000 milliseconds');
+            return {
+                success: false,
+                error: 'Capture delay must be between 0 and 10000 milliseconds',
+                captureDelay: this.captureDelay
+            };
         }
+        // Allow setting capture delay even during initialization
         this.captureDelay = delay;
-        this.serviceContainer.updateConfig({ captureDelay: delay });
+        if (this.serviceContainer) {
+            this.serviceContainer.updateConfig({ captureDelay: delay });
+        }
         return {
             success: true,
             captureDelay: this.captureDelay
         };
     }
     async getCaptureDelay() {
+        // Always allow getting capture delay, even during initialization
         return this.captureDelay;
     }
-    async setTorchEnabled(enabled) {
-        const torchEnabled = await this.cameraService.setTorchEnabled(enabled, this.videoStream);
-        return {
-            success: torchEnabled,
-            enabled: torchEnabled ? enabled : false
-        };
-    }
-    async focusAtPoint(x, y) {
-        const focused = await this.cameraService.focusAtPoint(x, y, this.videoStream);
-        return {
-            success: focused,
-            coordinates: { x, y }
-        };
-    }
     // DETECTION METHODS
     async startDetection() {
-        this.logger.state('INICIANDO_DETECCION');
         try {
             // Paso 1: Verificar y cargar modelos si es necesario
             if (!this.detectionService.isModelLoaded()) {
                 const loadStartTime = performance.now();
-                this.updateStatus('Cargando modelo de detección...', 'Descargando red neuronal para reconocimiento', 'loading');
+                this.updateStatus('Preparando reconocimiento...', 'Configurando detección de documentos', 'loading');
                 this.stateManager.updateCaptureState({ isLoading: true });
                 await this.detectionService.loadModel();
-                this.updateStatus('Cargando clasificador...', 'Preparando modelo de clasificación de documentos', 'loading');
+                this.updateStatus('Optimizando detección...', 'Configurando reconocimiento de documentos', 'loading');
                 await this.detectionService.loadClassificationModel();
                 const loadEndTime = performance.now();
                 const loadTime = loadEndTime - loadStartTime;
@@ -429,16 +621,21 @@ export class JaakStamps {
                 if (this.debug) {
                     this.recordOnnxPerformance(loadTime, 0);
                 }
-                this.logger.state('MODELOS_CARGADOS_EN_DETECCION', { loadTime: Math.round(loadTime) });
             }
             // Paso 2: Detectar y configurar dispositivos
-            this.updateStatus('Detectando cámaras...', 'Buscando dispositivos de captura disponibles', 'loading');
+            this.updateStatus('Configurando cámara...', 'Buscando dispositivos disponibles', 'loading');
             await this.cameraService.enumerateDevices();
+            await this.updateCameraInfoWithAutofocus();
             // Paso 3: Configurar cámara seleccionada
-            this.updateStatus('Configurando cámara...', 'Estableciendo resolución y parámetros óptimos', 'loading');
+            this.updateStatus('Ajustando cámara...', 'Configurando calidad de imagen', 'loading');
             const stream = await this.cameraService.setupCamera();
             // Paso 4: Inicializar video y ocultar estado inmediatamente
-            this.updateStatus('Captura activa', 'Buscando documento en el marco de captura', 'active');
+            if (this.useDocumentDetector) {
+                this.updateStatus('Captura activa', 'Buscando documento en el marco de captura', 'active');
+            }
+            else {
+                this.updateStatus('Captura activa', 'Posicione su documento y use el botón para capturar', 'active');
+            }
             await this.initializeVideoStream(stream);
             // Paso 5: Calibrar máscara
             if (this.detectionContainer) {
@@ -449,11 +646,14 @@ export class JaakStamps {
             // Finalizar e iniciar captura
             this.startTime = Date.now();
             this.stateManager.updateCaptureState({ isLoading: false });
+            // Mostrar botón manual si el detector está deshabilitado
+            if (!this.useDocumentDetector) {
+                this.showManualCaptureButton = true;
+            }
             this.detectFrame();
         }
         catch (err) {
-            this.logger.error('Error al inicializar detección:', err);
-            this.updateStatus('Error al iniciar captura', 'No se pudo completar la inicialización', 'error');
+            this.updateStatus('Error al iniciar', 'No se pudo preparar la captura', 'error');
             this.stateManager.updateCaptureState({ isLoading: false });
         }
     }
@@ -463,10 +663,6 @@ export class JaakStamps {
             this.videoStream = stream;
             const isRear = this.cameraService.isRearCamera(stream);
             this.shouldMirrorVideo = !isRear;
-            this.logger.state('CAMARA_CONFIGURADA', {
-                isRearCamera: isRear,
-                shouldMirrorVideo: this.shouldMirrorVideo
-            });
             return new Promise((resolve) => {
                 this.videoRef.onloadedmetadata = async () => {
                     await this.videoRef.play();
@@ -485,15 +681,28 @@ export class JaakStamps {
             const captureState = this.stateManager.getCaptureState();
             if (!this.videoRef || !this.detectionContainer || !this.detectionService.isModelLoaded())
                 return;
+            // Show manual capture button when document detector is disabled
+            if (!this.useDocumentDetector) {
+                this.showManualCaptureButton = true;
+                // Continue the loop for UI updates but skip detection logic
+                if (captureState.step !== 'completed') {
+                    this.animationId = requestAnimationFrame(() => this.detectFrame());
+                }
+                return;
+            }
+            else {
+                this.showManualCaptureButton = false;
+            }
             if (captureState.isDetectionPaused) {
                 if (captureState.step !== 'completed') {
                     this.animationId = requestAnimationFrame(() => this.detectFrame());
                 }
                 return;
             }
-            // Frame skipping for performance
+            // Adaptive frame skipping for performance
             this.frameSkipCounter++;
-            if (this.frameSkipCounter <= this.FRAME_SKIP) {
+            const currentFrameSkip = this.getAdaptiveFrameSkip();
+            if (this.frameSkipCounter <= currentFrameSkip) {
                 if (captureState.step !== 'completed') {
                     this.animationId = requestAnimationFrame(() => this.detectFrame());
                 }
@@ -569,7 +778,6 @@ export class JaakStamps {
             }
         }
         catch (e) {
-            this.logger.error('Error en inferencia de modelo:', e);
             const captureState = this.stateManager.getCaptureState();
             if (captureState.step !== 'completed') {
                 setTimeout(() => this.detectFrame(), 100);
@@ -596,6 +804,8 @@ export class JaakStamps {
             clearInterval(this.performanceUpdateInterval);
             this.performanceUpdateInterval = undefined;
         }
+        // Clear canvas pool
+        this.canvasPool = [];
         this.detectionBoxes = [];
         this.alignmentStartTime = undefined;
         this.hasDocumentDetected = false;
@@ -610,14 +820,8 @@ export class JaakStamps {
             step: 'front',
             isCapturing: false
         };
-        const cameraInfo = this.cameraService?.getCameraInfo() || {
-            availableCameras: [],
-            isMultipleCamerasAvailable: false,
-            selectedCameraId: null,
-            deviceType: 'desktop',
-            preferredFacing: null
-        };
-        return (h("div", { key: '9d4d77042218ab3d0bc4fb1ce879db09dc3e78b4', class: "detector-container" }, h("div", { key: '51ac8ccb1275637282b038ad8364d19f14ef61b1', class: "video-container" }, h("video", { key: 'a34f0481da20ec5b7b62b21aa275ec5f6dfec5d1', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: '43b71dfe3eaf20ffa66a4139e24b1af6a2074631', ref: el => this.detectionContainer = el, class: `detection-overlay ${this.shouldMirrorVideo ? 'mirror' : ''}` }, this.debug && this.detectionBoxes.map((box, index) => (h("div", { key: index, class: "detection-box", style: {
+        const cameraInfo = this.cameraInfoWithAutofocus;
+        return (h("div", { key: 'e0b32b1b41b58e3a58b552199384080e8f2c069b', class: "detector-container" }, h("div", { key: '03c77af311ff12d936994d629d58550cbaae190c', class: "video-container" }, h("video", { key: '94f15b34f34367a10d17816a31cd147adb57bc90', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: '982be192792dfaf644eb173bfee9b26ebd229288', ref: el => this.detectionContainer = el, class: `detection-overlay ${this.shouldMirrorVideo ? 'mirror' : ''}` }, this.debug && this.detectionBoxes.map((box, index) => (h("div", { key: index, class: "detection-box", style: {
                 position: 'absolute',
                 left: `${box.x}px`,
                 top: `${box.y}px`,
@@ -626,9 +830,9 @@ export class JaakStamps {
                 border: '2px solid #32406C',
                 pointerEvents: 'none',
                 boxSizing: 'border-box'
-            } })))), this.isMaskReady && (h("div", { key: 'c2596f8cabb227e3ea3b082495f52b141cb1690f', class: "overlay-mask" }, h("div", { key: 'ba1ea39b5df1cd312a9bd9410b7225a29cfb8a29', class: "card-outline" }, h("div", { key: '6ce4d4d969d5f3fbcf75a4eb285f61d434c5633b', class: "side side-top" }), h("div", { key: '36653ecc4fcda25dfc84bc4d1f4c4c5dfb71ced7', class: "side side-right" }), h("div", { key: '8b108fa8fb370b229a0d1a77cb1ff044319a8f75', class: "side side-bottom" }), h("div", { key: 'a7aa3b45c065a50445aafd5c3ccefb57b0c9c769', class: "side side-left" }), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: 'b94b92273e12a019238e11ae57f21e140f13c3f1', class: "guide-text" }, "Alinee su identificaci\u00F3n con el marco"))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '144c3741003ec0cc148bb6ce92012d7b3cd110c8', class: "skip-section" }, h("div", { key: 'f0a984a6b75afa374c5d47da9d53e39f98071da0', class: "skip-explanation" }, "Si tu documento no tiene lado trasero, da clic en el bot\u00F3n para continuar con el proceso"), h("button", { key: '57ac30d776e30709aab6e0a621cef889da3cc677', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
+            } })))), this.isMaskReady && (h("div", { key: 'f5212ff70db65d2b836a3ac456a1701701630660', class: "overlay-mask" }, h("div", { key: '5080217f4962c2c7152def39cc978ba1c40a3a1c', class: "card-outline" }, h("div", { key: 'd37f1ca8723d79b10d1c6a3afaf54e2f2657ae79', class: "side side-top" }), h("div", { key: 'c5bb4f7d646a991f43598688ffa909c04697bb06', class: "side side-right" }), h("div", { key: '4a5040b4a236367dcdf72f4e72d497b8b6dee6c0', class: "side side-bottom" }), h("div", { key: 'c74ecef56eee8e92cd9491d693fa89a6c01bdbbd', class: "side side-left" })), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '2a2932b0c03835193ebf86ddb5f13173b1dba367', class: "guide-text" }, this.getGuideText(captureState.step))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '41fcf2d79106d3ed928fc2842cb6a6725ba4d4f6', class: "back-capture-section" }, h("div", { key: '98dbe1bbe454bad42c3e155247f25a9151aaf1f9', class: "back-capture-buttons" }, !this.useDocumentDetector && (h("button", { key: '01693bc0d6915a4d02f318268020dfbcf3a70b94', class: "capture-button primary-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: captureState.isCapturing }, captureState.isCapturing ? 'Capturando...' : 'Capturar Reverso')), h("button", { key: '0a4ba55cbbea867b936a83a16a622a3c36a225f9', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
             ? `Saltar reverso (${this.backDocumentTimerRemaining}s)`
-            : 'Saltar reverso'))), captureState.isVideoActive && (h("div", { key: 'bd45628707e0169317ed3dd4247e1056d7046104', class: "camera-controls" }, h("button", { key: 'e750fbf4d5d76d9e9596823bb2b86801ef19e485', class: `camera-selector-button ${this.isSwitchingCamera ? 'loading' : ''}`, onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara", disabled: this.isSwitchingCamera }, this.isSwitchingCamera ? (h("div", { class: "button-spinner" })) : ('Cámaras')))), this.showCameraSelector && cameraInfo.availableCameras.length > 0 && (h("div", { key: '40ada780a8ea13aeeaee9cb39bc6496f69f2679d', class: "camera-selector-dropdown" }, h("div", { key: '3a920bb02ba024f0359513f10544bf0528ecee6d', class: "camera-selector-header" }, h("span", { key: 'e5efd478a602b13821ba53cb9a7a59d1b4a71178' }, "Seleccionar C\u00E1mara"), h("button", { key: '2df6cc11e162be74862029e33815927e3fa8f2f8', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: '06934642dff134c9e1a6872f935a5892a9c7b835', class: "camera-list" }, cameraInfo.availableCameras.map((camera) => (h("button", { key: camera.id, class: `camera-option ${cameraInfo.selectedCameraId === camera.id ? 'selected' : ''}`, onClick: () => this.handleCameraSwitch(camera.id), type: "button" }, h("span", { class: "camera-label" }, camera.label || `Cámara ${cameraInfo.availableCameras.indexOf(camera) + 1}`), cameraInfo.selectedCameraId === camera.id && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: '8d5ede287c2efb0ebe418bee8dc7fb310443c991', class: "device-info" }, h("small", { key: 'b7dd10565113694b09f01ab28ffa29262ae1d2bc' }, "Dispositivo: ", cameraInfo.deviceType)))))), captureState.isCapturing && (h("div", { key: '2f9e549e6c0c56d4db5835e58361fb17bba6cf90', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: 'a6ef0ed127f23e9d764896ed743ca8d8454851a6', class: "flip-animation" }, h("div", { key: '0b04411f88a634bb3243b00ca2d5a45fd6962dea', class: "id-card-icon" }), h("div", { key: '9327be58879b407cea87f455989406e58302e9d1', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: 'bd268578b5003e99256e3340b4a9a6fb7656be64', class: "success-animation" }, h("div", { key: '064e0a5b9851de14bc6829f028e7ea7161fd1633', class: "check-icon" }), h("div", { key: 'bdcd94a8806399e396e218a359c10b11d05f38d6', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: '3d9af617376c16e44e065873919c3d90ff46110a', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: 'be7b56decfd6f12dcca46b2a9456480e3d5ac00e', class: "status-spinner" })), h("div", { key: '5fe9850883cb749cebaa18c3e9c13ca21325e373', class: "status-content" }, h("div", { key: '43fdb50691e4b98e56126af1a129f625061128bf', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: 'b76cbfa4a0349421fcd535d3fd8bf40c89ca3aef', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: 'eddefb464af0487ab9ab2a0f76dccbb6a2092e51', class: "performance-monitor" }, h("div", { key: '7b7d93b56cb4cd4fbb1bdde89c6150b282fa805e', class: "performance-expanded" }, h("div", { key: 'f302e8b9d985fb8cad53c4c4e0d37a3bf5a63261', class: "metrics-row" }, h("div", { key: 'e8d8f2420ee8643a7f454d38065c75b5be598f77', class: "metric-compact" }, h("span", { key: '6e52eb5bb06e0df57e61774de38c31349f45e22b', class: "metric-label" }, "FPS"), h("span", { key: '6636f9cea20c49b49c17db86188e2f6b214c45c3', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: 'afa1d9dec05b14256a1b1fcec8638b8c21a56e37', class: "metric-compact" }, h("span", { key: '9c55e30f5d01582648bacc1fb38ca1990485a591', class: "metric-label" }, "MEM"), h("span", { key: 'ca263601e8715027f95ffb2d5413a643dc570cf2', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: '03caf19961fd01b7781484d49d8121b1e78c161f', class: "metrics-row" }, h("div", { key: 'bffb08f01f703411f7c8605e4f8d95b1c37b5c0f', class: "metric-compact" }, h("span", { key: '9b92279b3253cc669412733facb3751f4344d69f', class: "metric-label" }, "INF"), h("span", { key: '3234d4150e2e1479e3b552767af8123e69911d6c', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: '77082d2669db53f19fb50b3bbfa1ebefb0b86ff4', class: "metric-compact" }, h("span", { key: 'cc6ef96c72c800ba36dab2a388f1de863b2dacd5', class: "metric-label" }, "FRAME"), h("span", { key: 'e2bb4b7351869a76e810f8bbf20d805154495e35', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: '5700d7ef839fa77686299d79445203090dc8079f', class: "metrics-row" }, h("div", { key: 'a2999a035fccb7f250c01b084075490678513c87', class: "metric-compact" }, h("span", { key: '3677d58665996fa5969507dbaff9e956b2ea54ee', class: "metric-label" }, "DET"), h("span", { key: 'c584312438b339c82a3bdc33f00fb985ff2a6f55', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: '58866219f213bf8607083f30be2d5ca5d0515cea', class: "metric-compact" }, h("span", { key: 'd90b450051331347f219b6c0f197536d0dcee9b7', class: "metric-label" }, "RATE"), h("span", { key: 'f6e6cd7948e06014e5a0416e4e81394fa36ec61d', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: 'c1d0194f181a0082cc1aa5452de382908da61b65', class: "watermark" }, h("img", { key: 'e04d35f3c79a2b4a3922ab5b0f102220171fa7c0', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
+            : 'Saltar reverso')))), captureState.isVideoActive && (h("div", { key: '1db208a53dea37211bdd88254e575142b7abf91f', class: "camera-controls" }, h("button", { key: '90755839358f997c3ce2f4c36a8d17d39ea5f8ad', class: `camera-selector-button ${this.isSwitchingCamera ? 'loading' : ''}`, onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara", disabled: this.isSwitchingCamera }, this.isSwitchingCamera ? (h("div", { class: "button-spinner" })) : ('Cámaras')))), this.showCameraSelector && cameraInfo.availableCameras.length > 0 && (h("div", { key: 'ef7889ab82f9eaabcabec3e3dc3ebb7850818dd4', class: "camera-selector-dropdown" }, h("div", { key: 'e28fb005316a742318be3cf8582f520392b71bba', class: "camera-selector-header" }, h("span", { key: '97338030b1aedb50c5f5a588ea03c0f19bcb0ddd' }, "Seleccionar C\u00E1mara"), h("button", { key: '1537c907dfab17c232a256f9fc9210cbd0125cc6', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: '509178119e6eed5fe0a6ea287904a53bd9fbecbc', class: "camera-list" }, cameraInfo.availableCameras.map((camera) => (h("button", { key: camera.id, class: `camera-option ${cameraInfo.selectedCameraId === camera.id ? 'selected' : ''}`, onClick: () => this.handleCameraSwitch(camera.id), type: "button" }, h("span", { class: "camera-label" }, camera.label || `Cámara ${cameraInfo.availableCameras.indexOf(camera) + 1}`, camera.hasAutofocus && (h("span", { class: "autofocus-icon", title: "Autofoco disponible" }, "\u29BF"))), cameraInfo.selectedCameraId === camera.id && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: '485f7e1a97c43ed280a106bde3c6ee910625025c', class: "device-info" }, h("small", { key: 'd76edba943f4e06c14024923496555fa1fe6d845' }, "Dispositivo: ", cameraInfo.deviceType)))), this.showManualCaptureButton && captureState.step === 'front' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: 'c5184dd93aa41cff61b88ea2046b481efc87c1f2', class: "manual-capture-section" }, h("button", { key: '6e45d9a0fec60469eb926ff353cb1a440d59f5fe', class: "manual-capture-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: captureState.isCapturing }, captureState.isCapturing ? 'Capturando...' : 'Capturar Frente'))))), captureState.isCapturing && (h("div", { key: '9e296a942ba51cc1fd152e76ae406620c84ed721', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: '517db50f7273788d94d5e6db6c40f65e00e18784', class: "flip-animation" }, h("div", { key: 'fbf6a26c4cc0539bd16b45899d19984af3449610', class: "id-card-icon" }), h("div", { key: 'fb3a201864d04531a078074458aa6e7f6580d565', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: '10c694e233d26523d538ff0d2edbf6dcfb8e37c8', class: "success-animation" }, h("div", { key: '87e545650825ab805e887667281ecdf8bdb34c45', class: "check-icon" }), h("div", { key: '359da71f391d68e9437b749b949ee90685b96b3f', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: '7c5533bb875eb3d9cdcc6cfdfc20e4d5bd98d103', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: 'f32df46ab83279387de606eadf53cd4a4009f449', class: "status-spinner" })), h("div", { key: 'dd640de5a3b64f5f99363318e2fc70e32ccbc7db', class: "status-content" }, h("div", { key: '618c0ab9cb0a24b0af3f6946052beab0d660fe6d', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: 'e52c2a4945c7f5a190a446ac588aa1668c21f26d', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: '61cea10bc3438fb74aa176d71c4238b070cb0f09', class: "performance-monitor" }, h("div", { key: '44f6b1accb56d99a236b22c0769f870638d9c768', class: "performance-expanded" }, h("div", { key: '6febc85e319752b0aebc0a4e4050ea6d597375a7', class: "metrics-row" }, h("div", { key: '96b81895ad3cd742c96308ed53a2126af76eb619', class: "metric-compact" }, h("span", { key: '774a11c6fed6a87db7673b018b3cdc378c5252ef', class: "metric-label" }, "FPS"), h("span", { key: 'cb866dcbea661e5f715b82c4dd760f786fd5bb2a', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: 'a935aaadb83ea400bfaa984d1d845bdfd87becc8', class: "metric-compact" }, h("span", { key: 'ffacaa2cb7838403a297145b70586e255cc845c7', class: "metric-label" }, "MEM"), h("span", { key: 'a1d7a7abec97dc0544d50b11b372f699f750b76f', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: 'bb3d156a46569a8c290bc518c42ec7957bc5b94e', class: "metrics-row" }, h("div", { key: '4cadd8f845e4c12120ed549e4a73e02c6cbd9257', class: "metric-compact" }, h("span", { key: '1fc5661222f495b79fd7eb126e04f52eecab6fb3', class: "metric-label" }, "INF"), h("span", { key: 'eca1f59d1c41ab99158eec81592bc7150bfeabe1', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: 'f708e2757adcb03e633111d96bd6786fb6b80ea6', class: "metric-compact" }, h("span", { key: 'a13099ded64180996d6f65bf215483ba83daccbc', class: "metric-label" }, "FRAME"), h("span", { key: '2765cd1f7c1a49df9de64639cc1b777c79f89f4c', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: '13aaf85a1b4b66294c4204f02d956b64665aa766', class: "metrics-row" }, h("div", { key: '40012f3f646d70c535a606ebbe581a2fe6fd2e50', class: "metric-compact" }, h("span", { key: '03f8b17746fe404485820d06a50173678db2fd25', class: "metric-label" }, "DET"), h("span", { key: 'c4f87430f142355054d9361330d6a5d508974b70', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: 'cf366a41d7f7cda6046c32cc7c514eb7b46b05d1', class: "metric-compact" }, h("span", { key: '925e7de15b96ba4dbbcdbf8a9f0e3173bae49573', class: "metric-label" }, "RATE"), h("span", { key: '9701e60c7793f2c205f3c9ffd254b6a115b8a68c', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: '636aeb9b2b8dd992d8a28a8db44b213e12514096', class: "watermark" }, h("img", { key: '0407b550d962a6113e05ad75e25a1a1bbd76d9ce', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
     }
     // Utility methods
     updateDetectionBoxes(boxes) {
@@ -709,35 +913,18 @@ export class JaakStamps {
         if (allSidesAligned && bestBox) {
             cardOutline?.classList.add('perfect-match');
             corners?.forEach(corner => corner.classList.add('perfect-match'));
-            // Debug logging
-            this.logger.state('CAPTURE_EVALUATION', {
-                allSidesAligned: true,
-                hasScreenshotTaken: this.hasScreenshotTaken,
-                captureDelay: this.captureDelay,
-                alignmentStartTime: this.alignmentStartTime
-            });
             if (!this.hasScreenshotTaken) {
                 const currentTime = Date.now();
                 // Initialize alignment start time if not set
                 if (!this.alignmentStartTime) {
                     this.alignmentStartTime = currentTime;
-                    this.logger.state('ALIGNMENT_TIMER_STARTED', { startTime: currentTime });
                 }
                 // Check if document has been aligned for the configured delay
                 const alignmentDuration = currentTime - this.alignmentStartTime;
-                this.logger.state('ALIGNMENT_DURATION_CHECK', {
-                    alignmentDuration,
-                    captureDelay: this.captureDelay,
-                    readyToCapture: alignmentDuration >= this.captureDelay
-                });
                 if (alignmentDuration >= this.captureDelay) {
-                    this.logger.state('TRIGGERING_CAPTURE', {
-                        alignmentDuration,
-                        captureDelay: this.captureDelay
-                    });
                     this.lastDetectedBox = bestBox;
-                    this.takeScreenshot().catch(error => {
-                        this.logger.error('Error al tomar captura de pantalla:', error);
+                    this.takeScreenshot().catch(() => {
+                        // Handle screenshot error silently
                     });
                     this.hasScreenshotTaken = true;
                     this.alignmentStartTime = undefined;
@@ -760,24 +947,122 @@ export class JaakStamps {
             }
         }
     }
+    async takeManualScreenshot() {
+        if (!this.videoRef)
+            return;
+        // When using manual capture, use mask coordinates for cropping
+        await this.takeScreenshotWithMaskCoordinates();
+    }
+    async takeScreenshotWithMaskCoordinates() {
+        if (!this.videoRef || !this.detectionContainer)
+            return;
+        this.stateManager.updateCaptureState({ isCapturing: true });
+        this.triggerCaptureAnimation();
+        // Use pooled canvas for optimization
+        const captureCanvas = this.getPooledCanvas(this.videoRef.videoWidth, this.videoRef.videoHeight);
+        const captureCtx = captureCanvas.getContext('2d', { alpha: false });
+        captureCtx.clearRect(0, 0, captureCanvas.width, captureCanvas.height);
+        captureCtx.drawImage(this.videoRef, 0, 0, captureCanvas.width, captureCanvas.height);
+        // Calculate mask coordinates for cropping
+        const container = this.detectionContainer.parentElement;
+        const containerRect = container.getBoundingClientRect();
+        // Get mask dimensions from CSS properties
+        const maskWidthPercent = parseFloat(this.el.style.getPropertyValue('--mask-width').replace('%', '')) || 90;
+        const maskHeightPercent = parseFloat(this.el.style.getPropertyValue('--mask-height').replace('%', '')) || 56.25;
+        const maskCenterXPercent = parseFloat(this.el.style.getPropertyValue('--mask-center-x').replace('%', '')) || 50;
+        const maskCenterYPercent = parseFloat(this.el.style.getPropertyValue('--mask-center-y').replace('%', '')) || 50;
+        // Convert percentages to actual video coordinates
+        const videoWidth = this.videoRef.videoWidth;
+        const videoHeight = this.videoRef.videoHeight;
+        const videoAspectRatio = videoWidth / videoHeight;
+        const containerAspectRatio = containerRect.width / containerRect.height;
+        let displayedVideoWidth, displayedVideoHeight;
+        let videoOffsetX = 0, videoOffsetY = 0;
+        if (videoAspectRatio > containerAspectRatio) {
+            displayedVideoWidth = containerRect.width;
+            displayedVideoHeight = containerRect.width / videoAspectRatio;
+            videoOffsetY = (containerRect.height - displayedVideoHeight) / 2;
+        }
+        else {
+            displayedVideoHeight = containerRect.height;
+            displayedVideoWidth = containerRect.height * videoAspectRatio;
+            videoOffsetX = (containerRect.width - displayedVideoWidth) / 2;
+        }
+        // Calculate mask coordinates in video space
+        const maskWidthInContainer = (maskWidthPercent / 100) * containerRect.width;
+        const maskHeightInContainer = (maskHeightPercent / 100) * containerRect.height;
+        const maskCenterXInContainer = (maskCenterXPercent / 100) * containerRect.width;
+        const maskCenterYInContainer = (maskCenterYPercent / 100) * containerRect.height;
+        // Convert to video coordinates
+        const scaleX = videoWidth / displayedVideoWidth;
+        const scaleY = videoHeight / displayedVideoHeight;
+        const maskCenterXInVideo = (maskCenterXInContainer - videoOffsetX) * scaleX;
+        const maskCenterYInVideo = (maskCenterYInContainer - videoOffsetY) * scaleY;
+        const maskWidthInVideo = maskWidthInContainer * scaleX;
+        const maskHeightInVideo = maskHeightInContainer * scaleY;
+        // Calculate crop coordinates
+        const cropX = Math.max(0, maskCenterXInVideo - (maskWidthInVideo / 2) - this.cropMargin);
+        const cropY = Math.max(0, maskCenterYInVideo - (maskHeightInVideo / 2) - this.cropMargin);
+        const cropWidth = Math.min(maskWidthInVideo + (2 * this.cropMargin), videoWidth - cropX);
+        const cropHeight = Math.min(maskHeightInVideo + (2 * this.cropMargin), videoHeight - cropY);
+        // Use pooled canvas for cropped version
+        const croppedCanvas = this.getPooledCanvas(cropWidth, cropHeight);
+        const croppedCtx = croppedCanvas.getContext('2d', { alpha: false });
+        croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
+        croppedCtx.drawImage(this.videoRef, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
+        const captureState = this.stateManager.getCaptureState();
+        if (captureState.step === 'front') {
+            this.stateManager.setCapturedImages({
+                front: {
+                    fullFrame: captureCanvas.toDataURL('image/png'),
+                    cropped: croppedCanvas.toDataURL('image/png')
+                }
+            });
+            // Check if document classification is enabled (independent of detector)
+            if (this.useDocumentClassification) {
+                const classification = await this.detectionService.classifyDocument(croppedCanvas);
+                if (classification && classification.class === 'passport') {
+                    this.completeProcess(true);
+                    this.returnCanvasToPool(captureCanvas);
+                    this.returnCanvasToPool(croppedCanvas);
+                    return;
+                }
+            }
+            this.stateManager.updateCaptureState({
+                step: 'back',
+                isDetectionPaused: true,
+                showFlipAnimation: true
+            });
+            setTimeout(() => {
+                this.stateManager.updateCaptureState({
+                    showFlipAnimation: false,
+                    isDetectionPaused: false
+                });
+                this.startBackDocumentTimer();
+            }, 3000);
+        }
+        else if (captureState.step === 'back') {
+            this.stateManager.setCapturedImages({
+                back: {
+                    fullFrame: captureCanvas.toDataURL('image/png'),
+                    cropped: croppedCanvas.toDataURL('image/png')
+                }
+            });
+            this.completeProcess(false);
+        }
+        // Return canvases to pool after use
+        this.returnCanvasToPool(captureCanvas);
+        this.returnCanvasToPool(croppedCanvas);
+    }
     async takeScreenshot() {
         if (!this.videoRef || !this.lastDetectedBox)
             return;
-        this.logger.state('INICIANDO_CAPTURA', {
-            captureStep: this.stateManager.getCaptureState().step,
-            detectedBox: this.lastDetectedBox,
-            videoResolution: {
-                width: this.videoRef.videoWidth,
-                height: this.videoRef.videoHeight
-            }
-        });
         this.stateManager.updateCaptureState({ isCapturing: true });
         this.triggerCaptureAnimation();
-        // Create capture canvas
-        const captureCanvas = document.createElement('canvas');
-        captureCanvas.width = this.videoRef.videoWidth;
-        captureCanvas.height = this.videoRef.videoHeight;
+        // Use pooled canvas for optimization
+        const captureCanvas = this.getPooledCanvas(this.videoRef.videoWidth, this.videoRef.videoHeight);
         const captureCtx = captureCanvas.getContext('2d', { alpha: false });
+        captureCtx.clearRect(0, 0, captureCanvas.width, captureCanvas.height);
         captureCtx.drawImage(this.videoRef, 0, 0, captureCanvas.width, captureCanvas.height);
         // Calculate crop coordinates
         const INPUT_SIZE = 320;
@@ -787,11 +1072,10 @@ export class JaakStamps {
         const cropY = Math.max(0, (this.lastDetectedBox.y * scaleY) - this.cropMargin);
         const cropWidth = Math.min((this.lastDetectedBox.w * scaleX) + (2 * this.cropMargin), this.videoRef.videoWidth - cropX);
         const cropHeight = Math.min((this.lastDetectedBox.h * scaleY) + (2 * this.cropMargin), this.videoRef.videoHeight - cropY);
-        // Create cropped version
-        const croppedCanvas = document.createElement('canvas');
-        croppedCanvas.width = cropWidth;
-        croppedCanvas.height = cropHeight;
+        // Use pooled canvas for cropped version
+        const croppedCanvas = this.getPooledCanvas(cropWidth, cropHeight);
         const croppedCtx = croppedCanvas.getContext('2d', { alpha: false });
+        croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
         croppedCtx.drawImage(this.videoRef, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
         const captureState = this.stateManager.getCaptureState();
         if (captureState.step === 'front') {
@@ -805,7 +1089,6 @@ export class JaakStamps {
             if (this.useDocumentClassification) {
                 const classification = await this.detectionService.classifyDocument(croppedCanvas);
                 if (classification && classification.class === 'passport') {
-                    this.logger.state('PASAPORTE_DETECTADO_SALTANDO_REVERSO', { classification: classification?.class });
                     this.completeProcess(true);
                     return;
                 }
@@ -832,6 +1115,9 @@ export class JaakStamps {
             });
             this.completeProcess(false);
         }
+        // Return canvases to pool after use
+        this.returnCanvasToPool(captureCanvas);
+        this.returnCanvasToPool(croppedCanvas);
     }
     triggerCaptureAnimation() {
         const cardOutline = this.el.shadowRoot?.querySelector('.card-outline');
@@ -860,11 +1146,6 @@ export class JaakStamps {
         setTimeout(() => {
             this.stateManager.updateCaptureState({ showSuccessAnimation: false });
         }, 3000);
-        this.logger.state('PROCESO_COMPLETADO', {
-            skippedBack,
-            totalImages: capturedImages.metadata.totalImages,
-            timestamp: new Date().toISOString()
-        });
     }
     stopDetection() {
         if (this.animationId) {
@@ -873,7 +1154,6 @@ export class JaakStamps {
         }
         this.clearBackDocumentTimer();
         this.detectionBoxes = [];
-        this.logger.state('DETECTOR_DETENIDO', { timestamp: Date.now() });
     }
     startBackDocumentTimer() {
         if (!this.enableBackDocumentTimer)
@@ -902,6 +1182,15 @@ export class JaakStamps {
             return; // Don't toggle if switching camera
         this.showCameraSelector = !this.showCameraSelector;
     }
+    async updateCameraInfoWithAutofocus() {
+        try {
+            const cameraInfo = await this.cameraService.getCameraInfo();
+            this.cameraInfoWithAutofocus = cameraInfo;
+        }
+        catch (error) {
+            // Keep existing state if update fails
+        }
+    }
     async handleCameraSwitch(cameraId) {
         if (this.isSwitchingCamera)
             return; // Prevent multiple simultaneous switches
@@ -909,10 +1198,6 @@ export class JaakStamps {
             // Close the selector immediately when user selects a camera
             this.showCameraSelector = false;
             this.isSwitchingCamera = true;
-            this.logger.state('INICIANDO_CAMBIO_CAMARA', {
-                from: this.cameraService.getSelectedCameraId(),
-                to: cameraId
-            });
             // Stop current video stream
             if (this.videoStream) {
                 this.videoStream.getTracks().forEach(track => track.stop());
@@ -923,21 +1208,17 @@ export class JaakStamps {
             const newStream = await this.cameraService.setupCamera();
             // Update video element
             await this.initializeVideoStream(newStream);
-            this.logger.state('CAMBIO_CAMARA_EXITOSO', {
-                newCameraId: cameraId,
-                isRearCamera: this.cameraService.isRearCamera(newStream)
-            });
+            // Update camera info with autofocus data
+            await this.updateCameraInfoWithAutofocus();
         }
         catch (error) {
-            this.logger.error('Error al cambiar cámara:', error);
             // Try to restore previous camera if switch failed
             try {
                 const fallbackStream = await this.cameraService.setupCamera();
                 await this.initializeVideoStream(fallbackStream);
             }
             catch (fallbackError) {
-                this.logger.error('Error al restaurar cámara anterior:', fallbackError);
-                this.updateStatus('Error al cambiar cámara', 'No se pudo completar el cambio de dispositivo', 'error');
+                this.updateStatus('Error al cambiar cámara', 'No se pudo cambiar el dispositivo', 'error');
             }
         }
         finally {
@@ -978,7 +1259,7 @@ export class JaakStamps {
             this.stateManager.updateCaptureState({ isVideoActive: false, isLoading: false });
         }
         this.isMaskReady = false;
-        this.updateStatus('Sesión finalizada', '', 'ready');
+        this.updateStatus('Captura finalizada', '', 'ready');
         this.detectionBoxes = [];
         this.cleanup();
     }
@@ -989,7 +1270,6 @@ export class JaakStamps {
         this.performanceUpdateInterval = window.setInterval(() => {
             this.updatePerformanceMetrics();
         }, 500);
-        this.logger.debug('Monitor de performance inicializado');
     }
     updatePerformanceMetrics() {
         const currentTime = performance.now();
@@ -1032,6 +1312,66 @@ export class JaakStamps {
         if (detectionsFound > 0) {
             this.performanceMetrics.successfulDetections++;
         }
+        // Update performance history for adaptive frame skipping
+        this.performanceHistory.push(processingTime);
+        if (this.performanceHistory.length > this.PERFORMANCE_HISTORY_SIZE) {
+            this.performanceHistory.shift();
+        }
+    }
+    // Adaptive frame skipping based on performance
+    getAdaptiveFrameSkip() {
+        // Base conditions for high frame skip
+        if (this.consecutiveFailures > 20)
+            return this.MAX_FRAME_SKIP;
+        if (this.performanceMetrics.inferenceTime > 200)
+            return 6;
+        if (this.performanceMetrics.memoryUsage > 200)
+            return 5;
+        // Calculate average processing time
+        if (this.performanceHistory.length > 0) {
+            const avgProcessingTime = this.performanceHistory.reduce((a, b) => a + b, 0) / this.performanceHistory.length;
+            if (avgProcessingTime > 100)
+                return 4;
+            if (avgProcessingTime > 80)
+                return 3;
+            if (avgProcessingTime > 60)
+                return this.BASE_FRAME_SKIP + 1;
+        }
+        // Low memory devices get higher frame skip
+        if (this.performanceMetrics.memoryUsage > 150)
+            return 4;
+        // Performance is good, use base frame skip
+        return this.BASE_FRAME_SKIP;
+    }
+    // Canvas pool management for screenshots
+    getPooledCanvas(width, height) {
+        // Try to find a canvas with matching dimensions
+        const matchingIndex = this.canvasPool.findIndex(canvas => canvas.width === width && canvas.height === height);
+        if (matchingIndex !== -1) {
+            return this.canvasPool.splice(matchingIndex, 1)[0];
+        }
+        // If no matching canvas, try to reuse any canvas and resize
+        if (this.canvasPool.length > 0) {
+            const canvas = this.canvasPool.pop();
+            canvas.width = width;
+            canvas.height = height;
+            return canvas;
+        }
+        // Create new canvas if pool is empty
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        return canvas;
+    }
+    returnCanvasToPool(canvas) {
+        // Only return to pool if not at max capacity
+        if (this.canvasPool.length < this.MAX_CANVAS_POOL_SIZE) {
+            // Clear the canvas before returning to pool
+            const ctx = canvas.getContext('2d');
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            this.canvasPool.push(canvas);
+        }
+        // If pool is full, let the canvas be garbage collected
     }
     static get is() { return "jaak-stamps"; }
     static get encapsulation() { return "shadow"; }
@@ -1147,6 +1487,26 @@ export class JaakStamps {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "useDocumentDetector": {
+                "type": "boolean",
+                "attribute": "use-document-detector",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "preferredCamera": {
                 "type": "string",
                 "attribute": "preferred-camera",
@@ -1238,9 +1598,11 @@ export class JaakStamps {
             "showCameraSelector": {},
             "isSwitchingCamera": {},
             "hasDocumentDetected": {},
+            "cameraInfoWithAutofocus": {},
             "currentStatus": {},
             "performanceData": {},
-            "backDocumentTimerRemaining": {}
+            "backDocumentTimerRemaining": {},
+            "showManualCaptureButton": {}
         };
     }
     static get events() {
@@ -1319,7 +1681,7 @@ export class JaakStamps {
             },
             "startCapture": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
+                    "signature": "() => Promise<{ success: boolean; error?: undefined; } | { success: boolean; error: any; }>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -1327,7 +1689,7 @@ export class JaakStamps {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<{ success: boolean; error?: undefined; } | { success: boolean; error: any; }>"
                 },
                 "docs": {
                     "text": "",
@@ -1336,7 +1698,7 @@ export class JaakStamps {
             },
             "stopCapture": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
+                    "signature": "() => Promise<{ success: boolean; error?: undefined; } | { success: boolean; error: any; }>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -1344,7 +1706,7 @@ export class JaakStamps {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<{ success: boolean; error?: undefined; } | { success: boolean; error: any; }>"
                 },
                 "docs": {
                     "text": "",
@@ -1353,7 +1715,7 @@ export class JaakStamps {
             },
             "resetCapture": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
+                    "signature": "() => Promise<{ success: boolean; error?: undefined; } | { success: boolean; error: any; }>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -1361,7 +1723,7 @@ export class JaakStamps {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<{ success: boolean; error?: undefined; } | { success: boolean; error: any; }>"
                 },
                 "docs": {
                     "text": "",
@@ -1370,7 +1732,7 @@ export class JaakStamps {
             },
             "skipBackCapture": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
+                    "signature": "() => Promise<{ success: boolean; error?: undefined; } | { success: boolean; error: any; }>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -1378,7 +1740,7 @@ export class JaakStamps {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<{ success: boolean; error?: undefined; } | { success: boolean; error: any; }>"
                 },
                 "docs": {
                     "text": "",
@@ -1448,7 +1810,7 @@ export class JaakStamps {
             },
             "setPreferredCamera": {
                 "complexType": {
-                    "signature": "(camera: \"auto\" | \"front\" | \"back\") => Promise<{ success: boolean; selectedCamera: string; availableCameras: number; }>",
+                    "signature": "(camera: \"auto\" | \"front\" | \"back\") => Promise<{ success: boolean; selectedCamera: string; availableCameras: number; error?: undefined; } | { success: boolean; error: any; selectedCamera: any; availableCameras: number; }>",
                     "parameters": [{
                             "name": "camera",
                             "type": "\"auto\" | \"front\" | \"back\"",
@@ -1460,7 +1822,7 @@ export class JaakStamps {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<{ success: boolean; selectedCamera: string; availableCameras: number; }>"
+                    "return": "Promise<{ success: boolean; selectedCamera: string; availableCameras: number; error?: undefined; } | { success: boolean; error: any; selectedCamera: any; availableCameras: number; }>"
                 },
                 "docs": {
                     "text": "",
@@ -1469,7 +1831,7 @@ export class JaakStamps {
             },
             "setCaptureDelay": {
                 "complexType": {
-                    "signature": "(delay: number) => Promise<{ success: boolean; captureDelay: number; }>",
+                    "signature": "(delay: number) => Promise<{ success: boolean; error: string; captureDelay: number; } | { success: boolean; captureDelay: number; error?: undefined; }>",
                     "parameters": [{
                             "name": "delay",
                             "type": "number",
@@ -1481,7 +1843,7 @@ export class JaakStamps {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<{ success: boolean; captureDelay: number; }>"
+                    "return": "Promise<{ success: boolean; error: string; captureDelay: number; } | { success: boolean; captureDelay: number; error?: undefined; }>"
                 },
                 "docs": {
                     "text": "",
@@ -1504,52 +1866,6 @@ export class JaakStamps {
                     "text": "",
                     "tags": []
                 }
-            },
-            "setTorchEnabled": {
-                "complexType": {
-                    "signature": "(enabled: boolean) => Promise<{ success: boolean; enabled: boolean; }>",
-                    "parameters": [{
-                            "name": "enabled",
-                            "type": "boolean",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<{ success: boolean; enabled: boolean; }>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "focusAtPoint": {
-                "complexType": {
-                    "signature": "(x: number, y: number) => Promise<{ success: boolean; coordinates: { x: number; y: number; }; }>",
-                    "parameters": [{
-                            "name": "x",
-                            "type": "number",
-                            "docs": ""
-                        }, {
-                            "name": "y",
-                            "type": "number",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<{ success: boolean; coordinates: { x: number; y: number; }; }>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
             }
         };
     }