@jaak.ai/stamps 2.0.0-dev.26 → 2.0.0-dev.27
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/dist/cjs/jaak-stamps.cjs.entry.js +80 -15
- package/dist/cjs/jaak-stamps.cjs.entry.js.map +1 -1
- package/dist/cjs/jaak-stamps.entry.cjs.js.map +1 -1
- package/dist/collection/components/my-component/my-component.css +25 -0
- package/dist/collection/components/my-component/my-component.js +79 -14
- package/dist/collection/components/my-component/my-component.js.map +1 -1
- package/dist/components/jaak-stamps.js +80 -15
- package/dist/components/jaak-stamps.js.map +1 -1
- package/dist/esm/jaak-stamps.entry.js +80 -15
- package/dist/esm/jaak-stamps.entry.js.map +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-eb318f43.entry.js +2 -0
- package/dist/jaak-stamps-webcomponent/p-eb318f43.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/jaak-stamps-webcomponent/p-14eb13d8.entry.js +0 -2
- package/dist/jaak-stamps-webcomponent/p-14eb13d8.entry.js.map +0 -1
|
@@ -754,4 +754,29 @@ video {
|
|
|
754
754
|
100% {
|
|
755
755
|
transform: rotate(360deg);
|
|
756
756
|
}
|
|
757
|
+
}
|
|
758
|
+
|
|
759
|
+
/* Status bar always visible */
|
|
760
|
+
.status-bar {
|
|
761
|
+
position: absolute;
|
|
762
|
+
bottom: 10px;
|
|
763
|
+
left: 50%;
|
|
764
|
+
transform: translateX(-50%);
|
|
765
|
+
background: rgba(0, 0, 0, 0.7);
|
|
766
|
+
border-radius: 15px;
|
|
767
|
+
padding: 8px 16px;
|
|
768
|
+
z-index: 40;
|
|
769
|
+
backdrop-filter: blur(5px);
|
|
770
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
.status-message {
|
|
774
|
+
font-size: 12px;
|
|
775
|
+
font-weight: 500;
|
|
776
|
+
text-align: center;
|
|
777
|
+
color: #fff;
|
|
778
|
+
white-space: nowrap;
|
|
779
|
+
max-width: 280px;
|
|
780
|
+
overflow: hidden;
|
|
781
|
+
text-overflow: ellipsis;
|
|
757
782
|
}
|
|
@@ -301,8 +301,10 @@ export class JaakStamps {
|
|
|
301
301
|
return;
|
|
302
302
|
}
|
|
303
303
|
// Show loading state
|
|
304
|
-
this.
|
|
305
|
-
|
|
304
|
+
if (this.debug) {
|
|
305
|
+
this.statusMessage = "Cambiando cámara...";
|
|
306
|
+
this.statusColor = "#007bff";
|
|
307
|
+
}
|
|
306
308
|
// Stop current stream
|
|
307
309
|
if (this.videoStream) {
|
|
308
310
|
this.videoStream.getTracks().forEach(track => track.stop());
|
|
@@ -329,15 +331,26 @@ export class JaakStamps {
|
|
|
329
331
|
for (let attempt = 1; attempt <= maxRetries; attempt++) {
|
|
330
332
|
try {
|
|
331
333
|
await this.setupCamera();
|
|
334
|
+
if (this.debug) {
|
|
335
|
+
this.statusMessage = "Cámara configurada correctamente";
|
|
336
|
+
this.statusColor = "#28a745";
|
|
337
|
+
}
|
|
332
338
|
return; // Success
|
|
333
339
|
}
|
|
334
340
|
catch (error) {
|
|
335
341
|
this.debugLog(`❌ Camera setup attempt ${attempt} failed:`, error);
|
|
336
342
|
if (attempt === maxRetries) {
|
|
337
343
|
// Last attempt failed, handle the error
|
|
344
|
+
this.statusMessage = "Error al configurar la cámara";
|
|
345
|
+
this.statusColor = "#ff6b6b";
|
|
338
346
|
this.handleCameraPermissionError(error);
|
|
339
347
|
throw error;
|
|
340
348
|
}
|
|
349
|
+
// Update status for retry attempt
|
|
350
|
+
if (this.debug) {
|
|
351
|
+
this.statusMessage = `Reintentando configuración de cámara... (${attempt}/${maxRetries})`;
|
|
352
|
+
this.statusColor = "#ffb366";
|
|
353
|
+
}
|
|
341
354
|
// Wait before retrying
|
|
342
355
|
await new Promise(resolve => setTimeout(resolve, 500 * attempt));
|
|
343
356
|
}
|
|
@@ -361,22 +374,48 @@ export class JaakStamps {
|
|
|
361
374
|
await this.switchCamera(nextCamera.deviceId);
|
|
362
375
|
}
|
|
363
376
|
async componentDidLoad() {
|
|
377
|
+
if (this.debug) {
|
|
378
|
+
// Show detailed initialization loading state only in debug mode
|
|
379
|
+
this.isLoading = true;
|
|
380
|
+
this.statusMessage = 'Inicializando componente...';
|
|
381
|
+
this.statusColor = '#007bff';
|
|
382
|
+
// Small delay to ensure initialization message is visible
|
|
383
|
+
await new Promise(resolve => setTimeout(resolve, 500));
|
|
384
|
+
}
|
|
364
385
|
this.validateMaskSize();
|
|
365
386
|
this.validateCropMargin();
|
|
366
387
|
this.validatePreferredCamera();
|
|
388
|
+
if (this.debug) {
|
|
389
|
+
// Update status for camera detection
|
|
390
|
+
this.statusMessage = 'Detectando cámaras disponibles...';
|
|
391
|
+
}
|
|
367
392
|
await this.detectDeviceTypeAndCameras();
|
|
368
393
|
if (!window.ort) {
|
|
394
|
+
if (this.debug) {
|
|
395
|
+
// Update status for ONNX runtime loading
|
|
396
|
+
this.statusMessage = 'Cargando librerías de IA...';
|
|
397
|
+
}
|
|
369
398
|
const script = document.createElement('script');
|
|
370
399
|
script.src = 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js';
|
|
371
400
|
document.head.appendChild(script);
|
|
372
401
|
// Wait for ONNX runtime to load before emitting ready event
|
|
373
402
|
script.onload = () => {
|
|
374
|
-
|
|
403
|
+
setTimeout(() => {
|
|
404
|
+
this.statusMessage = 'Presione el botón para activar la cámara';
|
|
405
|
+
this.statusColor = '#aaa';
|
|
406
|
+
this.isLoading = false;
|
|
407
|
+
this.emitReadyEvent();
|
|
408
|
+
}, 300);
|
|
375
409
|
};
|
|
376
410
|
}
|
|
377
411
|
else {
|
|
378
412
|
// ONNX runtime already loaded
|
|
379
|
-
|
|
413
|
+
setTimeout(() => {
|
|
414
|
+
this.statusMessage = 'Presione el botón para activar la cámara';
|
|
415
|
+
this.statusColor = '#aaa';
|
|
416
|
+
this.isLoading = false;
|
|
417
|
+
this.emitReadyEvent();
|
|
418
|
+
}, 300);
|
|
380
419
|
}
|
|
381
420
|
// Initialize canvas pool for better performance
|
|
382
421
|
this.initializeCanvasPool();
|
|
@@ -865,28 +904,48 @@ export class JaakStamps {
|
|
|
865
904
|
// Check if model is already preloaded
|
|
866
905
|
if (!this.session) {
|
|
867
906
|
this.isLoading = true;
|
|
868
|
-
this.
|
|
869
|
-
|
|
907
|
+
if (this.debug) {
|
|
908
|
+
this.statusMessage = "Cargando modelo de detección...";
|
|
909
|
+
this.statusColor = "#007bff";
|
|
910
|
+
}
|
|
911
|
+
else {
|
|
912
|
+
this.statusMessage = "Cargando modelos...";
|
|
913
|
+
this.statusColor = "#007bff";
|
|
914
|
+
}
|
|
870
915
|
const modelPath = this.MODEL_PATH;
|
|
871
916
|
this.debugLog('🤖 Loading detection model:', modelPath);
|
|
872
917
|
const sessionOptions = this.getSessionOptions();
|
|
873
918
|
this.session = await window.ort.InferenceSession.create(modelPath, sessionOptions);
|
|
874
919
|
// Load MobileNet model if classification is enabled and not already loaded
|
|
875
920
|
if (this.useDocumentClassification && !this.mobileNetSession) {
|
|
921
|
+
if (this.debug) {
|
|
922
|
+
this.statusMessage = "Cargando modelo de clasificación...";
|
|
923
|
+
}
|
|
876
924
|
await this.loadMobileNetModel();
|
|
877
925
|
}
|
|
878
926
|
this.isModelPreloaded = true;
|
|
927
|
+
if (this.debug) {
|
|
928
|
+
this.statusMessage = "Modelos cargados exitosamente";
|
|
929
|
+
}
|
|
879
930
|
this.emitReadyEvent();
|
|
880
931
|
}
|
|
881
932
|
else {
|
|
882
933
|
this.debugLog('🚀 Using preloaded models');
|
|
883
|
-
this.
|
|
884
|
-
|
|
934
|
+
if (this.debug) {
|
|
935
|
+
this.statusMessage = "Usando modelos precargados...";
|
|
936
|
+
this.statusColor = "#007bff";
|
|
937
|
+
}
|
|
938
|
+
}
|
|
939
|
+
if (this.debug) {
|
|
940
|
+
this.statusMessage = "Configurando cámara...";
|
|
885
941
|
}
|
|
886
|
-
this.statusMessage = "Configurando cámara...";
|
|
887
942
|
await this.setupCamera();
|
|
888
943
|
this.startTime = Date.now();
|
|
889
944
|
this.isLoading = false;
|
|
945
|
+
if (this.debug) {
|
|
946
|
+
this.statusMessage = "Detección activa - Busque su identificación";
|
|
947
|
+
this.statusColor = "#28a745";
|
|
948
|
+
}
|
|
890
949
|
this.detectFrame();
|
|
891
950
|
}
|
|
892
951
|
catch (err) {
|
|
@@ -1358,8 +1417,14 @@ export class JaakStamps {
|
|
|
1358
1417
|
this.videoStream.getTracks().forEach(track => track.stop());
|
|
1359
1418
|
this.videoStream = undefined;
|
|
1360
1419
|
this.isVideoActive = false;
|
|
1361
|
-
this.
|
|
1362
|
-
|
|
1420
|
+
if (this.debug) {
|
|
1421
|
+
this.statusMessage = "Cámara desactivada - Listo para nueva sesión";
|
|
1422
|
+
this.statusColor = "#6c757d";
|
|
1423
|
+
}
|
|
1424
|
+
else {
|
|
1425
|
+
this.statusMessage = "Presione el botón para activar la cámara";
|
|
1426
|
+
this.statusColor = "#aaa";
|
|
1427
|
+
}
|
|
1363
1428
|
}
|
|
1364
1429
|
this.isLoading = false;
|
|
1365
1430
|
// Limpiar canvas al finalizar sesión
|
|
@@ -1370,7 +1435,7 @@ export class JaakStamps {
|
|
|
1370
1435
|
this.cleanup();
|
|
1371
1436
|
}
|
|
1372
1437
|
render() {
|
|
1373
|
-
return (h("div", { key: '
|
|
1438
|
+
return (h("div", { key: '86ff6966e69804bea4faef5a9201480bd7ef5b9a', class: "detector-container" }, h("div", { key: 'aaed4a078d4eff98674f2163a56a1596782612bd', class: "video-container" }, h("video", { key: '6ae6a7c626c9b2b6e6915c826517d1365205b3a0', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: this.isVideoActive ? 'block' : 'none' } }), h("canvas", { key: 'c8666e4b4814e633155be738e23ada098fb3be93', ref: el => this.canvasRef = el, class: this.shouldMirrorVideo ? 'mirror' : '' }), this.isMaskReady && (h("div", { key: '968bcd21315afcf054f881647723299e7e57c29b', class: "overlay-mask" }, h("div", { key: '77f8a331f3d9e19b35c11b6c23b06420cbab9fd5', class: "card-outline" }, h("div", { key: '9d0164e7b2dcf6392471151c236127cd57507512', class: "side side-top" }), h("div", { key: '05a003eb49d25c72644aea2511b6519c5241ffb4', class: "side side-right" }), h("div", { key: 'a561ae9a94eb78aacfc24bac717164b3e22f41e5', class: "side side-bottom" }), h("div", { key: '81d64e5b58032c14062fc8efdee417db7f8a9f12', class: "side side-left" }), h("div", { key: '03c02e2c4c73c525965e34c7c47bb74f769d577f', class: "corner corner-tl" }), h("div", { key: '84780aec021ec4e0c7d38f6a659be765c4604ed5', class: "corner corner-tr" }), h("div", { key: '1ea67789c5a38cbc790f911f8f06b55c866d3927', class: "corner corner-bl" }), h("div", { key: 'e0e1999b0c5c37451850203eed4dbc2ff5834261', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (h("div", { key: '4909eb28d62b1674436c148ef46cd05a35ff8ec8', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (h("button", { key: '5a971c2121cf9962719ad89fc45530b8acccb550', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")), this.isVideoActive && (h("div", { key: '109e5885c49212f89d5678d9c9716ebd48614126', class: "camera-controls" }, this.isMultipleCamerasAvailable && (h("button", { key: '7c8ce2cd775c0646c80378cd0ad1f70243443ddf', class: "flip-camera-button", onClick: () => this.flipCamera(), type: "button", title: "Cambiar c\u00E1mara" }, "Girar c\u00E1mara")), h("button", { key: '5d3d066ba7e317fdc33878eeb9f2f7d28c6f65dc', class: "camera-selector-button", onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara" }, "C\u00E1maras"), this.debug && (h("div", { key: '4cbc284f2efbcb90ef91ea2e064bf0aa1e7980af', style: {
|
|
1374
1439
|
position: 'absolute',
|
|
1375
1440
|
top: '50px',
|
|
1376
1441
|
right: '0',
|
|
@@ -1380,10 +1445,10 @@ export class JaakStamps {
|
|
|
1380
1445
|
fontSize: '10px',
|
|
1381
1446
|
borderRadius: '4px',
|
|
1382
1447
|
whiteSpace: 'nowrap'
|
|
1383
|
-
} }, "C\u00E1maras: ", this.availableCameras.length, h("br", { key: '
|
|
1448
|
+
} }, "C\u00E1maras: ", this.availableCameras.length, h("br", { key: 'df214515289add2cc73f989bfacb59069334a0e6' }), "M\u00FAltiples: ", this.isMultipleCamerasAvailable ? 'Sí' : 'No', h("br", { key: 'aa2b1784781b5b45d24139e2b6cc4865d9f3a00c' }), "Selector: ", this.showCameraSelector ? 'Visible' : 'Oculto', h("br", { key: 'fb95b2b58c9fb89f632d85a9271b7788d45a66c0' }), "Video: ", this.isVideoActive ? 'Activo' : 'Inactivo')))), this.showCameraSelector && this.availableCameras.length > 0 && (h("div", { key: 'ec1c90c5a6c84e3ef75724e7e600a60714545608', class: "camera-selector-dropdown" }, h("div", { key: 'ea118817b6563c78b7fbf5ee66af2e38a441a8b7', class: "camera-selector-header" }, h("span", { key: '52603259d50ffb7aa6ea5753762f0f0d018b39ff' }, "Seleccionar C\u00E1mara"), h("button", { key: '422ae0643f5d1451cf539b3a77becbf44904a484', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: 'd5acef7ba0b1645c52fb3ea7b3c64e70fa187a5f', class: "camera-list" }, this.availableCameras.map((camera) => (h("button", { key: camera.deviceId, class: `camera-option ${this.selectedCameraId === camera.deviceId ? 'selected' : ''}`, onClick: () => {
|
|
1384
1449
|
this.switchCamera(camera.deviceId);
|
|
1385
1450
|
this.toggleCameraSelector();
|
|
1386
|
-
}, type: "button" }, h("span", { class: "camera-label" }, camera.label || `Cámara ${this.availableCameras.indexOf(camera) + 1}`), this.selectedCameraId === camera.deviceId && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: '
|
|
1451
|
+
}, type: "button" }, h("span", { class: "camera-label" }, camera.label || `Cámara ${this.availableCameras.indexOf(camera) + 1}`), this.selectedCameraId === camera.deviceId && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: 'b670e7bf441559bf156874dbe3bbf83dbff2fa0d', class: "device-info" }, h("small", { key: '4d333925c1ff4197b6009414ed694b0a0eb06159' }, "Dispositivo: ", this.deviceType)))))), this.isCapturing && (h("div", { key: '21f7ea0e50575226daba8607ab4bccc5029aa179', class: "capture-animation" })), this.showFlipAnimation && (h("div", { key: 'c2350cc43d3a119391f62f2cf771ed5afcdb3558', class: "flip-animation" }, h("div", { key: 'a91de9e8662a4750555bce2a879b89f9216b8156', class: "id-card-icon" }), h("div", { key: 'def1c2534e1aae27e262deb6fd26a73ff0c8cb9b', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (h("div", { key: 'acbbfb6d07e4f6bf343ff18af2d55979e76db3d4', class: "success-animation" }, h("div", { key: 'f5acd84325226e6b1ede1180335d7495a6b2d95e', class: "check-icon" }), h("div", { key: '393fd8300ce48e59bd3ef94f0e895abc3a938c1f', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (h("div", { key: 'ce0d1baebab8bf0e18531a26b549f38e349a0d72', class: "loading-overlay" }, h("div", { key: '14c76fa00ddd814f37bd9c6dc57f761119886566', class: "loading-spinner" }), h("div", { key: '87ccb288f927e61ec126d83f44061699810c9e06', class: "loading-text" }, this.statusMessage))), this.debug && (h("div", { key: '943dff6e2772f2595a95116e8943866f97cada6e', class: "status-bar" }, h("div", { key: '00fe53b71ef94d51636259f106e4518df910848d', class: "status-message", style: { 'color': this.statusColor } }, this.statusMessage))), h("div", { key: '4c3bd150006473d9540fb1418f11f45fb96d1e56', class: "watermark" }, h("img", { key: 'c634701f52a4422c7be5b4007bf34ba4aeb4ebcc', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
|
|
1387
1452
|
}
|
|
1388
1453
|
static get is() { return "jaak-stamps"; }
|
|
1389
1454
|
static get encapsulation() { return "shadow"; }
|