@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
|
@@ -19641,33 +19641,79 @@ const JaakStamps = class {
|
|
|
19641
19641
|
this.detectFrame();
|
|
19642
19642
|
}
|
|
19643
19643
|
catch (err) {
|
|
19644
|
+
console.error('[jaak-stamps] Error al preparar captura:', err);
|
|
19644
19645
|
this.updateStatus('Error al iniciar', 'No se pudo preparar la captura', 'error');
|
|
19645
19646
|
this.stateManager.updateCaptureState({ isLoading: false });
|
|
19646
19647
|
}
|
|
19647
19648
|
}
|
|
19648
19649
|
async initializeVideoStream(stream) {
|
|
19649
|
-
if (this.videoRef) {
|
|
19650
|
-
this.videoRef.srcObject = stream;
|
|
19651
|
-
this.videoStream = stream;
|
|
19652
|
-
const isRear = this.cameraService.isRearCamera(stream);
|
|
19653
|
-
this.shouldMirrorVideo = !isRear;
|
|
19654
|
-
return new Promise((resolve) => {
|
|
19655
|
-
this.videoRef.onloadedmetadata = async () => {
|
|
19656
|
-
await this.videoRef.play();
|
|
19657
|
-
this.stateManager.updateCaptureState({ isVideoActive: true });
|
|
19658
|
-
// Recalculate mask dimensions when new camera stream loads
|
|
19659
|
-
if (this.detectionContainer) {
|
|
19660
|
-
const container = this.detectionContainer.parentElement;
|
|
19661
|
-
const rect = container.getBoundingClientRect();
|
|
19662
|
-
this.updateMaskDimensions(rect);
|
|
19663
|
-
}
|
|
19664
|
-
resolve();
|
|
19665
|
-
};
|
|
19666
|
-
});
|
|
19667
|
-
}
|
|
19668
|
-
else {
|
|
19650
|
+
if (!this.videoRef) {
|
|
19669
19651
|
throw new Error('Video element not available');
|
|
19670
19652
|
}
|
|
19653
|
+
this.videoRef.srcObject = stream;
|
|
19654
|
+
this.videoStream = stream;
|
|
19655
|
+
const isRear = this.cameraService.isRearCamera(stream);
|
|
19656
|
+
this.shouldMirrorVideo = !isRear;
|
|
19657
|
+
const LOAD_METADATA_TIMEOUT_MS = 10000;
|
|
19658
|
+
const finalizeStreamInitialization = async () => {
|
|
19659
|
+
try {
|
|
19660
|
+
await this.videoRef.play();
|
|
19661
|
+
}
|
|
19662
|
+
catch (playError) {
|
|
19663
|
+
console.error('[jaak-stamps] video.play() failed (likely autoplay policy):', playError);
|
|
19664
|
+
throw playError;
|
|
19665
|
+
}
|
|
19666
|
+
this.stateManager.updateCaptureState({ isVideoActive: true });
|
|
19667
|
+
if (this.detectionContainer) {
|
|
19668
|
+
const container = this.detectionContainer.parentElement;
|
|
19669
|
+
const rect = container.getBoundingClientRect();
|
|
19670
|
+
this.updateMaskDimensions(rect);
|
|
19671
|
+
}
|
|
19672
|
+
};
|
|
19673
|
+
// If metadata is already available (readyState >= HAVE_METADATA = 1),
|
|
19674
|
+
// the 'loadedmetadata' event will not fire again. Handle both cases.
|
|
19675
|
+
if (this.videoRef.readyState >= 1) {
|
|
19676
|
+
if (this.debug) {
|
|
19677
|
+
console.log('[JAAK-DEBUG] Video metadata already available (readyState:', this.videoRef.readyState, '), skipping event wait');
|
|
19678
|
+
}
|
|
19679
|
+
await finalizeStreamInitialization();
|
|
19680
|
+
return;
|
|
19681
|
+
}
|
|
19682
|
+
return new Promise((resolve, reject) => {
|
|
19683
|
+
let settled = false;
|
|
19684
|
+
const timeoutId = setTimeout(() => {
|
|
19685
|
+
if (settled)
|
|
19686
|
+
return;
|
|
19687
|
+
settled = true;
|
|
19688
|
+
this.videoRef.onloadedmetadata = null;
|
|
19689
|
+
this.videoRef.onerror = null;
|
|
19690
|
+
reject(new Error(`Video metadata load timeout after ${LOAD_METADATA_TIMEOUT_MS}ms`));
|
|
19691
|
+
}, LOAD_METADATA_TIMEOUT_MS);
|
|
19692
|
+
this.videoRef.onloadedmetadata = async () => {
|
|
19693
|
+
if (settled)
|
|
19694
|
+
return;
|
|
19695
|
+
settled = true;
|
|
19696
|
+
clearTimeout(timeoutId);
|
|
19697
|
+
this.videoRef.onloadedmetadata = null;
|
|
19698
|
+
this.videoRef.onerror = null;
|
|
19699
|
+
try {
|
|
19700
|
+
await finalizeStreamInitialization();
|
|
19701
|
+
resolve();
|
|
19702
|
+
}
|
|
19703
|
+
catch (err) {
|
|
19704
|
+
reject(err);
|
|
19705
|
+
}
|
|
19706
|
+
};
|
|
19707
|
+
this.videoRef.onerror = (event) => {
|
|
19708
|
+
if (settled)
|
|
19709
|
+
return;
|
|
19710
|
+
settled = true;
|
|
19711
|
+
clearTimeout(timeoutId);
|
|
19712
|
+
this.videoRef.onloadedmetadata = null;
|
|
19713
|
+
this.videoRef.onerror = null;
|
|
19714
|
+
reject(new Error(`Video element error: ${event}`));
|
|
19715
|
+
};
|
|
19716
|
+
});
|
|
19671
19717
|
}
|
|
19672
19718
|
async detectFrame() {
|
|
19673
19719
|
try {
|
|
@@ -19889,7 +19935,7 @@ const JaakStamps = class {
|
|
|
19889
19935
|
isCapturing: false
|
|
19890
19936
|
};
|
|
19891
19937
|
const cameraInfo = this.cameraInfoWithAutofocus;
|
|
19892
|
-
return (h("div", { key: '
|
|
19938
|
+
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: {
|
|
19893
19939
|
position: 'absolute',
|
|
19894
19940
|
left: `${box.x}px`,
|
|
19895
19941
|
top: `${box.y}px`,
|
|
@@ -19898,9 +19944,9 @@ const JaakStamps = class {
|
|
|
19898
19944
|
border: '2px solid #32406C',
|
|
19899
19945
|
pointerEvents: 'none',
|
|
19900
19946
|
boxSizing: 'border-box'
|
|
19901
|
-
} })))), this.isMaskReady && (h("div", { key: '
|
|
19947
|
+
} })))), 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
|
|
19902
19948
|
? `Saltar reverso (${this.backDocumentTimerRemaining}s)`
|
|
19903
|
-
: 'Saltar reverso')))), captureState.isVideoActive && (h("div", { key: '
|
|
19949
|
+
: '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" }))))));
|
|
19904
19950
|
}
|
|
19905
19951
|
// Utility methods
|
|
19906
19952
|
updateDetectionBoxes(boxes) {
|