@jaak.ai/stamps 2.0.0-dev.18 → 2.0.0-dev.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -3
- package/dist/cjs/jaak-stamps-webcomponent.cjs.js +1 -1
- package/dist/cjs/jaak-stamps.cjs.entry.js +217 -17
- package/dist/cjs/jaak-stamps.cjs.entry.js.map +1 -1
- package/dist/cjs/jaak-stamps.entry.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/my-component/my-component.css +10 -7
- package/dist/collection/components/my-component/my-component.js +218 -17
- package/dist/collection/components/my-component/my-component.js.map +1 -1
- package/dist/components/jaak-stamps.js +218 -17
- package/dist/components/jaak-stamps.js.map +1 -1
- package/dist/esm/jaak-stamps-webcomponent.js +1 -1
- package/dist/esm/jaak-stamps.entry.js +217 -17
- package/dist/esm/jaak-stamps.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js +1 -1
- package/dist/jaak-stamps-webcomponent/jaak-stamps.entry.esm.js.map +1 -1
- package/dist/jaak-stamps-webcomponent/p-25304323.entry.js +2 -0
- package/dist/jaak-stamps-webcomponent/p-25304323.entry.js.map +1 -0
- package/dist/types/components/my-component/my-component.d.ts +6 -2
- package/package.json +1 -1
- package/dist/jaak-stamps-webcomponent/p-4688150a.entry.js +0 -2
- package/dist/jaak-stamps-webcomponent/p-4688150a.entry.js.map +0 -1
package/README.md
CHANGED
|
@@ -58,6 +58,12 @@ yarn add @jaak.ai/stamps
|
|
|
58
58
|
// event.detail contiene las imágenes capturadas
|
|
59
59
|
});
|
|
60
60
|
|
|
61
|
+
// Escuchar evento de componente listo
|
|
62
|
+
detector.addEventListener('isReady', (event) => {
|
|
63
|
+
console.log('Componente listo:', event.detail);
|
|
64
|
+
// event.detail indica si el componente está listo (true/false)
|
|
65
|
+
});
|
|
66
|
+
|
|
61
67
|
function startCapture() {
|
|
62
68
|
detector.startCapture();
|
|
63
69
|
}
|
|
@@ -134,7 +140,8 @@ import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
|
|
|
134
140
|
<jaak-stamps
|
|
135
141
|
#detector
|
|
136
142
|
[debug]="false"
|
|
137
|
-
(captureCompleted)="onCaptureCompleted($event)"
|
|
143
|
+
(captureCompleted)="onCaptureCompleted($event)"
|
|
144
|
+
(isReady)="onComponentReady($event)">
|
|
138
145
|
</jaak-stamps>
|
|
139
146
|
|
|
140
147
|
<div class="controls">
|
|
@@ -211,6 +218,11 @@ export class AppComponent implements OnInit {
|
|
|
211
218
|
this.capturedData = event.detail;
|
|
212
219
|
this.isCompleted = true;
|
|
213
220
|
}
|
|
221
|
+
|
|
222
|
+
onComponentReady(event: any) {
|
|
223
|
+
console.log('Componente listo en Angular:', event.detail);
|
|
224
|
+
// El componente está listo para iniciar detección
|
|
225
|
+
}
|
|
214
226
|
}
|
|
215
227
|
```
|
|
216
228
|
|
|
@@ -229,7 +241,7 @@ import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react
|
|
|
229
241
|
// Importar el web component
|
|
230
242
|
import '@jaak.ai/stamps/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js';
|
|
231
243
|
|
|
232
|
-
const JaakStampsWrapper = forwardRef(({ debug = false, onCaptureCompleted }, ref) => {
|
|
244
|
+
const JaakStampsWrapper = forwardRef(({ debug = false, onCaptureCompleted, onIsReady }, ref) => {
|
|
233
245
|
const elementRef = useRef(null);
|
|
234
246
|
|
|
235
247
|
useImperativeHandle(ref, () => ({
|
|
@@ -252,14 +264,22 @@ const JaakStampsWrapper = forwardRef(({ debug = false, onCaptureCompleted }, ref
|
|
|
252
264
|
}
|
|
253
265
|
};
|
|
254
266
|
|
|
267
|
+
const handleIsReady = (event) => {
|
|
268
|
+
if (onIsReady) {
|
|
269
|
+
onIsReady(event.detail);
|
|
270
|
+
}
|
|
271
|
+
};
|
|
272
|
+
|
|
255
273
|
if (element) {
|
|
256
274
|
element.addEventListener('captureCompleted', handleCaptureCompleted);
|
|
275
|
+
element.addEventListener('isReady', handleIsReady);
|
|
257
276
|
|
|
258
277
|
return () => {
|
|
259
278
|
element.removeEventListener('captureCompleted', handleCaptureCompleted);
|
|
279
|
+
element.removeEventListener('isReady', handleIsReady);
|
|
260
280
|
};
|
|
261
281
|
}
|
|
262
|
-
}, [onCaptureCompleted]);
|
|
282
|
+
}, [onCaptureCompleted, onIsReady]);
|
|
263
283
|
|
|
264
284
|
return (
|
|
265
285
|
<jaak-stamps
|
|
@@ -290,6 +310,11 @@ function App() {
|
|
|
290
310
|
setIsCompleted(true);
|
|
291
311
|
};
|
|
292
312
|
|
|
313
|
+
const handleIsReady = (isReady) => {
|
|
314
|
+
console.log('Componente listo:', isReady);
|
|
315
|
+
// El componente está listo para iniciar detección
|
|
316
|
+
};
|
|
317
|
+
|
|
293
318
|
const preloadModel = async () => {
|
|
294
319
|
try {
|
|
295
320
|
const result = await detectorRef.current?.preloadModel();
|
|
@@ -340,6 +365,7 @@ function App() {
|
|
|
340
365
|
ref={detectorRef}
|
|
341
366
|
debug={false}
|
|
342
367
|
onCaptureCompleted={handleCaptureCompleted}
|
|
368
|
+
onIsReady={handleIsReady}
|
|
343
369
|
/>
|
|
344
370
|
|
|
345
371
|
<div className="controls">
|
|
@@ -428,6 +454,7 @@ export default App;
|
|
|
428
454
|
| Evento | Payload | Descripción |
|
|
429
455
|
|--------|---------|-------------|
|
|
430
456
|
| `captureCompleted` | `CapturedImages` | Se emite cuando se completa el proceso de captura |
|
|
457
|
+
| `isReady` | `boolean` | Se emite cuando el componente está listo para comenzar la detección (modelo ONNX cargado) |
|
|
431
458
|
|
|
432
459
|
### Tipos de Datos
|
|
433
460
|
|
|
@@ -18,7 +18,7 @@ var patchBrowser = () => {
|
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(async (options) => {
|
|
20
20
|
await index.globalScripts();
|
|
21
|
-
return index.bootstrapLazy([["jaak-stamps.cjs",[[1,"jaak-stamps",{"debug":[4],"alignmentTolerance":[2,"alignment-tolerance"],"isVideoActive":[32],"statusMessage":[32],"statusColor":[32],"bestScore":[32],"capturedFullFrame":[32],"capturedCroppedId":[32],"capturedBackFullFrame":[32],"capturedBackCroppedId":[32],"captureStep":[32],"isCapturing":[32],"showFlipAnimation":[32],"showSuccessAnimation":[32],"shouldMirrorVideo":[32],"sideAlignment":[32],"isDetectionPaused":[32],"isLoading":[32],"isModelPreloaded":[32],"getCapturedImages":[64],"isProcessCompleted":[64],"startCapture":[64],"stopCapture":[64],"resetCapture":[64],"getStatus":[64],"preloadModel":[64],"skipBackCapture":[64]}]]]], options);
|
|
21
|
+
return index.bootstrapLazy([["jaak-stamps.cjs",[[1,"jaak-stamps",{"debug":[4],"alignmentTolerance":[2,"alignment-tolerance"],"isVideoActive":[32],"statusMessage":[32],"statusColor":[32],"bestScore":[32],"capturedFullFrame":[32],"capturedCroppedId":[32],"capturedBackFullFrame":[32],"capturedBackCroppedId":[32],"captureStep":[32],"isCapturing":[32],"showFlipAnimation":[32],"showSuccessAnimation":[32],"shouldMirrorVideo":[32],"sideAlignment":[32],"isDetectionPaused":[32],"isLoading":[32],"isModelPreloaded":[32],"isMaskReady":[32],"getCapturedImages":[64],"isProcessCompleted":[64],"startCapture":[64],"stopCapture":[64],"resetCapture":[64],"getStatus":[64],"preloadModel":[64],"skipBackCapture":[64]}]]]], options);
|
|
22
22
|
});
|
|
23
23
|
|
|
24
24
|
exports.setNonce = index.setNonce;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DGM9-FNg.js');
|
|
4
4
|
|
|
5
|
-
const myComponentCss = ":host{display:block;font-family:system-ui, -apple-system, sans-serif;color:#1a1a1a}.detector-container{display:flex;flex-direction:column;align-items:center}h1{font-size:24px;font-weight:500;color:#333;margin:0 0 24px 0}.video-container{position:relative;width:100%;
|
|
5
|
+
const myComponentCss = ":host{display:block;width:100%;height:100%;font-family:system-ui, -apple-system, sans-serif;color:#1a1a1a}.detector-container{display:flex;flex-direction:column;align-items:center;width:100%;height:100%}h1{font-size:24px;font-weight:500;color:#333;margin:0 0 24px 0}.video-container{position:relative;width:100%;height:100%;background:#333;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}video,canvas{position:absolute;width:100%;height:100%;border-radius:8px}video.mirror,canvas.mirror{transform:rotateY(180deg)}canvas{z-index:1}video{z-index:0}.status{margin-top:16px;font-size:12px;color:#666}.overlay-mask{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:block;pointer-events:none}.card-outline{position:absolute;top:var(--mask-center-y, 50%);left:var(--mask-center-x, 50%);transform:translate(-50%, -50%);width:var(--mask-width, 88%);height:var(--mask-height, 55%);border:none;border-radius:4px;background:transparent;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7);opacity:0.8}.card-outline.perfect-match{box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7)}.side{position:absolute;background:#999;transition:background-color 0.3s ease}.side.aligned{background:#28a745}.side-top{top:0;left:0;width:100%;height:3px}.side-right{top:0;right:0;width:3px;height:100%}.side-bottom{bottom:0;left:0;width:100%;height:3px}.side-left{top:0;left:0;width:3px;height:100%}.corner{position:absolute;width:20px;height:20px;border:2px solid #999;z-index:12}.corner-tl{top:-10px;left:-10px;border-right:none;border-bottom:none}.corner-tr{top:-10px;right:-10px;border-left:none;border-bottom:none}.corner-bl{bottom:-10px;left:-10px;border-right:none;border-top:none}.corner-br{bottom:-10px;right:-10px;border-left:none;border-top:none}.corner.perfect-match{border-color:#28a745}.guide-text{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#fff;font-size:14px;font-weight:600;text-align:center;white-space:normal;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;z-index:20}.capture-animation{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;z-index:30;pointer-events:none;animation:captureFlash 0.6s ease-out}@keyframes captureFlash{0%{opacity:0}15%{opacity:0.8}30%{opacity:0}45%{opacity:0.4}60%{opacity:0}100%{opacity:0}}.card-outline.capturing{animation:pulseGreen 0.6s ease-out}@keyframes pulseGreen{0%{border-color:#28a745;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(40, 167, 69, 0)}50%{border-color:#28a745;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 8px rgba(40, 167, 69, 0.6)}100%{border-color:#28a745;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(40, 167, 69, 0)}}.flip-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showFlipInstruction 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.id-card-icon{width:80px;height:50px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:8px;position:relative;animation:flipCard 2s ease-in-out infinite;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3)}.id-card-icon::before{content:'';position:absolute;top:8px;left:8px;width:16px;height:12px;background:rgba(255, 255, 255, 0.9);border-radius:2px}.id-card-icon::after{content:'';position:absolute;top:25px;left:8px;width:64px;height:3px;background:rgba(255, 255, 255, 0.7);border-radius:1px;box-shadow:0 6px 0 rgba(255, 255, 255, 0.7), 0 12px 0 rgba(255, 255, 255, 0.7)}.flip-text{margin-top:12px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px}@keyframes showFlipInstruction{0%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}}@keyframes flipCard{0%{transform:rotateY(0deg)}50%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}.success-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showSuccessMessage 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.check-icon{width:80px;height:80px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:50%;position:relative;animation:bounceSuccess 0.6s ease-out;box-shadow:0 4px 16px rgba(108, 117, 125, 0.4);display:flex;align-items:center;justify-content:center}.check-icon::before{content:'';position:absolute;width:20px;height:35px;border:4px solid #fff;border-top:none;border-left:none;transform:rotate(45deg);animation:drawCheck 0.4s ease-out 0.2s both}.success-text{margin-top:16px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;animation:fadeInUp 0.5s ease-out 0.4s both}@keyframes showSuccessMessage{0%{opacity:0;transform:translate(-50%, -50%) scale(0.5)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.9)}}@keyframes bounceSuccess{0%{transform:scale(0)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes drawCheck{0%{width:0;height:0}50%{width:20px;height:0}100%{width:20px;height:35px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.skip-button{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.skip-button:hover{background:#f8f9fa}.skip-button:active{background:#e9ecef;transform:translateX(-50%) translateY(0)}.watermark{position:absolute;bottom:12px;right:12px;z-index:15;pointer-events:none;opacity:0.7}.watermark img{height:24px;width:auto;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.8);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;border-radius:20px}.loading-spinner{width:60px;height:60px;border:4px solid rgba(255, 255, 255, 0.2);border-top:4px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}.loading-text{color:white;font-size:16px;font-weight:500;text-align:center;opacity:0.9}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
|
|
6
6
|
|
|
7
7
|
const JaakStamps = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -37,6 +37,7 @@ const JaakStamps = class {
|
|
|
37
37
|
isDetectionPaused = false;
|
|
38
38
|
isLoading = false;
|
|
39
39
|
isModelPreloaded = false;
|
|
40
|
+
isMaskReady = false;
|
|
40
41
|
videoRef;
|
|
41
42
|
canvasRef;
|
|
42
43
|
session;
|
|
@@ -60,8 +61,8 @@ const JaakStamps = class {
|
|
|
60
61
|
MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/detector-nano.onnx";
|
|
61
62
|
INPUT_SIZE = 320;
|
|
62
63
|
CONFIDENCE_THRESHOLD = 0.6;
|
|
63
|
-
|
|
64
|
-
|
|
64
|
+
// ISO/IEC 7810 ID-1 standard dimensions (85.60mm x 53.98mm)
|
|
65
|
+
ID1_ASPECT_RATIO = 85.60 / 53.98; // 1.5863320574...
|
|
65
66
|
debugLog(...args) {
|
|
66
67
|
if (this.debug) {
|
|
67
68
|
console.log(...args);
|
|
@@ -95,6 +96,91 @@ const JaakStamps = class {
|
|
|
95
96
|
}
|
|
96
97
|
// Initialize canvas pool for better performance
|
|
97
98
|
this.initializeCanvasPool();
|
|
99
|
+
this.setupResizeObserver();
|
|
100
|
+
}
|
|
101
|
+
setupResizeObserver() {
|
|
102
|
+
if ('ResizeObserver' in window && this.canvasRef) {
|
|
103
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
104
|
+
this.handleResize();
|
|
105
|
+
});
|
|
106
|
+
resizeObserver.observe(this.canvasRef.parentElement);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
handleResize() {
|
|
110
|
+
if (this.canvasRef) {
|
|
111
|
+
const container = this.canvasRef.parentElement;
|
|
112
|
+
const rect = container.getBoundingClientRect();
|
|
113
|
+
// Set canvas size to match container
|
|
114
|
+
this.canvasRef.width = rect.width;
|
|
115
|
+
this.canvasRef.height = rect.height;
|
|
116
|
+
// Update mask positioning based on container and video dimensions
|
|
117
|
+
this.updateMaskDimensions(rect);
|
|
118
|
+
this.debugLog('📐 Canvas resized:', { width: rect.width, height: rect.height });
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
updateMaskDimensions(containerRect) {
|
|
122
|
+
if (!this.videoRef)
|
|
123
|
+
return;
|
|
124
|
+
const videoWidth = this.videoRef.videoWidth;
|
|
125
|
+
const videoHeight = this.videoRef.videoHeight;
|
|
126
|
+
if (videoWidth === 0 || videoHeight === 0)
|
|
127
|
+
return;
|
|
128
|
+
// Calculate video aspect ratio and container aspect ratio
|
|
129
|
+
const videoAspectRatio = videoWidth / videoHeight;
|
|
130
|
+
const containerAspectRatio = containerRect.width / containerRect.height;
|
|
131
|
+
// Determine how video fits in container (letterboxed or pillarboxed)
|
|
132
|
+
let displayedVideoWidth, displayedVideoHeight;
|
|
133
|
+
let videoOffsetX = 0, videoOffsetY = 0;
|
|
134
|
+
if (videoAspectRatio > containerAspectRatio) {
|
|
135
|
+
// Video is wider - letterboxed (black bars top/bottom)
|
|
136
|
+
displayedVideoWidth = containerRect.width;
|
|
137
|
+
displayedVideoHeight = containerRect.width / videoAspectRatio;
|
|
138
|
+
videoOffsetY = (containerRect.height - displayedVideoHeight) / 2;
|
|
139
|
+
}
|
|
140
|
+
else {
|
|
141
|
+
// Video is taller - pillarboxed (black bars left/right)
|
|
142
|
+
displayedVideoHeight = containerRect.height;
|
|
143
|
+
displayedVideoWidth = containerRect.height * videoAspectRatio;
|
|
144
|
+
videoOffsetX = (containerRect.width - displayedVideoWidth) / 2;
|
|
145
|
+
}
|
|
146
|
+
// Calculate maximum possible mask size while preserving exact ID-1 aspect ratio
|
|
147
|
+
// Determine the limiting dimension based on video orientation and ID-1 proportions
|
|
148
|
+
// Calculate what would be the max width if limited by video height
|
|
149
|
+
const maxWidthByHeight = displayedVideoHeight * this.ID1_ASPECT_RATIO;
|
|
150
|
+
let maskWidthInVideo, maskHeightInVideo;
|
|
151
|
+
if (maxWidthByHeight <= displayedVideoWidth) {
|
|
152
|
+
// Video height is the limiting factor
|
|
153
|
+
maskHeightInVideo = displayedVideoHeight * 0.9; // Use 90% of available height
|
|
154
|
+
maskWidthInVideo = maskHeightInVideo * this.ID1_ASPECT_RATIO;
|
|
155
|
+
}
|
|
156
|
+
else {
|
|
157
|
+
// Video width is the limiting factor
|
|
158
|
+
maskWidthInVideo = displayedVideoWidth * 0.9; // Use 90% of available width
|
|
159
|
+
maskHeightInVideo = maskWidthInVideo / this.ID1_ASPECT_RATIO;
|
|
160
|
+
}
|
|
161
|
+
// Convert to percentages of the container
|
|
162
|
+
const maskWidthPercent = (maskWidthInVideo / containerRect.width) * 100;
|
|
163
|
+
const maskHeightPercent = (maskHeightInVideo / containerRect.height) * 100;
|
|
164
|
+
// Calculate the center position of the displayed video area
|
|
165
|
+
const videoCenterX = videoOffsetX + (displayedVideoWidth / 2);
|
|
166
|
+
const videoCenterY = videoOffsetY + (displayedVideoHeight / 2);
|
|
167
|
+
// Convert to percentages of the container
|
|
168
|
+
const videoCenterXPercent = (videoCenterX / containerRect.width) * 100;
|
|
169
|
+
const videoCenterYPercent = (videoCenterY / containerRect.height) * 100;
|
|
170
|
+
// Update CSS custom properties for mask sizing and positioning
|
|
171
|
+
this.el.style.setProperty('--mask-width', `${maskWidthPercent}%`);
|
|
172
|
+
this.el.style.setProperty('--mask-height', `${maskHeightPercent}%`);
|
|
173
|
+
this.el.style.setProperty('--mask-center-x', `${videoCenterXPercent}%`);
|
|
174
|
+
this.el.style.setProperty('--mask-center-y', `${videoCenterYPercent}%`);
|
|
175
|
+
// Mark mask as ready now that dimensions are calculated
|
|
176
|
+
this.isMaskReady = true;
|
|
177
|
+
this.debugLog('🎯 Mask dimensions updated:', {
|
|
178
|
+
video: { width: videoWidth, height: videoHeight },
|
|
179
|
+
displayed: { width: displayedVideoWidth, height: displayedVideoHeight },
|
|
180
|
+
mask: { widthPercent: maskWidthPercent, heightPercent: maskHeightPercent },
|
|
181
|
+
center: { x: videoCenterXPercent, y: videoCenterYPercent },
|
|
182
|
+
offset: { x: videoOffsetX, y: videoOffsetY }
|
|
183
|
+
});
|
|
98
184
|
}
|
|
99
185
|
initializeCanvasPool() {
|
|
100
186
|
// Preprocess canvas - reused for every inference
|
|
@@ -226,14 +312,45 @@ const JaakStamps = class {
|
|
|
226
312
|
this.isModelPreloaded = false;
|
|
227
313
|
this.debugLog('🧹 Canvas pool cleaned up');
|
|
228
314
|
}
|
|
315
|
+
async getMaxResolution() {
|
|
316
|
+
try {
|
|
317
|
+
// Primero obtén un stream básico para acceder a las capacidades
|
|
318
|
+
const tempStream = await navigator.mediaDevices.getUserMedia({
|
|
319
|
+
video: { facingMode: "environment" }
|
|
320
|
+
});
|
|
321
|
+
const videoTrack = tempStream.getVideoTracks()[0];
|
|
322
|
+
const capabilities = videoTrack.getCapabilities();
|
|
323
|
+
// Detener el stream temporal
|
|
324
|
+
tempStream.getTracks().forEach(track => track.stop());
|
|
325
|
+
// Construir restricciones con la resolución máxima
|
|
326
|
+
const constraints = {
|
|
327
|
+
facingMode: "environment"
|
|
328
|
+
};
|
|
329
|
+
if (capabilities.width && capabilities.height) {
|
|
330
|
+
constraints.width = { ideal: capabilities.width.max };
|
|
331
|
+
constraints.height = { ideal: capabilities.height.max };
|
|
332
|
+
this.debugLog('📐 Max resolution capabilities:', {
|
|
333
|
+
width: capabilities.width.max,
|
|
334
|
+
height: capabilities.height.max
|
|
335
|
+
});
|
|
336
|
+
}
|
|
337
|
+
return constraints;
|
|
338
|
+
}
|
|
339
|
+
catch (err) {
|
|
340
|
+
this.debugLog('⚠️ Could not get capabilities, using fallback');
|
|
341
|
+
// Fallback para dispositivos que no soportan getCapabilities
|
|
342
|
+
return {
|
|
343
|
+
facingMode: "environment",
|
|
344
|
+
width: { ideal: 1920 },
|
|
345
|
+
height: { ideal: 1080 }
|
|
346
|
+
};
|
|
347
|
+
}
|
|
348
|
+
}
|
|
229
349
|
async setupCamera() {
|
|
230
350
|
try {
|
|
351
|
+
const constraints = await this.getMaxResolution();
|
|
231
352
|
const stream = await navigator.mediaDevices.getUserMedia({
|
|
232
|
-
video:
|
|
233
|
-
width: { exact: 640 },
|
|
234
|
-
height: { exact: 640 },
|
|
235
|
-
facingMode: "environment"
|
|
236
|
-
},
|
|
353
|
+
video: constraints,
|
|
237
354
|
audio: false
|
|
238
355
|
});
|
|
239
356
|
if (this.videoRef) {
|
|
@@ -248,6 +365,12 @@ const JaakStamps = class {
|
|
|
248
365
|
this.videoRef.onloadedmetadata = async () => {
|
|
249
366
|
await this.videoRef.play();
|
|
250
367
|
this.isVideoActive = true;
|
|
368
|
+
// Update mask dimensions once video is loaded
|
|
369
|
+
if (this.canvasRef) {
|
|
370
|
+
const container = this.canvasRef.parentElement;
|
|
371
|
+
const rect = container.getBoundingClientRect();
|
|
372
|
+
this.updateMaskDimensions(rect);
|
|
373
|
+
}
|
|
251
374
|
resolve();
|
|
252
375
|
};
|
|
253
376
|
});
|
|
@@ -425,13 +548,57 @@ const JaakStamps = class {
|
|
|
425
548
|
return isCentered && isGoodSize;
|
|
426
549
|
}
|
|
427
550
|
checkSideAlignment(box) {
|
|
428
|
-
|
|
551
|
+
if (!this.videoRef)
|
|
552
|
+
return { top: false, right: false, bottom: false, left: false };
|
|
553
|
+
// Get video dimensions to calculate actual mask boundaries in model space
|
|
554
|
+
const videoWidth = this.videoRef.videoWidth;
|
|
555
|
+
const videoHeight = this.videoRef.videoHeight;
|
|
556
|
+
if (videoWidth === 0 || videoHeight === 0) {
|
|
557
|
+
return { top: false, right: false, bottom: false, left: false };
|
|
558
|
+
}
|
|
559
|
+
// Calculate video aspect ratio
|
|
560
|
+
const videoAspectRatio = videoWidth / videoHeight;
|
|
561
|
+
// The model sees video stretched to 320x320, but we need to calculate where
|
|
562
|
+
// the mask should be in this distorted space to match the visual mask
|
|
563
|
+
// In the visual display, we calculate mask size based on the limiting dimension
|
|
564
|
+
// We need to replicate this logic but account for the distortion in model space
|
|
565
|
+
// Calculate the "display" dimensions (what the visual mask calculations use)
|
|
566
|
+
const containerAspectRatio = 1; // Assume square container for simplicity
|
|
567
|
+
let displayedVideoWidth, displayedVideoHeight;
|
|
568
|
+
if (videoAspectRatio > containerAspectRatio) {
|
|
569
|
+
// Video is wider - letterboxed in display
|
|
570
|
+
displayedVideoWidth = this.INPUT_SIZE;
|
|
571
|
+
displayedVideoHeight = this.INPUT_SIZE / videoAspectRatio;
|
|
572
|
+
}
|
|
573
|
+
else {
|
|
574
|
+
// Video is taller - pillarboxed in display
|
|
575
|
+
displayedVideoHeight = this.INPUT_SIZE;
|
|
576
|
+
displayedVideoWidth = this.INPUT_SIZE * videoAspectRatio;
|
|
577
|
+
}
|
|
578
|
+
// Calculate mask dimensions using the same logic as updateMaskDimensions
|
|
579
|
+
const maxWidthByHeight = displayedVideoHeight * this.ID1_ASPECT_RATIO;
|
|
580
|
+
let visualMaskWidth, visualMaskHeight;
|
|
581
|
+
if (maxWidthByHeight <= displayedVideoWidth) {
|
|
582
|
+
// Video height is the limiting factor
|
|
583
|
+
visualMaskHeight = displayedVideoHeight * 0.9;
|
|
584
|
+
visualMaskWidth = visualMaskHeight * this.ID1_ASPECT_RATIO;
|
|
585
|
+
}
|
|
586
|
+
else {
|
|
587
|
+
// Video width is the limiting factor
|
|
588
|
+
visualMaskWidth = displayedVideoWidth * 0.9;
|
|
589
|
+
visualMaskHeight = visualMaskWidth / this.ID1_ASPECT_RATIO;
|
|
590
|
+
}
|
|
591
|
+
// Now map these visual mask dimensions to the distorted model space
|
|
592
|
+
// The model stretches video to 320x320, so we need to apply the inverse transformation
|
|
593
|
+
const modelMaskWidth = visualMaskWidth * (this.INPUT_SIZE / displayedVideoWidth);
|
|
594
|
+
const modelMaskHeight = visualMaskHeight * (this.INPUT_SIZE / displayedVideoHeight);
|
|
595
|
+
// Calculate mask boundaries in model coordinate system (always centered in 320x320)
|
|
429
596
|
const maskCenterX = this.INPUT_SIZE / 2;
|
|
430
597
|
const maskCenterY = this.INPUT_SIZE / 2;
|
|
431
|
-
const maskLeft = maskCenterX - (
|
|
432
|
-
const maskRight = maskCenterX + (
|
|
433
|
-
const maskTop = maskCenterY - (
|
|
434
|
-
const maskBottom = maskCenterY + (
|
|
598
|
+
const maskLeft = maskCenterX - (modelMaskWidth / 2);
|
|
599
|
+
const maskRight = maskCenterX + (modelMaskWidth / 2);
|
|
600
|
+
const maskTop = maskCenterY - (modelMaskHeight / 2);
|
|
601
|
+
const maskBottom = maskCenterY + (modelMaskHeight / 2);
|
|
435
602
|
// Obtener las coordenadas del documento detectado
|
|
436
603
|
let docLeft = box.x;
|
|
437
604
|
let docRight = box.x + box.w;
|
|
@@ -528,12 +695,45 @@ const JaakStamps = class {
|
|
|
528
695
|
}
|
|
529
696
|
}
|
|
530
697
|
drawDetections(ctx, boxes) {
|
|
531
|
-
|
|
532
|
-
|
|
698
|
+
if (!this.videoRef)
|
|
699
|
+
return;
|
|
700
|
+
// Get video and container dimensions
|
|
701
|
+
const videoWidth = this.videoRef.videoWidth;
|
|
702
|
+
const videoHeight = this.videoRef.videoHeight;
|
|
703
|
+
const containerWidth = this.canvasRef.width;
|
|
704
|
+
const containerHeight = this.canvasRef.height;
|
|
705
|
+
if (videoWidth === 0 || videoHeight === 0)
|
|
706
|
+
return;
|
|
707
|
+
// Calculate video aspect ratio and container aspect ratio
|
|
708
|
+
const videoAspectRatio = videoWidth / videoHeight;
|
|
709
|
+
const containerAspectRatio = containerWidth / containerHeight;
|
|
710
|
+
// Determine how video fits in container (same logic as updateMaskDimensions)
|
|
711
|
+
let displayedVideoWidth, displayedVideoHeight;
|
|
712
|
+
let videoOffsetX = 0, videoOffsetY = 0;
|
|
713
|
+
if (videoAspectRatio > containerAspectRatio) {
|
|
714
|
+
// Video is wider - letterboxed (black bars top/bottom)
|
|
715
|
+
displayedVideoWidth = containerWidth;
|
|
716
|
+
displayedVideoHeight = containerWidth / videoAspectRatio;
|
|
717
|
+
videoOffsetY = (containerHeight - displayedVideoHeight) / 2;
|
|
718
|
+
}
|
|
719
|
+
else {
|
|
720
|
+
// Video is taller - pillarboxed (black bars left/right)
|
|
721
|
+
displayedVideoHeight = containerHeight;
|
|
722
|
+
displayedVideoWidth = containerHeight * videoAspectRatio;
|
|
723
|
+
videoOffsetX = (containerWidth - displayedVideoWidth) / 2;
|
|
724
|
+
}
|
|
725
|
+
// Scale factor from model coordinates (320x320) to displayed video area
|
|
726
|
+
const scaleX = displayedVideoWidth / this.INPUT_SIZE;
|
|
727
|
+
const scaleY = displayedVideoHeight / this.INPUT_SIZE;
|
|
533
728
|
boxes.forEach(det => {
|
|
729
|
+
// Convert model coordinates to displayed video coordinates
|
|
730
|
+
const x = det.x * scaleX + videoOffsetX;
|
|
731
|
+
const y = det.y * scaleY + videoOffsetY;
|
|
732
|
+
const w = det.w * scaleX;
|
|
733
|
+
const h = det.h * scaleY;
|
|
534
734
|
ctx.strokeStyle = "#32406C";
|
|
535
735
|
ctx.lineWidth = 2;
|
|
536
|
-
ctx.strokeRect(
|
|
736
|
+
ctx.strokeRect(x, y, w, h);
|
|
537
737
|
});
|
|
538
738
|
}
|
|
539
739
|
takeScreenshot() {
|
|
@@ -699,7 +899,7 @@ const JaakStamps = class {
|
|
|
699
899
|
this.cleanup();
|
|
700
900
|
}
|
|
701
901
|
render() {
|
|
702
|
-
return (index.h("div", { key: '
|
|
902
|
+
return (index.h("div", { key: 'c95e9dee4b79561384fe1777b99a4cc4fa92bdbe', class: "detector-container" }, index.h("div", { key: 'a002fed79f5fd475a636818535a4a65324ec3fbf', class: "video-container" }, index.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' } }), index.h("canvas", { key: '1771841686ff849a70d3b8e23034a44880494c7e', ref: el => this.canvasRef = el, class: this.shouldMirrorVideo ? 'mirror' : '' }), this.isMaskReady && (index.h("div", { key: '29563822f3ec6c0d00ef20fb2da346b2d9c24175', class: "overlay-mask" }, index.h("div", { key: 'e70ec55cfc25697e62981ffbfb5c78dc32821daa', class: "card-outline" }, index.h("div", { key: '1ae7dae4facd6971a3031cec4992f657192855da', class: "side side-top" }), index.h("div", { key: 'efec73ad8e754a279443a93f05c7e416476540c3', class: "side side-right" }), index.h("div", { key: '42dca6ffed2ac93bffd48877b3ef05e11aa16bac', class: "side side-bottom" }), index.h("div", { key: 'e872078e654987be4d02600b866f39767bff6c91', class: "side side-left" }), index.h("div", { key: '71dc7e353e6a11ddc6e300ddd6a96c483dc8e43d', class: "corner corner-tl" }), index.h("div", { key: 'e380c3c0526f8c6c5f6caefc2ea1feabc17b0b4a', class: "corner corner-tr" }), index.h("div", { key: 'de4720a6418ec86931c24a0542cffdbba8211b22', class: "corner corner-bl" }), index.h("div", { key: '338a487a89c9c4d1662428fdc73cdb355766149c', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (index.h("div", { key: '34190a47c348dd00d48467c4edfd80efaf0494cd', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (index.h("button", { key: 'c585163a9db511b461d575594b2c8f5a79cbc1d2', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")))), this.isCapturing && (index.h("div", { key: 'bc56a29c90d7177cad35c930ed54304bb20f700e', class: "capture-animation" })), this.showFlipAnimation && (index.h("div", { key: '1d636a6dde80ec90f6db7868a0abd163af8a8836', class: "flip-animation" }, index.h("div", { key: '95a78fbba1f340d8a56b24a9dda4a4c888cc2d44', class: "id-card-icon" }), index.h("div", { key: 'bb8e11d34b31cb0d28c2b1f2d02a1cc85b8dd1b3', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (index.h("div", { key: 'ae2ce6604dccccb27995cbcc0ba0635c36125e9f', class: "success-animation" }, index.h("div", { key: '713cdfca5618225281106ed9da9c30c7f00d2f96', class: "check-icon" }), index.h("div", { key: '9ac255f66474d6a0d546c4f28dd1464dc1db199c', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (index.h("div", { key: 'f3d08c1ba7596c70b3184b6023e4c330cadf395e', class: "loading-overlay" }, index.h("div", { key: '989ebafd27b84d6e86483569fb28a2df3dc587d5', class: "loading-spinner" }), index.h("div", { key: 'b14a356fde939b9bd52733bafaba762e5c5b2503', class: "loading-text" }, this.statusMessage))), index.h("div", { key: '3ff6690dc129f0981eb21de785c631c1221dbd5b', class: "watermark" }, index.h("img", { key: '67ad3a5d54c9dd1b36fae6f5857695b8dd1a2447', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
|
|
703
903
|
}
|
|
704
904
|
};
|
|
705
905
|
JaakStamps.style = myComponentCss;
|