@jaak.ai/stamps 2.0.0-dev.40 → 2.0.0-dev.42

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

@@ -8,6 +8,13 @@ export class JaakStamps {
     cropMargin = 0;
     useDocumentClassification = false;
     preferredCamera = 'auto';
+    captureDelay = 1000;
+    enableQualityValidation = true;
+    qualityThreshold = 60;
+    minQualityScore = 45;
+    minFocusScore = 16;
+    minBlurScore = 22;
+    maxReflectionScore = 15;
     captureCompleted;
     isReady;
     // State derived from services
@@ -19,12 +26,19 @@ export class JaakStamps {
     shouldMirrorVideo = true;
     showCameraSelector = false;
     isSwitchingCamera = false;
+    hasDocumentDetected = false;
     currentStatus = {
         message: 'Inicializando componente...',
         description: 'Configurando servicios y cargando recursos',
         type: 'initializing',
         isInitialized: false
     };
+    qualityFeedback = {
+        message: 'Analizando calidad...',
+        score: 0,
+        hasIssues: false,
+        canCapture: false
+    };
     performanceData = {
         fps: 0,
         inferenceTime: 0,
@@ -92,7 +106,14 @@ export class JaakStamps {
             maskSize: this.maskSize,
             cropMargin: this.cropMargin,
             useDocumentClassification: this.useDocumentClassification,
-            preferredCamera: this.preferredCamera
+            preferredCamera: this.preferredCamera,
+            captureDelay: this.captureDelay,
+            enableQualityValidation: this.enableQualityValidation,
+            qualityThreshold: this.qualityThreshold,
+            minQualityScore: this.minQualityScore,
+            minFocusScore: this.minFocusScore,
+            minBlurScore: this.minBlurScore,
+            maxReflectionScore: this.maxReflectionScore
         };
         this.serviceContainer = new ServiceContainer(config);
         this.logger = this.serviceContainer.getLogger();
@@ -119,7 +140,8 @@ export class JaakStamps {
             maskSize: this.maskSize,
             cropMargin: this.cropMargin,
             useDocumentClassification: this.useDocumentClassification,
-            preferredCamera: this.preferredCamera
+            preferredCamera: this.preferredCamera,
+            captureDelay: this.captureDelay
         });
         this.validateProps();
         if (this.debug) {
@@ -147,6 +169,30 @@ export class JaakStamps {
             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: 1000`);
+            this.captureDelay = 1000;
+        }
+        if (this.qualityThreshold < 0 || this.qualityThreshold > 100) {
+            this.logger.warn(`Propiedad qualityThreshold inválida. Valor: ${this.qualityThreshold}, esperado: 0-100. Usando valor por defecto: 60`);
+            this.qualityThreshold = 60;
+        }
+        if (this.minQualityScore < 0 || this.minQualityScore > 100) {
+            this.logger.warn(`Propiedad minQualityScore inválida. Valor: ${this.minQualityScore}, esperado: 0-100. Usando valor por defecto: 45`);
+            this.minQualityScore = 45;
+        }
+        if (this.minFocusScore < 0 || this.minFocusScore > 100) {
+            this.logger.warn(`Propiedad minFocusScore inválida. Valor: ${this.minFocusScore}, esperado: 0-100. Usando valor por defecto: 16`);
+            this.minFocusScore = 16;
+        }
+        if (this.minBlurScore < 0 || this.minBlurScore > 200) {
+            this.logger.warn(`Propiedad minBlurScore inválida. Valor: ${this.minBlurScore}, esperado: 0-200. Usando valor por defecto: 22`);
+            this.minBlurScore = 22;
+        }
+        if (this.maxReflectionScore < 0 || this.maxReflectionScore > 100) {
+            this.logger.warn(`Propiedad maxReflectionScore inválida. Valor: ${this.maxReflectionScore}, esperado: 0-100. Usando valor por defecto: 15`);
+            this.maxReflectionScore = 15;
+        }
     }
     async loadOnnxRuntime() {
         if (!window.ort) {
@@ -371,6 +417,91 @@ export class JaakStamps {
             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');
+        }
+        this.captureDelay = delay;
+        this.serviceContainer.updateConfig({ captureDelay: delay });
+        return {
+            success: true,
+            captureDelay: this.captureDelay
+        };
+    }
+    async getCaptureDelay() {
+        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 }
+        };
+    }
+    async getImageQuality() {
+        if (!this.videoRef || !this.detectionService.isModelLoaded()) {
+            return null;
+        }
+        try {
+            const qualityResult = this.detectionService.validateImageQuality(this.videoRef);
+            return {
+                qualityScore: qualityResult.qualityScore,
+                overallQuality: qualityResult.overallQuality,
+                issues: qualityResult.issues,
+                recommendations: qualityResult.recommendations,
+                canCapture: this.detectionService.isImageQualityAcceptable(qualityResult)
+            };
+        }
+        catch (error) {
+            this.logger.error('Error al analizar calidad de imagen:', error);
+            return null;
+        }
+    }
+    async setQualityThresholds(thresholds) {
+        // Validate thresholds
+        if (thresholds.minQualityScore !== undefined && (thresholds.minQualityScore < 0 || thresholds.minQualityScore > 100)) {
+            throw new Error('minQualityScore must be between 0 and 100');
+        }
+        if (thresholds.minFocusScore !== undefined && (thresholds.minFocusScore < 0 || thresholds.minFocusScore > 100)) {
+            throw new Error('minFocusScore must be between 0 and 100');
+        }
+        if (thresholds.minBlurScore !== undefined && (thresholds.minBlurScore < 0 || thresholds.minBlurScore > 200)) {
+            throw new Error('minBlurScore must be between 0 and 200');
+        }
+        if (thresholds.maxReflectionScore !== undefined && (thresholds.maxReflectionScore < 0 || thresholds.maxReflectionScore > 100)) {
+            throw new Error('maxReflectionScore must be between 0 and 100');
+        }
+        // Update component properties
+        if (thresholds.minQualityScore !== undefined)
+            this.minQualityScore = thresholds.minQualityScore;
+        if (thresholds.minFocusScore !== undefined)
+            this.minFocusScore = thresholds.minFocusScore;
+        if (thresholds.minBlurScore !== undefined)
+            this.minBlurScore = thresholds.minBlurScore;
+        if (thresholds.maxReflectionScore !== undefined)
+            this.maxReflectionScore = thresholds.maxReflectionScore;
+        // Update detection service
+        this.detectionService.updateQualityThresholds(thresholds);
+        return {
+            success: true,
+            thresholds: this.detectionService.getQualityThresholds()
+        };
+    }
+    async getQualityThresholds() {
+        return {
+            minQualityScore: this.minQualityScore,
+            minFocusScore: this.minFocusScore,
+            minBlurScore: this.minBlurScore,
+            maxReflectionScore: this.maxReflectionScore
+        };
+    }
     // DETECTION METHODS
     async startDetection() {
         this.logger.state('INICIANDO_DETECCION');
@@ -472,7 +603,36 @@ export class JaakStamps {
             // Measure preprocessing and inference time
             const inferenceStartTime = performance.now();
             const inputTensor = this.detectionService.preprocess(this.videoRef);
-            const detections = await this.detectionService.runInference(inputTensor);
+            // Enhanced detection with quality validation if enabled
+            let detections;
+            let qualityResult = null;
+            let canCapture = true;
+            if (this.enableQualityValidation) {
+                // Use enhanced detection method with quality validation
+                const enhancedResult = await this.detectionService.runInferenceWithQuality(inputTensor, this.videoRef);
+                detections = enhancedResult.detections;
+                qualityResult = enhancedResult.qualityResult;
+                canCapture = enhancedResult.canCapture;
+                // Update quality feedback state
+                this.qualityFeedback = {
+                    message: enhancedResult.feedback,
+                    score: qualityResult.qualityScore,
+                    hasIssues: qualityResult.issues.length > 0,
+                    canCapture: canCapture
+                };
+            }
+            else {
+                // Standard detection without quality validation
+                detections = await this.detectionService.runInference(inputTensor);
+                // Quick quality feedback for real-time display
+                const quickFeedback = this.detectionService.getQuickQualityFeedback(this.videoRef);
+                this.qualityFeedback = {
+                    message: quickFeedback.feedback,
+                    score: 0, // Not calculated in quick mode
+                    hasIssues: quickFeedback.hasBlur || quickFeedback.hasReflections || !quickFeedback.isFocused,
+                    canCapture: true // Allow capture without strict validation
+                };
+            }
             const inferenceTime = performance.now() - inferenceStartTime;
             // Record ONNX performance metrics
             if (this.debug) {
@@ -488,6 +648,8 @@ export class JaakStamps {
                     }
                 });
             }
+            // Update document detection state
+            this.hasDocumentDetected = detections.length > 0;
             // Adaptive frame rate
             if (detections.length === 0) {
                 this.consecutiveFailures++;
@@ -549,6 +711,7 @@ export class JaakStamps {
         }
         this.detectionBoxes = [];
         this.alignmentStartTime = undefined;
+        this.hasDocumentDetected = false;
         this.serviceContainer?.cleanup();
     }
     render() {
@@ -567,7 +730,7 @@ export class JaakStamps {
             deviceType: 'desktop',
             preferredFacing: null
         };
-        return (h("div", { key: '91be2bd01dfa62ef439ff4b3d029539248b69364', class: "detector-container" }, h("div", { key: '7dbfbe2b782a8d06e2303ec3edff4b5c68ba4444', class: "video-container" }, h("video", { key: 'a2b7ec84a2f49935a94f1afb12deb1137f472fcd', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: '63cf0b7a05fc6d604f3a273fd902717542ba47f5', 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: {
+        return (h("div", { key: 'd71fc140c7fc87160ceaf479f9b9beae7685e9bc', class: "detector-container" }, h("div", { key: 'd83347ab6ccacfe940fb66d17adc21cff126d875', class: "video-container" }, h("video", { key: 'fb69de65e8133c7936cfb03ec86acdf89d2a8112', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: 'c957341c1a750a1732afd6bb1045c1ba9bb2993d', 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`,
@@ -576,7 +739,9 @@ export class JaakStamps {
                 border: '2px solid #32406C',
                 pointerEvents: 'none',
                 boxSizing: 'border-box'
-            } })))), this.isMaskReady && (h("div", { key: '089227de9415e523e99261eeeca5dcb981816a83', class: "overlay-mask" }, h("div", { key: '846bd914025e8da92ca85381a566c6d93caea2ea', class: "card-outline" }, h("div", { key: '1f49ae76e9066a65e848e55e19839547d8b9bef0', class: "side side-top" }), h("div", { key: '5b69c6bcf604042f86383e9bf122204d4fe1aeb1', class: "side side-right" }), h("div", { key: '8aa4c1f09c8b7046a369ed8d7fae1a96a525f778', class: "side side-bottom" }), h("div", { key: 'd8826c0347a219c154703d165ee5b4ced33f7a3f', class: "side side-left" }), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '916e038d0d0f80971629916189ef39c2689e4e43', class: "guide-text" }, "Alinee su identificaci\u00F3n con el marco"))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("button", { key: '02b01dff08bdbf042c6df1403f955601964bff28', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")), captureState.isVideoActive && (h("div", { key: 'cd88fd0567e5b792ddc623c281616ea35616f8f6', class: "camera-controls" }, h("button", { key: '9d2a63a53926d0c987e551bd49caa8143b4e15d4', 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: '43e9ea946f88498082339de62cf54cba352e765e', class: "camera-selector-dropdown" }, h("div", { key: '9fe39e8fa32ee458e4261d3f0d8fd40d50fefcf4', class: "camera-selector-header" }, h("span", { key: 'edf45c7bd8c5a43df9aba3ff6310cc5d06bb1aa2' }, "Seleccionar C\u00E1mara"), h("button", { key: 'dd5d417bb5eadd3f3b488ecd901d8dfa075c29c8', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: '8edcd693f137ddd4ada9654c01615a17c90cb9c3', 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: 'b7f050513f25af03ca72a735bd8745f71a456d76', class: "device-info" }, h("small", { key: '34305a7ca3418d46bceb2a9923a664fd5a0062fa' }, "Dispositivo: ", cameraInfo.deviceType)))))), captureState.isCapturing && (h("div", { key: '54ec511bd6d22c8c25eb41717abcebd89ed315f8', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: '9392bccfd3576b1858610b543c0ac0b747cef153', class: "flip-animation" }, h("div", { key: '030dc63ea455afa24fd0b370425aae14ab322613', class: "id-card-icon" }), h("div", { key: '3f7d8985af2d6eaec21699b87d5aeb0b27d2d55e', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: '0da0a234e87013fb2ccc652cb920318cf00b6733', class: "success-animation" }, h("div", { key: 'f6b62ff21e147c8b365ab8c88e42dcb106cb8743', class: "check-icon" }), h("div", { key: '8c8b56561234e140cd658c5fad252cd6a1e0251c', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: '684119ec540276cc28a49724d6177c72aff74b02', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: 'abc9a89349b9d8d76e03c765aa0084ec364f73a8', class: "status-spinner" })), h("div", { key: '6903b83962ee971a95a18e9ac793d872a7ce4551', class: "status-content" }, h("div", { key: 'c01dd0268a223ee269b616cea19a9cdb69cc048f', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: '1f6ebecc7a1d058c34aca5b4572ace8a81b5ab69', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: 'eff03d22449aafac6c986e71af2aafd487b1776d', class: "performance-monitor" }, h("div", { key: '66dfd57c92f7ee67e7c52293b3ad3f1105793e70', class: "performance-expanded" }, h("div", { key: '0d952f89275e551a1e4cdb9b215e1ba48776ebd4', class: "metrics-row" }, h("div", { key: '36fab2101078e4da16a3a3ac50d927077d9e0874', class: "metric-compact" }, h("span", { key: 'a694bf26ff69522a6462963d735ffa145513d84c', class: "metric-label" }, "FPS"), h("span", { key: '02a250b3863f8f158a4103e0817cf14accdb7b30', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: 'd6e849779f13ae0ee3641d98148f0ab151877157', class: "metric-compact" }, h("span", { key: '983411baa6e79e3bfe7ad277879361c023dc6d48', class: "metric-label" }, "MEM"), h("span", { key: 'eea7060b9cef780ed47a534b7bc69c94162b67d9', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: 'e0e5e80c208f1eadc606c20df844efcc66f6599c', class: "metrics-row" }, h("div", { key: 'd27ae06d877097c99c1796c36284427861ae0be3', class: "metric-compact" }, h("span", { key: '229837e3037ce64fc5930a5732ad6a0e323371e9', class: "metric-label" }, "INF"), h("span", { key: '82002332976cddf7dbb2aa6346ad9da0ce0901df', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: '243afc7933e169084eda28cca270198420a4341d', class: "metric-compact" }, h("span", { key: '834e9a69791abc42545dddc1c0de7372a3292d60', class: "metric-label" }, "FRAME"), h("span", { key: '9106f8989818aa9111d7571006224befe7837406', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: 'da911fc95ce6151fb5fb64b8d5df53d6b693ffef', class: "metrics-row" }, h("div", { key: 'c813a7152d51bd2402b9c2bdf5bd1fe09b6df7db', class: "metric-compact" }, h("span", { key: 'b5a7807764a897663ce9d37111188c26bcf2cb6d', class: "metric-label" }, "DET"), h("span", { key: '17ec09407ac24800e0ec965c7b3a037730a6afd4', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: '5aa0b6f4d1643e3ec224d1a9d89d4d37407d3c58', class: "metric-compact" }, h("span", { key: '6b8efdcf07e9eac7d5036a508804b017ccedaea9', class: "metric-label" }, "RATE"), h("span", { key: '038a5c3377185784c806c614f0c098e417360acf', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: '3317e18916b62bce70cc02540cfc274d588b466a', class: "watermark" }, h("img", { key: 'adf070f99c17c3fdfc3e2c69b1a63dfef66ad71e', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
+            } })))), this.isMaskReady && (h("div", { key: 'cf81504f7f129a2bb2789dd7addfe8d365fd7973', class: "overlay-mask" }, h("div", { key: 'b0f8ab1e02d1731295b95cbca4b44be430c6104d', class: "card-outline" }, h("div", { key: 'fadb33b8dc3c2cbfbb78aa0ff4d273b2b26a3565', class: "side side-top" }), h("div", { key: '3f3ca187195c78f2c3daffa481cc275f970c68a5', class: "side side-right" }), h("div", { key: '1e6bac145a85bbee2dab24da81b8064bc4ac282b', class: "side side-bottom" }), h("div", { key: '9bef1cd7afcef6cb1975a1103ec57d33d89f7640', class: "side side-left" }), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '9198d8b8fb1f4a17ec615943a09844f47a639048', class: "guide-text" }, this.enableQualityValidation && this.hasDocumentDetected && this.qualityFeedback.message ?
+            this.qualityFeedback.message :
+            'Alinee su identificación con el marco')), this.enableQualityValidation && this.hasDocumentDetected && captureState.isVideoActive && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '04afa661c1d988d9bedb48c78672de233dd49f9b', class: `quality-indicator ${this.qualityFeedback.hasIssues ? 'warning' : 'good'}` }, h("div", { key: 'bc789e19894de1d3dfd4a232e05e612d804e0e6c', class: "quality-score" }, this.qualityFeedback.score > 0 ? `${this.qualityFeedback.score}%` : ''), h("div", { key: '0750f5e5dfdb7a7c054d01965146d34a5bb4485a', class: `quality-status ${this.qualityFeedback.canCapture ? 'ready' : 'not-ready'}` }, this.qualityFeedback.canCapture ? '✓' : '!')))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("button", { key: 'cbe391726b5d62acbb466c36b135e0556fc488f7', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")), captureState.isVideoActive && (h("div", { key: '929f8fe054b30e3c30bf066319e957a633fa587c', class: "camera-controls" }, h("button", { key: 'b4f68dd3a6865cba49c3f5d38c43874b7b9b364d', 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: 'c9315ff70704fdc265af07bf765b6247814563e6', class: "camera-selector-dropdown" }, h("div", { key: 'f4950e7e3c3e279c48310a4049550f3143fb4d3f', class: "camera-selector-header" }, h("span", { key: '4cfacf909549b0e18bd8ac6e54e127ce09b75335' }, "Seleccionar C\u00E1mara"), h("button", { key: '13d7679c5235f41f0dbc38b9f397483cf4ec9ffd', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: '6c97cb8ba9486c33a633901d9dd49765f87d92ed', 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: '35796316fc950b8491f6167303b549b098abbf58', class: "device-info" }, h("small", { key: '83c59a8cb0c0b67a37163fe75c1f1f383fcb00f4' }, "Dispositivo: ", cameraInfo.deviceType)))))), captureState.isCapturing && (h("div", { key: 'be5b316abb21c06cf5bb69ed090d43d45537a9e6', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: '43e64fcc325c7c96871a99838c5fa094c6774af2', class: "flip-animation" }, h("div", { key: '39223d9b593716e76912ade58b556c7212a7e05f', class: "id-card-icon" }), h("div", { key: '79463b43724c3c56c45bd5b41337117d7d415618', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: '7be8ca4d0bd59b1e4127254ff68e41321aa387cc', class: "success-animation" }, h("div", { key: '03a3e625f622c546a3016f85e029f9ea165f65c3', class: "check-icon" }), h("div", { key: '9c63faad517dad4b2ede8ec5a0998ad0b5c807d5', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: '94aa38c67fdaf328e74a2c1ec476987bf8e483d5', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: '52a460f2fe11505158331cc06d7121db80bdfed9', class: "status-spinner" })), h("div", { key: '1eabfed00df31ff30fdf818f3d33cd837a7f31a5', class: "status-content" }, h("div", { key: '4bdbadf18fc48f2fad5dafd9ddf4a78f0a81dbf5', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: '14c41346fc9fc306315cdda1c54ec1e828c38f62', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: '21fb0ca08547143648097f2aa4f3eb3ade73bce1', class: "performance-monitor" }, h("div", { key: '88c990f42b5c87c9bc971acd228fc84bacec861b', class: "performance-expanded" }, h("div", { key: '351215f4b8ab202b42a4c9b0bfa8665485469f64', class: "metrics-row" }, h("div", { key: '28a2c5386ba99850f7dc41add6fb4ef073a6b8cb', class: "metric-compact" }, h("span", { key: '7a2ab758f9baf1264cd4ad70ff30f42a35c41065', class: "metric-label" }, "FPS"), h("span", { key: '1c4370d016f2bdcf61275b4869bddbd8109a7b2a', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: 'e79c27b4cbad3e70f2df917a5147dd125d51304d', class: "metric-compact" }, h("span", { key: 'aee4c178ae751cfe94735ef9fcb78f273f9cb885', class: "metric-label" }, "MEM"), h("span", { key: '823e98dec413968ee5080b29839729e6ac9f91d2', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: 'e29037f684c82579a711aff022060c97ab9d93cf', class: "metrics-row" }, h("div", { key: '2917f3c4b026e3106fad741944e582aff36e10e0', class: "metric-compact" }, h("span", { key: 'e8783e8e2b18b29b37342eea376a75f257a46850', class: "metric-label" }, "INF"), h("span", { key: '30cdc1db3189135bc772aab5c31e081294ebd431', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: 'c481ec26394e35efe38047e5fa1b835e520f49b8', class: "metric-compact" }, h("span", { key: 'c806cae91f3fcad896bd6053b6a0391ab518ab6f', class: "metric-label" }, "FRAME"), h("span", { key: 'af9996e2093c918ea903d036e637905baeef1aa2', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: '48422447a6d00f78a9f861bfc50de4ef5a628a57', class: "metrics-row" }, h("div", { key: 'c88a03fbff56f68796df33187256fd5a5a68f763', class: "metric-compact" }, h("span", { key: '5e366c35865f8bf45aecac126ce98e0e17be0825', class: "metric-label" }, "DET"), h("span", { key: '123570ac9ae59cf5ef1b992ea6c4563b753990c3', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: 'dea3a496f84e80f9d6f27173c8fa2e4149bf8e0b', class: "metric-compact" }, h("span", { key: 'fe47d6c16ca84fff8824bef92d8ce9efe50dfa38', class: "metric-label" }, "RATE"), h("span", { key: '873846eb42c1ed97f4e9493871e51741766c852f', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: 'b485b1d8fafee0314ffbf1c7934ffc9a3d4c6902', class: "watermark" }, h("img", { key: 'f5fae340c3e96ecafe26aa819dbc2411038aa953', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
     }
     // Utility methods
     updateDetectionBoxes(boxes) {
@@ -648,15 +813,38 @@ export class JaakStamps {
         if (allSidesAligned && bestBox) {
             cardOutline?.classList.add('perfect-match');
             corners?.forEach(corner => corner.classList.add('perfect-match'));
-            if (!this.hasScreenshotTaken) {
+            // Check quality validation before allowing capture
+            const qualityCheckPassed = !this.enableQualityValidation || this.qualityFeedback.canCapture;
+            // Debug logging
+            this.logger.state('CAPTURE_EVALUATION', {
+                allSidesAligned: true,
+                hasScreenshotTaken: this.hasScreenshotTaken,
+                qualityCheckPassed,
+                enableQualityValidation: this.enableQualityValidation,
+                qualityFeedback: this.qualityFeedback,
+                captureDelay: this.captureDelay,
+                alignmentStartTime: this.alignmentStartTime
+            });
+            if (!this.hasScreenshotTaken && qualityCheckPassed) {
                 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 1 second
+                // Check if document has been aligned for the configured delay
                 const alignmentDuration = currentTime - this.alignmentStartTime;
-                if (alignmentDuration >= 1000) {
+                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,
+                        qualityScore: this.qualityFeedback.score
+                    });
                     this.lastDetectedBox = bestBox;
                     this.takeScreenshot().catch(error => {
                         this.logger.error('Error al tomar captura de pantalla:', error);
@@ -668,6 +856,17 @@ export class JaakStamps {
                     }, 2000);
                 }
             }
+            else if (!qualityCheckPassed) {
+                // Reset alignment timer if quality check fails
+                this.logger.state('QUALITY_CHECK_FAILED', {
+                    enableQualityValidation: this.enableQualityValidation,
+                    canCapture: this.qualityFeedback.canCapture,
+                    qualityScore: this.qualityFeedback.score,
+                    hasIssues: this.qualityFeedback.hasIssues
+                });
+                this.alignmentStartTime = undefined;
+                cardOutline?.classList.add('quality-warning');
+            }
         }
         else {
             cardOutline?.classList.remove('perfect-match');
@@ -856,6 +1055,7 @@ export class JaakStamps {
         this.lastInferenceTime = 0;
         this.detectionBoxes = [];
         this.alignmentStartTime = undefined;
+        this.hasDocumentDetected = false;
         if (this.alignmentTimer) {
             clearTimeout(this.alignmentTimer);
             this.alignmentTimer = undefined;
@@ -1063,6 +1263,146 @@ export class JaakStamps {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "'auto'"
+            },
+            "captureDelay": {
+                "type": "number",
+                "attribute": "capture-delay",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "1000"
+            },
+            "enableQualityValidation": {
+                "type": "boolean",
+                "attribute": "enable-quality-validation",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "qualityThreshold": {
+                "type": "number",
+                "attribute": "quality-threshold",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "60"
+            },
+            "minQualityScore": {
+                "type": "number",
+                "attribute": "min-quality-score",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "45"
+            },
+            "minFocusScore": {
+                "type": "number",
+                "attribute": "min-focus-score",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "16"
+            },
+            "minBlurScore": {
+                "type": "number",
+                "attribute": "min-blur-score",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "22"
+            },
+            "maxReflectionScore": {
+                "type": "number",
+                "attribute": "max-reflection-score",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "15"
             }
         };
     }
@@ -1074,7 +1414,9 @@ export class JaakStamps {
             "shouldMirrorVideo": {},
             "showCameraSelector": {},
             "isSwitchingCamera": {},
+            "hasDocumentDetected": {},
             "currentStatus": {},
+            "qualityFeedback": {},
             "performanceData": {}
         };
     }
@@ -1286,6 +1628,150 @@ export class JaakStamps {
                     "text": "",
                     "tags": []
                 }
+            },
+            "setCaptureDelay": {
+                "complexType": {
+                    "signature": "(delay: number) => Promise<{ success: boolean; captureDelay: number; }>",
+                    "parameters": [{
+                            "name": "delay",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ success: boolean; captureDelay: number; }>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getCaptureDelay": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "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": []
+                }
+            },
+            "getImageQuality": {
+                "complexType": {
+                    "signature": "() => Promise<{ qualityScore: any; overallQuality: any; issues: any; recommendations: any; canCapture: boolean; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ qualityScore: any; overallQuality: any; issues: any; recommendations: any; canCapture: boolean; }>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setQualityThresholds": {
+                "complexType": {
+                    "signature": "(thresholds: QualityThresholds) => Promise<{ success: boolean; thresholds: QualityThresholds; }>",
+                    "parameters": [{
+                            "name": "thresholds",
+                            "type": "QualityThresholds",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "QualityThresholds": {
+                            "location": "import",
+                            "path": "../../services/interfaces/IDetectionService",
+                            "id": "src/services/interfaces/IDetectionService.ts::QualityThresholds"
+                        }
+                    },
+                    "return": "Promise<{ success: boolean; thresholds: QualityThresholds; }>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getQualityThresholds": {
+                "complexType": {
+                    "signature": "() => Promise<{ minQualityScore: number; minFocusScore: number; minBlurScore: number; maxReflectionScore: number; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ minQualityScore: number; minFocusScore: number; minBlurScore: number; maxReflectionScore: number; }>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }