@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
|
@@ -19643,33 +19643,79 @@ const JaakStamps = class {
|
|
|
19643
19643
|
this.detectFrame();
|
|
19644
19644
|
}
|
|
19645
19645
|
catch (err) {
|
|
19646
|
+
console.error('[jaak-stamps] Error al preparar captura:', err);
|
|
19646
19647
|
this.updateStatus('Error al iniciar', 'No se pudo preparar la captura', 'error');
|
|
19647
19648
|
this.stateManager.updateCaptureState({ isLoading: false });
|
|
19648
19649
|
}
|
|
19649
19650
|
}
|
|
19650
19651
|
async initializeVideoStream(stream) {
|
|
19651
|
-
if (this.videoRef) {
|
|
19652
|
-
this.videoRef.srcObject = stream;
|
|
19653
|
-
this.videoStream = stream;
|
|
19654
|
-
const isRear = this.cameraService.isRearCamera(stream);
|
|
19655
|
-
this.shouldMirrorVideo = !isRear;
|
|
19656
|
-
return new Promise((resolve) => {
|
|
19657
|
-
this.videoRef.onloadedmetadata = async () => {
|
|
19658
|
-
await this.videoRef.play();
|
|
19659
|
-
this.stateManager.updateCaptureState({ isVideoActive: true });
|
|
19660
|
-
// Recalculate mask dimensions when new camera stream loads
|
|
19661
|
-
if (this.detectionContainer) {
|
|
19662
|
-
const container = this.detectionContainer.parentElement;
|
|
19663
|
-
const rect = container.getBoundingClientRect();
|
|
19664
|
-
this.updateMaskDimensions(rect);
|
|
19665
|
-
}
|
|
19666
|
-
resolve();
|
|
19667
|
-
};
|
|
19668
|
-
});
|
|
19669
|
-
}
|
|
19670
|
-
else {
|
|
19652
|
+
if (!this.videoRef) {
|
|
19671
19653
|
throw new Error('Video element not available');
|
|
19672
19654
|
}
|
|
19655
|
+
this.videoRef.srcObject = stream;
|
|
19656
|
+
this.videoStream = stream;
|
|
19657
|
+
const isRear = this.cameraService.isRearCamera(stream);
|
|
19658
|
+
this.shouldMirrorVideo = !isRear;
|
|
19659
|
+
const LOAD_METADATA_TIMEOUT_MS = 10000;
|
|
19660
|
+
const finalizeStreamInitialization = async () => {
|
|
19661
|
+
try {
|
|
19662
|
+
await this.videoRef.play();
|
|
19663
|
+
}
|
|
19664
|
+
catch (playError) {
|
|
19665
|
+
console.error('[jaak-stamps] video.play() failed (likely autoplay policy):', playError);
|
|
19666
|
+
throw playError;
|
|
19667
|
+
}
|
|
19668
|
+
this.stateManager.updateCaptureState({ isVideoActive: true });
|
|
19669
|
+
if (this.detectionContainer) {
|
|
19670
|
+
const container = this.detectionContainer.parentElement;
|
|
19671
|
+
const rect = container.getBoundingClientRect();
|
|
19672
|
+
this.updateMaskDimensions(rect);
|
|
19673
|
+
}
|
|
19674
|
+
};
|
|
19675
|
+
// If metadata is already available (readyState >= HAVE_METADATA = 1),
|
|
19676
|
+
// the 'loadedmetadata' event will not fire again. Handle both cases.
|
|
19677
|
+
if (this.videoRef.readyState >= 1) {
|
|
19678
|
+
if (this.debug) {
|
|
19679
|
+
console.log('[JAAK-DEBUG] Video metadata already available (readyState:', this.videoRef.readyState, '), skipping event wait');
|
|
19680
|
+
}
|
|
19681
|
+
await finalizeStreamInitialization();
|
|
19682
|
+
return;
|
|
19683
|
+
}
|
|
19684
|
+
return new Promise((resolve, reject) => {
|
|
19685
|
+
let settled = false;
|
|
19686
|
+
const timeoutId = setTimeout(() => {
|
|
19687
|
+
if (settled)
|
|
19688
|
+
return;
|
|
19689
|
+
settled = true;
|
|
19690
|
+
this.videoRef.onloadedmetadata = null;
|
|
19691
|
+
this.videoRef.onerror = null;
|
|
19692
|
+
reject(new Error(`Video metadata load timeout after ${LOAD_METADATA_TIMEOUT_MS}ms`));
|
|
19693
|
+
}, LOAD_METADATA_TIMEOUT_MS);
|
|
19694
|
+
this.videoRef.onloadedmetadata = async () => {
|
|
19695
|
+
if (settled)
|
|
19696
|
+
return;
|
|
19697
|
+
settled = true;
|
|
19698
|
+
clearTimeout(timeoutId);
|
|
19699
|
+
this.videoRef.onloadedmetadata = null;
|
|
19700
|
+
this.videoRef.onerror = null;
|
|
19701
|
+
try {
|
|
19702
|
+
await finalizeStreamInitialization();
|
|
19703
|
+
resolve();
|
|
19704
|
+
}
|
|
19705
|
+
catch (err) {
|
|
19706
|
+
reject(err);
|
|
19707
|
+
}
|
|
19708
|
+
};
|
|
19709
|
+
this.videoRef.onerror = (event) => {
|
|
19710
|
+
if (settled)
|
|
19711
|
+
return;
|
|
19712
|
+
settled = true;
|
|
19713
|
+
clearTimeout(timeoutId);
|
|
19714
|
+
this.videoRef.onloadedmetadata = null;
|
|
19715
|
+
this.videoRef.onerror = null;
|
|
19716
|
+
reject(new Error(`Video element error: ${event}`));
|
|
19717
|
+
};
|
|
19718
|
+
});
|
|
19673
19719
|
}
|
|
19674
19720
|
async detectFrame() {
|
|
19675
19721
|
try {
|
|
@@ -19891,7 +19937,7 @@ const JaakStamps = class {
|
|
|
19891
19937
|
isCapturing: false
|
|
19892
19938
|
};
|
|
19893
19939
|
const cameraInfo = this.cameraInfoWithAutofocus;
|
|
19894
|
-
return (index.h("div", { key: '
|
|
19940
|
+
return (index.h("div", { key: 'd9e8fef8a096429937860396347148e6bdd06340', class: "detector-container" }, !this.licenseValid && this.licenseError && (index.h("div", { key: '7eb2f885adab60a4b8b1667bf0a362510d537794', class: "license-error-container" }, index.h("div", { key: 'af1079677131e33d5cc7698d4da03b2ba012c4bf', class: "license-error-card" }, index.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" }, index.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" }), index.h("path", { key: '64fe021fadc616f46e69b35a7950ad503f55028a', d: "M12 8V12", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), index.h("circle", { key: 'aa86c48652cce218d24f78f49c0f32f8485184ca', cx: "12", cy: "16", r: "0.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" })), index.h("h2", { key: 'b49877aa248f90ef207cc26a294f3f7f4f5f8e03', class: "license-error-title" }, "Licencia Requerida"), index.h("p", { key: 'fe929456590ae3ee78804613072df9c873732f99', class: "license-error-message" }, this.licenseError), index.h("p", { key: '1177a85cdd98a3dfd120043ce58256a33095d720', class: "license-error-help" }, "Contacte a soporte: ", index.h("a", { key: 'd5fe21ac8932ab88907e59775d459597cbd3b51f', href: "mailto:support@jaak.ai" }, "support@jaak.ai")), index.h("div", { key: '3b764654f555dae41581f5d855548b8f3382e0f2', class: "license-error-footer" }, "JAAK Stamps")))), this.licenseValid && (index.h("div", { key: '4051657a840db456841fdea943409f75c4c72985', class: "video-container" }, index.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' } }), index.h("div", { key: 'a9f5839bd5f7543f5e3e37701c95c3528d233161', ref: el => this.detectionContainer = el, class: `detection-overlay ${this.shouldMirrorVideo ? 'mirror' : ''}` }, this.debug && this.detectionBoxes.map((box, index$1) => (index.h("div", { key: index$1, class: "detection-box", style: {
|
|
19895
19941
|
position: 'absolute',
|
|
19896
19942
|
left: `${box.x}px`,
|
|
19897
19943
|
top: `${box.y}px`,
|
|
@@ -19900,9 +19946,9 @@ const JaakStamps = class {
|
|
|
19900
19946
|
border: '2px solid #32406C',
|
|
19901
19947
|
pointerEvents: 'none',
|
|
19902
19948
|
boxSizing: 'border-box'
|
|
19903
|
-
} })))), this.isMaskReady && (index.h("div", { key: '
|
|
19949
|
+
} })))), this.isMaskReady && (index.h("div", { key: 'ad737b47a608ba2d6e43a8c41aee15ea00012966', class: "overlay-mask" }, index.h("div", { key: '70c5b2591dd75742eae22e444eab4d4368fc659d', class: "card-outline" }, index.h("div", { key: '0962f587354f4b300f6f6a1f5b9652441c3aeb5c', class: "side side-top" }), index.h("div", { key: '955d5346898f560e1e3fc854c4c339074613116c', class: "side side-right" }), index.h("div", { key: '0388ccc214b045e392c07e6e8fffe2c8d67d3582', class: "side side-bottom" }), index.h("div", { key: '718600bfad1eff4298628402190ffb34b7988afa', class: "side side-left" })), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (index.h("div", { key: '70603563d303912248bf60e1d39e06d78b3adbaf', class: `guide-text ${this.showPerformanceMessage ? 'performance-warning-text' : ''}` }, this.getGuideText(captureState.step))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (index.h("div", { key: 'a3639b10d52b29da6f0490356f7cdae789d62f88', class: "back-capture-section" }, index.h("div", { key: 'dd430526d6e096396d10367fd216b1c6568ce19b', class: "back-capture-buttons" }, (!this.useDocumentDetector || this.performanceDegradedMode || this.showManualCaptureButton) && (index.h("button", { key: '04b0afd7e6adc890287749add773910445ff5255', class: "capture-button primary-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-back' && (index.h("span", { key: '69022991921cbc04ab20dee2148bb95d5dd371f8', class: "button-spinner" })), "Capturar Reverso")), index.h("button", { key: 'dd698341642e875e8f252746db747ca77b2f37b0', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'skip-back' && (index.h("span", { key: 'c33706bf76eeb1ca401ea3df042e858e23d3a929', class: "button-spinner" })), this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
|
|
19904
19950
|
? `Saltar reverso (${this.backDocumentTimerRemaining}s)`
|
|
19905
|
-
: 'Saltar reverso')))), captureState.isVideoActive && (index.h("div", { key: '
|
|
19951
|
+
: 'Saltar reverso')))), captureState.isVideoActive && (index.h("div", { key: 'f9c95646d564518b75d7511ef69049e82760c687', class: "camera-controls" }, index.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 ? (index.h("div", { class: "button-spinner" })) : ('Cámaras')))), this.showCameraSelector && cameraInfo.availableCameras.length > 0 && (index.h("div", { key: '1f5d7ced9311037a22402797075862c66b541201', class: "camera-selector-dropdown" }, index.h("div", { key: '38ccad6dfb46613519efac337a68ad8ed68ca585', class: "camera-selector-header" }, index.h("span", { key: 'efd67097b98bf82455703888a0294bba18084b58' }, "Seleccionar C\u00E1mara"), index.h("button", { key: 'efea962578d1ff9f4dc76e40f98b6763ab32fabd', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), index.h("div", { key: 'dc7fcc35ea20505547b9980f0793aab21635815f', class: "camera-list" }, cameraInfo.availableCameras.map((camera) => (index.h("button", { key: camera.id, class: `camera-option ${cameraInfo.selectedCameraId === camera.id ? 'selected' : ''}`, onClick: () => this.handleCameraSwitch(camera.id), type: "button" }, index.h("span", { class: "camera-label" }, camera.label || `Cámara ${cameraInfo.availableCameras.indexOf(camera) + 1}`, camera.hasAutofocus && (index.h("span", { class: "autofocus-icon", title: "Autofoco disponible" }, "\u29BF"))), cameraInfo.selectedCameraId === camera.id && (index.h("span", { class: "selected-indicator" }, "\u2713")))))), index.h("div", { key: '450b9819604b9490c17759eb53468832abdf239c', class: "device-info" }, index.h("small", { key: '9423cb4f0f6eb767b9a9bf86412dcc74c40e3c9b' }, "Dispositivo: ", cameraInfo.deviceType)))), this.showManualCaptureButton && captureState.step === 'front' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (index.h("div", { key: 'fc02b6ac27b7d239d07ea5df46136b5941a09020', class: "manual-capture-section" }, index.h("button", { key: '0e8bc7d6b2c44b66f62083bb9682880109ce1b50', class: "manual-capture-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-front' && (index.h("span", { key: 'd4067363057c004774322ae6ac4c6aac8ac4c1a7', class: "button-spinner" })), "Capturar Frente"))))), captureState.isCapturing && (index.h("div", { key: '79a88a6cf21fb0d8c2883c44fe181dc34773dae6', class: "capture-animation" })), captureState.showFlipAnimation && (index.h("div", { key: '2e8f2d1441ea6ae7e62d6cb22fb8afb25308ae5b', class: "flip-animation" }, index.h("div", { key: '449282679041e4ad1b1f48e26185b1ab1ab3be60', class: "id-card-icon" }), index.h("div", { key: 'eac0b9728eefcde854ddb1675811f91ee3161176', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (index.h("div", { key: '521094652be1010ebb740ef3278649bc0077fbfa', class: "success-animation" }, index.h("div", { key: 'e9b425d4c039f7267ecb7e3005506f07706f9054', class: "check-icon" }), index.h("div", { key: '4859b32d3219e325afa326651f21ce3663d9c0b8', class: "success-text" }, "\u00A1Proceso completado!"))), index.h("div", { key: '8fff23c16b531dda94a087a3ef3fe4ef0b6a51e4', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (index.h("div", { key: 'e7139e242d3be20012efe25d808990fc9631492f', class: "status-spinner" })), index.h("div", { key: '935075ef8c1a7321e445578cdf918471e0f6e01c', class: "status-content" }, index.h("div", { key: '0f4910657f11df16d6cec635fdeb3864888ed55c', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (index.h("div", { key: 'c362a69bed2503ecb4456b183876a5ea0645cc71', class: "status-description" }, this.currentStatus.description)))), this.debug && (index.h("div", { key: '04d2a4d664742ca110f562fa599b118fa5e7a282', class: "performance-monitor" }, index.h("div", { key: '30c37005f87500d487e23cb87dd66973ce30bcfa', class: "performance-expanded" }, index.h("div", { key: '647c87a140f7ea8b39348402e0355b3b15ac9616', class: "metrics-row" }, index.h("div", { key: '99f886b025473adcd69b42aca61f7aa8158d13cf', class: "metric-compact" }, index.h("span", { key: '69215c74430c502fa51402e1fcf46d31b89b34f2', class: "metric-label" }, "FPS"), index.h("span", { key: '27283246a143119a4a8f0e63a8ee335f76868c46', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), index.h("div", { key: '6843f5f79d3e54643c6515e509364b4fa3fc032f', class: "metric-compact" }, index.h("span", { key: '20e83d94bf0a76e89a47b3d682e5c5c27ee94792', class: "metric-label" }, "MEM"), index.h("span", { key: '68922415fd8ba5ebf797f52026ecd0cf2abf861e', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), index.h("div", { key: 'be6bb0a65bfc5bd16d6948f347756732918f80d1', class: "metrics-row" }, index.h("div", { key: 'c07a3723b79743697230a11267a6b2c8a847a86b', class: "metric-compact" }, index.h("span", { key: '2f2c75418ed31ba22f80112f6c02bdc32a1bc7e3', class: "metric-label" }, "INF"), index.h("span", { key: '788aa1a4220f0150c5ce77127d75be64104591c1', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), index.h("div", { key: '23bdf32e7ee8533c3327b271bd0cec93551f7c8e', class: "metric-compact" }, index.h("span", { key: '1d63525671ef0e99072d472f6bbe45919694ca98', class: "metric-label" }, "FRAME"), index.h("span", { key: '834f075061da75860a481142defddcd3973a2641', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), index.h("div", { key: '2767844f849c3a8217dce6d44180b5db604284d9', class: "metrics-row" }, index.h("div", { key: '78e4ae2297c867c7036186bb9871800b57e6cd50', class: "metric-compact" }, index.h("span", { key: '9fd42d1a4c18ead68ee81bc72dddb98dcd09952c', class: "metric-label" }, "DET"), index.h("span", { key: '0e3c0bbf718b21c3c20ae2e68c6f1e8f5dea0624', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), index.h("div", { key: '41be4df95b8745706e9b98d28cefb758e9e6b65f', class: "metric-compact" }, index.h("span", { key: '520b7e3d4841c0865c3643c5db33f0a762e550e7', class: "metric-label" }, "RATE"), index.h("span", { key: 'fe56fdd018002bce4e0efc5059cbc6562edee17f', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), index.h("div", { key: '3c7b83cf7bfd1f42198edd1029f03b7c68f7766f', class: "watermark" }, index.h("img", { key: '5684517b58bafeffdbe6533c4dcc3ef36bec0b6c', src: "https://static.jaak.ai/commons/powered-by-jaak.png", alt: "Powered by Jaak" }))))));
|
|
19906
19952
|
}
|
|
19907
19953
|
// Utility methods
|
|
19908
19954
|
updateDetectionBoxes(boxes) {
|