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

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,45 @@ 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 la resolución máxima
+            const constraints = {
+                facingMode: "environment"
+            };
+            if (capabilities.width && capabilities.height) {
+                constraints.width = { ideal: capabilities.width.max };
+                constraints.height = { ideal: capabilities.height.max };
+                this.debugLog('📐 Max resolution capabilities:', {
+                    width: capabilities.width.max,
+                    height: capabilities.height.max
+                });
+            }
+            return constraints;
+        }
+        catch (err) {
+            this.debugLog('⚠️ Could not get capabilities, using fallback');
+            // Fallback para dispositivos que no soportan getCapabilities
+            return {
+                facingMode: "environment",
+                width: { ideal: 1920 },
+                height: { ideal: 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 +355,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 +538,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 +685,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 +889,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: 'c95e9dee4b79561384fe1777b99a4cc4fa92bdbe', class: "detector-container" }, h("div", { key: 'a002fed79f5fd475a636818535a4a65324ec3fbf', class: "video-container" }, h("video", { key: '1a2a79193aac789c53b899da06e24bc4fe71891e', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: this.isVideoActive ? 'block' : 'none' } }), h("canvas", { key: '1771841686ff849a70d3b8e23034a44880494c7e', ref: el => this.canvasRef = el, class: this.shouldMirrorVideo ? 'mirror' : '' }), this.isMaskReady && (h("div", { key: '29563822f3ec6c0d00ef20fb2da346b2d9c24175', class: "overlay-mask" }, h("div", { key: 'e70ec55cfc25697e62981ffbfb5c78dc32821daa', class: "card-outline" }, h("div", { key: '1ae7dae4facd6971a3031cec4992f657192855da', class: "side side-top" }), h("div", { key: 'efec73ad8e754a279443a93f05c7e416476540c3', class: "side side-right" }), h("div", { key: '42dca6ffed2ac93bffd48877b3ef05e11aa16bac', class: "side side-bottom" }), h("div", { key: 'e872078e654987be4d02600b866f39767bff6c91', class: "side side-left" }), h("div", { key: '71dc7e353e6a11ddc6e300ddd6a96c483dc8e43d', class: "corner corner-tl" }), h("div", { key: 'e380c3c0526f8c6c5f6caefc2ea1feabc17b0b4a', class: "corner corner-tr" }), h("div", { key: 'de4720a6418ec86931c24a0542cffdbba8211b22', class: "corner corner-bl" }), h("div", { key: '338a487a89c9c4d1662428fdc73cdb355766149c', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (h("div", { key: '34190a47c348dd00d48467c4edfd80efaf0494cd', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (h("button", { key: 'c585163a9db511b461d575594b2c8f5a79cbc1d2', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")))), this.isCapturing && (h("div", { key: 'bc56a29c90d7177cad35c930ed54304bb20f700e', class: "capture-animation" })), this.showFlipAnimation && (h("div", { key: '1d636a6dde80ec90f6db7868a0abd163af8a8836', class: "flip-animation" }, h("div", { key: '95a78fbba1f340d8a56b24a9dda4a4c888cc2d44', class: "id-card-icon" }), h("div", { key: 'bb8e11d34b31cb0d28c2b1f2d02a1cc85b8dd1b3', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (h("div", { key: 'ae2ce6604dccccb27995cbcc0ba0635c36125e9f', class: "success-animation" }, h("div", { key: '713cdfca5618225281106ed9da9c30c7f00d2f96', class: "check-icon" }), h("div", { key: '9ac255f66474d6a0d546c4f28dd1464dc1db199c', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (h("div", { key: 'f3d08c1ba7596c70b3184b6023e4c330cadf395e', class: "loading-overlay" }, h("div", { key: '989ebafd27b84d6e86483569fb28a2df3dc587d5', class: "loading-spinner" }), h("div", { key: 'b14a356fde939b9bd52733bafaba762e5c5b2503', class: "loading-text" }, this.statusMessage))), h("div", { key: '3ff6690dc129f0981eb21de785c631c1221dbd5b', class: "watermark" }, h("img", { key: '67ad3a5d54c9dd1b36fae6f5857695b8dd1a2447', 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 +965,8 @@ export class JaakStamps {
             "sideAlignment": {},
             "isDetectionPaused": {},
             "isLoading": {},
-            "isModelPreloaded": {}
+            "isModelPreloaded": {},
+            "isMaskReady": {}
         };
     }
     static get events() {