@jaak.ai/stamps 2.5.1 → 2.5.3
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 +69 -23
- 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.js +69 -23
- package/dist/collection/components/my-component/my-component.js.map +1 -1
- package/dist/components/jaak-stamps.js +69 -23
- package/dist/components/jaak-stamps.js.map +1 -1
- package/dist/esm/jaak-stamps.entry.js +69 -23
- 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-85901267.entry.js → p-adece4d2.entry.js} +3 -3
- package/dist/jaak-stamps-webcomponent/p-adece4d2.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/jaak-stamps-webcomponent/p-85901267.entry.js.map +0 -1
|
@@ -986,33 +986,79 @@ export class JaakStamps {
|
|
|
986
986
|
this.detectFrame();
|
|
987
987
|
}
|
|
988
988
|
catch (err) {
|
|
989
|
+
console.error('[jaak-stamps] Error al preparar captura:', err);
|
|
989
990
|
this.updateStatus('Error al iniciar', 'No se pudo preparar la captura', 'error');
|
|
990
991
|
this.stateManager.updateCaptureState({ isLoading: false });
|
|
991
992
|
}
|
|
992
993
|
}
|
|
993
994
|
async initializeVideoStream(stream) {
|
|
994
|
-
if (this.videoRef) {
|
|
995
|
-
this.videoRef.srcObject = stream;
|
|
996
|
-
this.videoStream = stream;
|
|
997
|
-
const isRear = this.cameraService.isRearCamera(stream);
|
|
998
|
-
this.shouldMirrorVideo = !isRear;
|
|
999
|
-
return new Promise((resolve) => {
|
|
1000
|
-
this.videoRef.onloadedmetadata = async () => {
|
|
1001
|
-
await this.videoRef.play();
|
|
1002
|
-
this.stateManager.updateCaptureState({ isVideoActive: true });
|
|
1003
|
-
// Recalculate mask dimensions when new camera stream loads
|
|
1004
|
-
if (this.detectionContainer) {
|
|
1005
|
-
const container = this.detectionContainer.parentElement;
|
|
1006
|
-
const rect = container.getBoundingClientRect();
|
|
1007
|
-
this.updateMaskDimensions(rect);
|
|
1008
|
-
}
|
|
1009
|
-
resolve();
|
|
1010
|
-
};
|
|
1011
|
-
});
|
|
1012
|
-
}
|
|
1013
|
-
else {
|
|
995
|
+
if (!this.videoRef) {
|
|
1014
996
|
throw new Error('Video element not available');
|
|
1015
997
|
}
|
|
998
|
+
this.videoRef.srcObject = stream;
|
|
999
|
+
this.videoStream = stream;
|
|
1000
|
+
const isRear = this.cameraService.isRearCamera(stream);
|
|
1001
|
+
this.shouldMirrorVideo = !isRear;
|
|
1002
|
+
const LOAD_METADATA_TIMEOUT_MS = 10000;
|
|
1003
|
+
const finalizeStreamInitialization = async () => {
|
|
1004
|
+
try {
|
|
1005
|
+
await this.videoRef.play();
|
|
1006
|
+
}
|
|
1007
|
+
catch (playError) {
|
|
1008
|
+
console.error('[jaak-stamps] video.play() failed (likely autoplay policy):', playError);
|
|
1009
|
+
throw playError;
|
|
1010
|
+
}
|
|
1011
|
+
this.stateManager.updateCaptureState({ isVideoActive: true });
|
|
1012
|
+
if (this.detectionContainer) {
|
|
1013
|
+
const container = this.detectionContainer.parentElement;
|
|
1014
|
+
const rect = container.getBoundingClientRect();
|
|
1015
|
+
this.updateMaskDimensions(rect);
|
|
1016
|
+
}
|
|
1017
|
+
};
|
|
1018
|
+
// If metadata is already available (readyState >= HAVE_METADATA = 1),
|
|
1019
|
+
// the 'loadedmetadata' event will not fire again. Handle both cases.
|
|
1020
|
+
if (this.videoRef.readyState >= 1) {
|
|
1021
|
+
if (this.debug) {
|
|
1022
|
+
console.log('[JAAK-DEBUG] Video metadata already available (readyState:', this.videoRef.readyState, '), skipping event wait');
|
|
1023
|
+
}
|
|
1024
|
+
await finalizeStreamInitialization();
|
|
1025
|
+
return;
|
|
1026
|
+
}
|
|
1027
|
+
return new Promise((resolve, reject) => {
|
|
1028
|
+
let settled = false;
|
|
1029
|
+
const timeoutId = setTimeout(() => {
|
|
1030
|
+
if (settled)
|
|
1031
|
+
return;
|
|
1032
|
+
settled = true;
|
|
1033
|
+
this.videoRef.onloadedmetadata = null;
|
|
1034
|
+
this.videoRef.onerror = null;
|
|
1035
|
+
reject(new Error(`Video metadata load timeout after ${LOAD_METADATA_TIMEOUT_MS}ms`));
|
|
1036
|
+
}, LOAD_METADATA_TIMEOUT_MS);
|
|
1037
|
+
this.videoRef.onloadedmetadata = async () => {
|
|
1038
|
+
if (settled)
|
|
1039
|
+
return;
|
|
1040
|
+
settled = true;
|
|
1041
|
+
clearTimeout(timeoutId);
|
|
1042
|
+
this.videoRef.onloadedmetadata = null;
|
|
1043
|
+
this.videoRef.onerror = null;
|
|
1044
|
+
try {
|
|
1045
|
+
await finalizeStreamInitialization();
|
|
1046
|
+
resolve();
|
|
1047
|
+
}
|
|
1048
|
+
catch (err) {
|
|
1049
|
+
reject(err);
|
|
1050
|
+
}
|
|
1051
|
+
};
|
|
1052
|
+
this.videoRef.onerror = (event) => {
|
|
1053
|
+
if (settled)
|
|
1054
|
+
return;
|
|
1055
|
+
settled = true;
|
|
1056
|
+
clearTimeout(timeoutId);
|
|
1057
|
+
this.videoRef.onloadedmetadata = null;
|
|
1058
|
+
this.videoRef.onerror = null;
|
|
1059
|
+
reject(new Error(`Video element error: ${event}`));
|
|
1060
|
+
};
|
|
1061
|
+
});
|
|
1016
1062
|
}
|
|
1017
1063
|
async detectFrame() {
|
|
1018
1064
|
try {
|
|
@@ -1235,7 +1281,7 @@ export class JaakStamps {
|
|
|
1235
1281
|
isCapturing: false
|
|
1236
1282
|
};
|
|
1237
1283
|
const cameraInfo = this.cameraInfoWithAutofocus;
|
|
1238
|
-
return (h("div", { key: '
|
|
1284
|
+
return (h("div", { key: 'd9e8fef8a096429937860396347148e6bdd06340', class: "detector-container" }, !this.licenseValid && this.licenseError && (h("div", { key: '7eb2f885adab60a4b8b1667bf0a362510d537794', class: "license-error-container" }, h("div", { key: 'af1079677131e33d5cc7698d4da03b2ba012c4bf', class: "license-error-card" }, h("svg", { key: 'f968e7c76c710dd8a4b6b407a026346d524740fe', class: "license-error-icon", width: "64", height: "64", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '39f44307ef8a1ef1fb786dc925fb753f647aa94c', d: "M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '64fe021fadc616f46e69b35a7950ad503f55028a', d: "M12 8V12", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("circle", { key: 'aa86c48652cce218d24f78f49c0f32f8485184ca', cx: "12", cy: "16", r: "0.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" })), h("h2", { key: 'b49877aa248f90ef207cc26a294f3f7f4f5f8e03', class: "license-error-title" }, "Licencia Requerida"), h("p", { key: 'fe929456590ae3ee78804613072df9c873732f99', class: "license-error-message" }, this.licenseError), h("p", { key: '1177a85cdd98a3dfd120043ce58256a33095d720', class: "license-error-help" }, "Contacte a soporte: ", h("a", { key: 'd5fe21ac8932ab88907e59775d459597cbd3b51f', href: "mailto:support@jaak.ai" }, "support@jaak.ai")), h("div", { key: '3b764654f555dae41581f5d855548b8f3382e0f2', class: "license-error-footer" }, "JAAK Stamps")))), this.licenseValid && (h("div", { key: '4051657a840db456841fdea943409f75c4c72985', class: "video-container" }, h("video", { key: 'aa7fb4da7f721a511f4e8bbd9d2727ff2a3c350f', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: 'a9f5839bd5f7543f5e3e37701c95c3528d233161', ref: el => this.detectionContainer = el, class: `detection-overlay ${this.shouldMirrorVideo ? 'mirror' : ''}` }, this.debug && this.detectionBoxes.map((box, index) => (h("div", { key: index, class: "detection-box", style: {
|
|
1239
1285
|
position: 'absolute',
|
|
1240
1286
|
left: `${box.x}px`,
|
|
1241
1287
|
top: `${box.y}px`,
|
|
@@ -1244,9 +1290,9 @@ export class JaakStamps {
|
|
|
1244
1290
|
border: '2px solid #32406C',
|
|
1245
1291
|
pointerEvents: 'none',
|
|
1246
1292
|
boxSizing: 'border-box'
|
|
1247
|
-
} })))), this.isMaskReady && (h("div", { key: '
|
|
1293
|
+
} })))), this.isMaskReady && (h("div", { key: 'ad737b47a608ba2d6e43a8c41aee15ea00012966', class: "overlay-mask" }, h("div", { key: '70c5b2591dd75742eae22e444eab4d4368fc659d', class: "card-outline" }, h("div", { key: '0962f587354f4b300f6f6a1f5b9652441c3aeb5c', class: "side side-top" }), h("div", { key: '955d5346898f560e1e3fc854c4c339074613116c', class: "side side-right" }), h("div", { key: '0388ccc214b045e392c07e6e8fffe2c8d67d3582', class: "side side-bottom" }), h("div", { key: '718600bfad1eff4298628402190ffb34b7988afa', class: "side side-left" })), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '70603563d303912248bf60e1d39e06d78b3adbaf', class: `guide-text ${this.showPerformanceMessage ? 'performance-warning-text' : ''}` }, this.getGuideText(captureState.step))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: 'a3639b10d52b29da6f0490356f7cdae789d62f88', class: "back-capture-section" }, h("div", { key: 'dd430526d6e096396d10367fd216b1c6568ce19b', class: "back-capture-buttons" }, (!this.useDocumentDetector || this.performanceDegradedMode || this.showManualCaptureButton) && (h("button", { key: '04b0afd7e6adc890287749add773910445ff5255', class: "capture-button primary-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-back' && (h("span", { key: '69022991921cbc04ab20dee2148bb95d5dd371f8', class: "button-spinner" })), "Capturar Reverso")), h("button", { key: 'dd698341642e875e8f252746db747ca77b2f37b0', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'skip-back' && (h("span", { key: 'c33706bf76eeb1ca401ea3df042e858e23d3a929', class: "button-spinner" })), this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
|
|
1248
1294
|
? `Saltar reverso (${this.backDocumentTimerRemaining}s)`
|
|
1249
|
-
: 'Saltar reverso')))), captureState.isVideoActive && (h("div", { key: '
|
|
1295
|
+
: 'Saltar reverso')))), captureState.isVideoActive && (h("div", { key: 'f9c95646d564518b75d7511ef69049e82760c687', class: "camera-controls" }, h("button", { key: 'ff21667ee09360e13e0b7fa190eb58d4e9ab2955', class: `camera-selector-button ${this.isSwitchingCamera ? 'loading' : ''}`, onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara", disabled: this.isSwitchingCamera }, this.isSwitchingCamera ? (h("div", { class: "button-spinner" })) : ('Cámaras')))), this.showCameraSelector && cameraInfo.availableCameras.length > 0 && (h("div", { key: '1f5d7ced9311037a22402797075862c66b541201', class: "camera-selector-dropdown" }, h("div", { key: '38ccad6dfb46613519efac337a68ad8ed68ca585', class: "camera-selector-header" }, h("span", { key: 'efd67097b98bf82455703888a0294bba18084b58' }, "Seleccionar C\u00E1mara"), h("button", { key: 'efea962578d1ff9f4dc76e40f98b6763ab32fabd', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: 'dc7fcc35ea20505547b9980f0793aab21635815f', class: "camera-list" }, cameraInfo.availableCameras.map((camera) => (h("button", { key: camera.id, class: `camera-option ${cameraInfo.selectedCameraId === camera.id ? 'selected' : ''}`, onClick: () => this.handleCameraSwitch(camera.id), type: "button" }, h("span", { class: "camera-label" }, camera.label || `Cámara ${cameraInfo.availableCameras.indexOf(camera) + 1}`, camera.hasAutofocus && (h("span", { class: "autofocus-icon", title: "Autofoco disponible" }, "\u29BF"))), cameraInfo.selectedCameraId === camera.id && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: '450b9819604b9490c17759eb53468832abdf239c', class: "device-info" }, h("small", { key: '9423cb4f0f6eb767b9a9bf86412dcc74c40e3c9b' }, "Dispositivo: ", cameraInfo.deviceType)))), this.showManualCaptureButton && captureState.step === 'front' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: 'fc02b6ac27b7d239d07ea5df46136b5941a09020', class: "manual-capture-section" }, h("button", { key: '0e8bc7d6b2c44b66f62083bb9682880109ce1b50', class: "manual-capture-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-front' && (h("span", { key: 'd4067363057c004774322ae6ac4c6aac8ac4c1a7', class: "button-spinner" })), "Capturar Frente"))))), captureState.isCapturing && (h("div", { key: '79a88a6cf21fb0d8c2883c44fe181dc34773dae6', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: '2e8f2d1441ea6ae7e62d6cb22fb8afb25308ae5b', class: "flip-animation" }, h("div", { key: '449282679041e4ad1b1f48e26185b1ab1ab3be60', class: "id-card-icon" }), h("div", { key: 'eac0b9728eefcde854ddb1675811f91ee3161176', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: '521094652be1010ebb740ef3278649bc0077fbfa', class: "success-animation" }, h("div", { key: 'e9b425d4c039f7267ecb7e3005506f07706f9054', class: "check-icon" }), h("div", { key: '4859b32d3219e325afa326651f21ce3663d9c0b8', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: '8fff23c16b531dda94a087a3ef3fe4ef0b6a51e4', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: 'e7139e242d3be20012efe25d808990fc9631492f', class: "status-spinner" })), h("div", { key: '935075ef8c1a7321e445578cdf918471e0f6e01c', class: "status-content" }, h("div", { key: '0f4910657f11df16d6cec635fdeb3864888ed55c', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: 'c362a69bed2503ecb4456b183876a5ea0645cc71', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: '04d2a4d664742ca110f562fa599b118fa5e7a282', class: "performance-monitor" }, h("div", { key: '30c37005f87500d487e23cb87dd66973ce30bcfa', class: "performance-expanded" }, h("div", { key: '647c87a140f7ea8b39348402e0355b3b15ac9616', class: "metrics-row" }, h("div", { key: '99f886b025473adcd69b42aca61f7aa8158d13cf', class: "metric-compact" }, h("span", { key: '69215c74430c502fa51402e1fcf46d31b89b34f2', class: "metric-label" }, "FPS"), h("span", { key: '27283246a143119a4a8f0e63a8ee335f76868c46', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: '6843f5f79d3e54643c6515e509364b4fa3fc032f', class: "metric-compact" }, h("span", { key: '20e83d94bf0a76e89a47b3d682e5c5c27ee94792', class: "metric-label" }, "MEM"), h("span", { key: '68922415fd8ba5ebf797f52026ecd0cf2abf861e', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: 'be6bb0a65bfc5bd16d6948f347756732918f80d1', class: "metrics-row" }, h("div", { key: 'c07a3723b79743697230a11267a6b2c8a847a86b', class: "metric-compact" }, h("span", { key: '2f2c75418ed31ba22f80112f6c02bdc32a1bc7e3', class: "metric-label" }, "INF"), h("span", { key: '788aa1a4220f0150c5ce77127d75be64104591c1', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: '23bdf32e7ee8533c3327b271bd0cec93551f7c8e', class: "metric-compact" }, h("span", { key: '1d63525671ef0e99072d472f6bbe45919694ca98', class: "metric-label" }, "FRAME"), h("span", { key: '834f075061da75860a481142defddcd3973a2641', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: '2767844f849c3a8217dce6d44180b5db604284d9', class: "metrics-row" }, h("div", { key: '78e4ae2297c867c7036186bb9871800b57e6cd50', class: "metric-compact" }, h("span", { key: '9fd42d1a4c18ead68ee81bc72dddb98dcd09952c', class: "metric-label" }, "DET"), h("span", { key: '0e3c0bbf718b21c3c20ae2e68c6f1e8f5dea0624', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: '41be4df95b8745706e9b98d28cefb758e9e6b65f', class: "metric-compact" }, h("span", { key: '520b7e3d4841c0865c3643c5db33f0a762e550e7', class: "metric-label" }, "RATE"), h("span", { key: 'fe56fdd018002bce4e0efc5059cbc6562edee17f', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: '3c7b83cf7bfd1f42198edd1029f03b7c68f7766f', class: "watermark" }, h("img", { key: '5684517b58bafeffdbe6533c4dcc3ef36bec0b6c', src: "https://static.jaak.ai/commons/powered-by-jaak.png", alt: "Powered by Jaak" }))))));
|
|
1250
1296
|
}
|
|
1251
1297
|
// Utility methods
|
|
1252
1298
|
updateDetectionBoxes(boxes) {
|