@jaak.ai/stamps 2.0.0-dev.19 → 2.0.0-dev.21

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

@@ -27,6 +27,7 @@ export class JaakStamps {
     isDetectionPaused = false;
     isLoading = false;
     isModelPreloaded = false;
+    isMaskReady = false;
     videoRef;
     canvasRef;
     session;
@@ -50,8 +51,8 @@ export class JaakStamps {
     MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/detector-nano.onnx";
     INPUT_SIZE = 320;
     CONFIDENCE_THRESHOLD = 0.6;
-    MASK_WIDTH = 280;
-    MASK_HEIGHT = 176;
+    // ISO/IEC 7810 ID-1 standard dimensions (85.60mm x 53.98mm)
+    ID1_ASPECT_RATIO = 85.60 / 53.98; // 1.5863320574...
     debugLog(...args) {
         if (this.debug) {
             console.log(...args);
@@ -85,6 +86,91 @@ export class JaakStamps {
         }
         // Initialize canvas pool for better performance
         this.initializeCanvasPool();
+        this.setupResizeObserver();
+    }
+    setupResizeObserver() {
+        if ('ResizeObserver' in window && this.canvasRef) {
+            const resizeObserver = new ResizeObserver(() => {
+                this.handleResize();
+            });
+            resizeObserver.observe(this.canvasRef.parentElement);
+        }
+    }
+    handleResize() {
+        if (this.canvasRef) {
+            const container = this.canvasRef.parentElement;
+            const rect = container.getBoundingClientRect();
+            // Set canvas size to match container
+            this.canvasRef.width = rect.width;
+            this.canvasRef.height = rect.height;
+            // Update mask positioning based on container and video dimensions
+            this.updateMaskDimensions(rect);
+            this.debugLog('📐 Canvas resized:', { width: rect.width, height: rect.height });
+        }
+    }
+    updateMaskDimensions(containerRect) {
+        if (!this.videoRef)
+            return;
+        const videoWidth = this.videoRef.videoWidth;
+        const videoHeight = this.videoRef.videoHeight;
+        if (videoWidth === 0 || videoHeight === 0)
+            return;
+        // Calculate video aspect ratio and container aspect ratio
+        const videoAspectRatio = videoWidth / videoHeight;
+        const containerAspectRatio = containerRect.width / containerRect.height;
+        // Determine how video fits in container (letterboxed or pillarboxed)
+        let displayedVideoWidth, displayedVideoHeight;
+        let videoOffsetX = 0, videoOffsetY = 0;
+        if (videoAspectRatio > containerAspectRatio) {
+            // Video is wider - letterboxed (black bars top/bottom)
+            displayedVideoWidth = containerRect.width;
+            displayedVideoHeight = containerRect.width / videoAspectRatio;
+            videoOffsetY = (containerRect.height - displayedVideoHeight) / 2;
+        }
+        else {
+            // Video is taller - pillarboxed (black bars left/right)
+            displayedVideoHeight = containerRect.height;
+            displayedVideoWidth = containerRect.height * videoAspectRatio;
+            videoOffsetX = (containerRect.width - displayedVideoWidth) / 2;
+        }
+        // Calculate maximum possible mask size while preserving exact ID-1 aspect ratio
+        // Determine the limiting dimension based on video orientation and ID-1 proportions
+        // Calculate what would be the max width if limited by video height
+        const maxWidthByHeight = displayedVideoHeight * this.ID1_ASPECT_RATIO;
+        let maskWidthInVideo, maskHeightInVideo;
+        if (maxWidthByHeight <= displayedVideoWidth) {
+            // Video height is the limiting factor
+            maskHeightInVideo = displayedVideoHeight * 0.9; // Use 90% of available height
+            maskWidthInVideo = maskHeightInVideo * this.ID1_ASPECT_RATIO;
+        }
+        else {
+            // Video width is the limiting factor
+            maskWidthInVideo = displayedVideoWidth * 0.9; // Use 90% of available width
+            maskHeightInVideo = maskWidthInVideo / this.ID1_ASPECT_RATIO;
+        }
+        // Convert to percentages of the container
+        const maskWidthPercent = (maskWidthInVideo / containerRect.width) * 100;
+        const maskHeightPercent = (maskHeightInVideo / containerRect.height) * 100;
+        // Calculate the center position of the displayed video area
+        const videoCenterX = videoOffsetX + (displayedVideoWidth / 2);
+        const videoCenterY = videoOffsetY + (displayedVideoHeight / 2);
+        // Convert to percentages of the container
+        const videoCenterXPercent = (videoCenterX / containerRect.width) * 100;
+        const videoCenterYPercent = (videoCenterY / containerRect.height) * 100;
+        // Update CSS custom properties for mask sizing and positioning
+        this.el.style.setProperty('--mask-width', `${maskWidthPercent}%`);
+        this.el.style.setProperty('--mask-height', `${maskHeightPercent}%`);
+        this.el.style.setProperty('--mask-center-x', `${videoCenterXPercent}%`);
+        this.el.style.setProperty('--mask-center-y', `${videoCenterYPercent}%`);
+        // Mark mask as ready now that dimensions are calculated
+        this.isMaskReady = true;
+        this.debugLog('🎯 Mask dimensions updated:', {
+            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 }
+        });
     }
     initializeCanvasPool() {
         // Preprocess canvas - reused for every inference
@@ -216,14 +302,60 @@ export class JaakStamps {
         this.isModelPreloaded = false;
         this.debugLog('🧹 Canvas pool cleaned up');
     }
+    async getMaxResolution() {
+        try {
+            // Primero obtén un stream básico para acceder a las capacidades
+            const tempStream = await navigator.mediaDevices.getUserMedia({
+                video: { facingMode: "environment" }
+            });
+            const videoTrack = tempStream.getVideoTracks()[0];
+            const capabilities = videoTrack.getCapabilities();
+            // Detener el stream temporal
+            tempStream.getTracks().forEach(track => track.stop());
+            // Construir restricciones con resolución optimizada para tablets
+            const constraints = {
+                facingMode: "environment"
+            };
+            if (capabilities.width && capabilities.height) {
+                // Limitar resolución máxima para tablets para evitar problemas de rendimiento
+                const maxWidth = Math.min(capabilities.width.max, 1920);
+                const maxHeight = Math.min(capabilities.height.max, 1080);
+                // Para tablets, usar resolución moderada en lugar de máxima
+                const isTablet = /iPad|Android/i.test(navigator.userAgent) && window.innerWidth >= 768;
+                if (isTablet) {
+                    constraints.width = { ideal: Math.min(maxWidth, 1280) };
+                    constraints.height = { ideal: Math.min(maxHeight, 720) };
+                }
+                else {
+                    constraints.width = { ideal: maxWidth };
+                    constraints.height = { ideal: maxHeight };
+                }
+                this.debugLog('📐 Resolution capabilities:', {
+                    maxWidth: capabilities.width.max,
+                    maxHeight: capabilities.height.max,
+                    selectedWidth: constraints.width.ideal,
+                    selectedHeight: constraints.height.ideal,
+                    isTablet
+                });
+            }
+            return constraints;
+        }
+        catch (err) {
+            this.debugLog('⚠️ Could not get capabilities, using fallback');
+            // Fallback optimizado para tablets
+            const isTablet = /iPad|Android/i.test(navigator.userAgent) && window.innerWidth >= 768;
+            return {
+                facingMode: "environment",
+                width: { ideal: isTablet ? 1280 : 1920 },
+                height: { ideal: isTablet ? 720 : 1080 }
+            };
+        }
+    }
     async setupCamera() {
         try {
+            const constraints = await this.getMaxResolution();
             const stream = await navigator.mediaDevices.getUserMedia({
-                video: {
-                    width: { exact: 640 },
-                    height: { exact: 640 },
-                    facingMode: "environment"
-                },
+                video: constraints,
                 audio: false
             });
             if (this.videoRef) {
@@ -238,6 +370,12 @@ export class JaakStamps {
                     this.videoRef.onloadedmetadata = async () => {
                         await this.videoRef.play();
                         this.isVideoActive = true;
+                        // Update mask dimensions once video is loaded
+                        if (this.canvasRef) {
+                            const container = this.canvasRef.parentElement;
+                            const rect = container.getBoundingClientRect();
+                            this.updateMaskDimensions(rect);
+                        }
                         resolve();
                     };
                 });
@@ -415,13 +553,57 @@ export class JaakStamps {
         return isCentered && isGoodSize;
     }
     checkSideAlignment(box) {
-        // Obtener las coordenadas del marco de referencia (máscara)
+        if (!this.videoRef)
+            return { top: false, right: false, bottom: false, left: false };
+        // Get video dimensions to calculate actual mask boundaries in model space
+        const videoWidth = this.videoRef.videoWidth;
+        const videoHeight = this.videoRef.videoHeight;
+        if (videoWidth === 0 || videoHeight === 0) {
+            return { top: false, right: false, bottom: false, left: false };
+        }
+        // Calculate video aspect ratio
+        const videoAspectRatio = videoWidth / videoHeight;
+        // The model sees video stretched to 320x320, but we need to calculate where
+        // the mask should be in this distorted space to match the visual mask
+        // In the visual display, we calculate mask size based on the limiting dimension
+        // We need to replicate this logic but account for the distortion in model space
+        // Calculate the "display" dimensions (what the visual mask calculations use)
+        const containerAspectRatio = 1; // Assume square container for simplicity
+        let displayedVideoWidth, displayedVideoHeight;
+        if (videoAspectRatio > containerAspectRatio) {
+            // Video is wider - letterboxed in display
+            displayedVideoWidth = this.INPUT_SIZE;
+            displayedVideoHeight = this.INPUT_SIZE / videoAspectRatio;
+        }
+        else {
+            // Video is taller - pillarboxed in display  
+            displayedVideoHeight = this.INPUT_SIZE;
+            displayedVideoWidth = this.INPUT_SIZE * videoAspectRatio;
+        }
+        // Calculate mask dimensions using the same logic as updateMaskDimensions
+        const maxWidthByHeight = displayedVideoHeight * this.ID1_ASPECT_RATIO;
+        let visualMaskWidth, visualMaskHeight;
+        if (maxWidthByHeight <= displayedVideoWidth) {
+            // Video height is the limiting factor
+            visualMaskHeight = displayedVideoHeight * 0.9;
+            visualMaskWidth = visualMaskHeight * this.ID1_ASPECT_RATIO;
+        }
+        else {
+            // Video width is the limiting factor
+            visualMaskWidth = displayedVideoWidth * 0.9;
+            visualMaskHeight = visualMaskWidth / this.ID1_ASPECT_RATIO;
+        }
+        // Now map these visual mask dimensions to the distorted model space
+        // The model stretches video to 320x320, so we need to apply the inverse transformation
+        const modelMaskWidth = visualMaskWidth * (this.INPUT_SIZE / displayedVideoWidth);
+        const modelMaskHeight = visualMaskHeight * (this.INPUT_SIZE / displayedVideoHeight);
+        // Calculate mask boundaries in model coordinate system (always centered in 320x320)
         const maskCenterX = this.INPUT_SIZE / 2;
         const maskCenterY = this.INPUT_SIZE / 2;
-        const maskLeft = maskCenterX - (this.MASK_WIDTH / 2);
-        const maskRight = maskCenterX + (this.MASK_WIDTH / 2);
-        const maskTop = maskCenterY - (this.MASK_HEIGHT / 2);
-        const maskBottom = maskCenterY + (this.MASK_HEIGHT / 2);
+        const maskLeft = maskCenterX - (modelMaskWidth / 2);
+        const maskRight = maskCenterX + (modelMaskWidth / 2);
+        const maskTop = maskCenterY - (modelMaskHeight / 2);
+        const maskBottom = maskCenterY + (modelMaskHeight / 2);
         // Obtener las coordenadas del documento detectado
         let docLeft = box.x;
         let docRight = box.x + box.w;
@@ -518,12 +700,45 @@ export class JaakStamps {
         }
     }
     drawDetections(ctx, boxes) {
-        // Scale factor to convert from model coordinates (320x320) to canvas coordinates (640x640)
-        const scale = this.canvasRef.width / this.INPUT_SIZE;
+        if (!this.videoRef)
+            return;
+        // Get video and container dimensions
+        const videoWidth = this.videoRef.videoWidth;
+        const videoHeight = this.videoRef.videoHeight;
+        const containerWidth = this.canvasRef.width;
+        const containerHeight = this.canvasRef.height;
+        if (videoWidth === 0 || videoHeight === 0)
+            return;
+        // Calculate video aspect ratio and container aspect ratio
+        const videoAspectRatio = videoWidth / videoHeight;
+        const containerAspectRatio = containerWidth / containerHeight;
+        // Determine how video fits in container (same logic as updateMaskDimensions)
+        let displayedVideoWidth, displayedVideoHeight;
+        let videoOffsetX = 0, videoOffsetY = 0;
+        if (videoAspectRatio > containerAspectRatio) {
+            // Video is wider - letterboxed (black bars top/bottom)
+            displayedVideoWidth = containerWidth;
+            displayedVideoHeight = containerWidth / videoAspectRatio;
+            videoOffsetY = (containerHeight - displayedVideoHeight) / 2;
+        }
+        else {
+            // Video is taller - pillarboxed (black bars left/right)
+            displayedVideoHeight = containerHeight;
+            displayedVideoWidth = containerHeight * videoAspectRatio;
+            videoOffsetX = (containerWidth - displayedVideoWidth) / 2;
+        }
+        // Scale factor from model coordinates (320x320) to displayed video area
+        const scaleX = displayedVideoWidth / this.INPUT_SIZE;
+        const scaleY = displayedVideoHeight / this.INPUT_SIZE;
         boxes.forEach(det => {
+            // Convert model coordinates to displayed video coordinates
+            const x = det.x * scaleX + videoOffsetX;
+            const y = det.y * scaleY + videoOffsetY;
+            const w = det.w * scaleX;
+            const h = det.h * scaleY;
             ctx.strokeStyle = "#32406C";
             ctx.lineWidth = 2;
-            ctx.strokeRect(det.x * scale, det.y * scale, det.w * scale, det.h * scale);
+            ctx.strokeRect(x, y, w, h);
         });
     }
     takeScreenshot() {
@@ -689,7 +904,7 @@ export class JaakStamps {
         this.cleanup();
     }
     render() {
-        return (h("div", { key: '788a458497c2303875f8accea1e0cc579379ff94', class: "detector-container" }, h("div", { key: 'ed491d2fb8399f7236ab492a100932518455be79', class: "video-container" }, h("video", { key: '8187f838c75776432dc48db4cd9bfe4ee350830d', ref: el => this.videoRef = el, width: "640", height: "640", autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: this.isVideoActive ? 'block' : 'none' } }), h("canvas", { key: '8cc31c45881d4f23c56c5ed246c9e59e30e0a782', ref: el => this.canvasRef = el, width: "640", height: "640", class: this.shouldMirrorVideo ? 'mirror' : '' }), h("div", { key: '54441a535098860601a7ef4f1b31a0d2a40a911b', class: "overlay-mask" }, h("div", { key: 'f9272bcb85c849e3b3170a0062c43e64359f112d', class: "card-outline" }, h("div", { key: '8a260667206ce2fecac262f2b5e81d0ebdccbb3c', class: "side side-top" }), h("div", { key: 'c9c0d25087aa8332027815829fc7bbd937f0596b', class: "side side-right" }), h("div", { key: '39394f06936ff01a525c83343ec05e6161611899', class: "side side-bottom" }), h("div", { key: '11799336a4b6f72d6042c02206626d947422ef0f', class: "side side-left" }), h("div", { key: '93d5636f85514d3fff76415ed806e6845c6e7fe3', class: "corner corner-tl" }), h("div", { key: '3bfc09f919744d1d04dcb0c08fb923879dc217c9', class: "corner corner-tr" }), h("div", { key: '6d9fa1395a606960597bed65301679dcd12fc8bb', class: "corner corner-bl" }), h("div", { key: '4819402bd891c4a8d581e1e10449850b3a580e96', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (h("div", { key: '26a57343cfccea003c3edc65c5c53ac97b16de53', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (h("button", { key: '641d63e9f9e76fa81b2f770a1036b337f54a2c23', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso"))), this.isCapturing && (h("div", { key: 'e7ab12f7ad092d233e19de5bc7a3e424b6bc70c3', class: "capture-animation" })), this.showFlipAnimation && (h("div", { key: 'dddbe58a92172e9ab1e7002a3b4310d8e552926f', class: "flip-animation" }, h("div", { key: 'c2f49ee888573d873d67e8d4871bb6b1d8f2bc8d', class: "id-card-icon" }), h("div", { key: '6e71e7a9a3a85bb4f9252955ea220e64a25ae479', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (h("div", { key: 'c9d8fd42711764ea197c7d13ef3d90e34b559e64', class: "success-animation" }, h("div", { key: '50dd978c2c501b53591346d75dac018006f42992', class: "check-icon" }), h("div", { key: 'ad25bc5811d435ceb7a1e9791cd3fc5dbd5c5227', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (h("div", { key: '9ac52c0754d165f8141989b17398a89b21790976', class: "loading-overlay" }, h("div", { key: 'ccffac3b53db3ac4beddbf43ee8cff693e29fd73', class: "loading-spinner" }), h("div", { key: '708c4aad55e18be3fc77fe3f169430475dce7ee1', class: "loading-text" }, this.statusMessage))), h("div", { key: 'e0addbcea4b176772de10a608c6de4242da2a7f3', class: "watermark" }, h("img", { key: 'd3d2a989a01e2a64a100ccdc43a027f969d4b8b1', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
+        return (h("div", { key: 'b63a5966ee08d4de7b5d8a10dbf248150e8620ec', class: "detector-container" }, h("div", { key: '1c62d540a1802a758b90a543edfdc364123ae950', class: "video-container" }, h("video", { key: '18e066e0005c3b287983ebb29c9e4aa147eaaf8d', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: this.isVideoActive ? 'block' : 'none' } }), h("canvas", { key: '43cd238e38a5a2ff9c140800ac686580a7ca33b9', ref: el => this.canvasRef = el, class: this.shouldMirrorVideo ? 'mirror' : '' }), this.isMaskReady && (h("div", { key: 'f43db67b9d1ef47264092694c3ab8afa9925e258', class: "overlay-mask" }, h("div", { key: 'ac60d94edc4cfa6ccf91ba6e04d2be6e4368be97', class: "card-outline" }, h("div", { key: 'de6aca9bbfe778890adf4c69e8525a114c37f6d4', class: "side side-top" }), h("div", { key: '7ce7b1e2215b01ea5d714b8ecc988361e384b6f7', class: "side side-right" }), h("div", { key: 'b79a68f68facb42ca139d6a2bc8e1e6d7133872d', class: "side side-bottom" }), h("div", { key: '81d90c4a08cfc2267cec195a3b342c87bb1d07d0', class: "side side-left" }), h("div", { key: 'c93c83abb8e17a5cb9c1bd53b2e1239ef50c7bf4', class: "corner corner-tl" }), h("div", { key: '81ca7cf2aab7026e851bd226843a6db5807315d5', class: "corner corner-tr" }), h("div", { key: 'c451fe226ac15023ee9799443060f1da620cb3b3', class: "corner corner-bl" }), h("div", { key: '7c3e2b2a21bd37144fe6b4d5df67df625dc12103', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (h("div", { key: '74ab171b64bdf0e1269845b4fcd9bf8e2caf891d', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (h("button", { key: '2b2b9387ce8b023acf0d65c7f7b3480211f7cb2d', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")))), this.isCapturing && (h("div", { key: 'eabd88499f52098f79e434afcce73acb2727c411', class: "capture-animation" })), this.showFlipAnimation && (h("div", { key: '9affe6040a39260747db98db2b68a103fb719fbb', class: "flip-animation" }, h("div", { key: '8b25f3688a16f4b070664237a093122a6720edfb', class: "id-card-icon" }), h("div", { key: '805b11cfb4d06a25e02370b06f6cf15f0f0cf6b5', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (h("div", { key: 'cba337b6fef8b919425566c0c9c5de797d42c4c8', class: "success-animation" }, h("div", { key: '4a88df3f9285757b489b030ba985d720a8a3badf', class: "check-icon" }), h("div", { key: 'a0bdd89c2c6274330ba66a6b6bba86ab6c725979', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (h("div", { key: '564fc1333b0fb69102e26ac1da4e77786a9bc7a3', class: "loading-overlay" }, h("div", { key: '283e4a6315a39b26203e19a13f35389bc1870a0f', class: "loading-spinner" }), h("div", { key: '7e4f00a1fcee1bbf29d74c8be35a72aba2c1041a', class: "loading-text" }, this.statusMessage))), h("div", { key: '6cbe1fea1c4a7d3cb25cd34ee04becb5fa538dfd', class: "watermark" }, h("img", { key: '1bd4157b7f74753570ddf48682acf419a6de03ea', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
     }
     static get is() { return "jaak-stamps"; }
     static get encapsulation() { return "shadow"; }
@@ -765,7 +980,8 @@ export class JaakStamps {
             "sideAlignment": {},
             "isDetectionPaused": {},
             "isLoading": {},
-            "isModelPreloaded": {}
+            "isModelPreloaded": {},
+            "isMaskReady": {}
         };
     }
     static get events() {