@jaak.ai/stamps 2.2.0-dev.9 → 2.2.0
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 +188 -8
- package/dist/cjs/jaak-stamps.cjs.entry.js +69 -24
- 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 +23 -2
- package/dist/collection/components/my-component/my-component.js +28 -15
- package/dist/collection/components/my-component/my-component.js.map +1 -1
- package/dist/collection/services/CameraService.js +41 -9
- package/dist/collection/services/CameraService.js.map +1 -1
- package/dist/collection/services/LicenseValidationService.js +1 -1
- package/dist/collection/services/LicenseValidationService.js.map +1 -1
- package/dist/components/jaak-stamps.js +69 -24
- package/dist/components/jaak-stamps.js.map +1 -1
- package/dist/esm/jaak-stamps.entry.js +69 -24
- 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-34bcebb1.entry.js +7 -0
- package/dist/jaak-stamps-webcomponent/p-34bcebb1.entry.js.map +1 -0
- package/dist/types/components/my-component/my-component.d.ts +2 -1
- package/dist/types/components.d.ts +2 -2
- package/dist/types/services/LicenseValidationService.d.ts +1 -1
- package/package.json +1 -1
- package/dist/jaak-stamps-webcomponent/p-dfecb452.entry.js +0 -7
- package/dist/jaak-stamps-webcomponent/p-dfecb452.entry.js.map +0 -1
|
@@ -25,8 +25,8 @@ h1 {
|
|
|
25
25
|
position: relative;
|
|
26
26
|
width: 100%;
|
|
27
27
|
height: 100%;
|
|
28
|
-
background: #
|
|
29
|
-
border:
|
|
28
|
+
background-color: #000;
|
|
29
|
+
border: none;
|
|
30
30
|
border-radius: 8px;
|
|
31
31
|
overflow: hidden;
|
|
32
32
|
}
|
|
@@ -51,6 +51,27 @@ video {
|
|
|
51
51
|
z-index: 0;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
+
/* Hide native video controls on Safari/WebKit */
|
|
55
|
+
video::-webkit-media-controls {
|
|
56
|
+
display: none !important;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
video::-webkit-media-controls-panel {
|
|
60
|
+
display: none !important;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
video::-webkit-media-controls-play-button {
|
|
64
|
+
display: none !important;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
video::-webkit-media-controls-start-playback-button {
|
|
68
|
+
display: none !important;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
video::-webkit-media-controls-enclosure {
|
|
72
|
+
display: none !important;
|
|
73
|
+
}
|
|
74
|
+
|
|
54
75
|
/* Detection boxes for debug mode */
|
|
55
76
|
.detection-box {
|
|
56
77
|
transition: opacity 0.2s ease;
|
|
@@ -113,6 +113,7 @@ export class JaakStamps {
|
|
|
113
113
|
MAX_FAILURES = 30;
|
|
114
114
|
lastInferenceTime = 0;
|
|
115
115
|
MIN_INFERENCE_INTERVAL = 50;
|
|
116
|
+
MOBILE_MIN_INFERENCE_INTERVAL = 100; // Higher interval for mobile to prevent slow motion
|
|
116
117
|
performanceHistory = [];
|
|
117
118
|
PERFORMANCE_HISTORY_SIZE = 10;
|
|
118
119
|
// Sistema simplificado de monitoreo de rendimiento
|
|
@@ -977,9 +978,14 @@ export class JaakStamps {
|
|
|
977
978
|
return;
|
|
978
979
|
}
|
|
979
980
|
this.frameSkipCounter = 0;
|
|
980
|
-
// Throttle inference
|
|
981
|
+
// Throttle inference - use higher interval for mobile devices to prevent slow motion effect
|
|
981
982
|
const currentTime = Date.now();
|
|
982
|
-
|
|
983
|
+
const isMobileDevice = this.cameraInfoWithAutofocus.deviceType === 'mobile' ||
|
|
984
|
+
/Android|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
985
|
+
const isTablet = this.cameraInfoWithAutofocus.deviceType === 'tablet' ||
|
|
986
|
+
(/iPad|Android/i.test(navigator.userAgent) && window.innerWidth >= 768);
|
|
987
|
+
const minInterval = (isMobileDevice && !isTablet) ? this.MOBILE_MIN_INFERENCE_INTERVAL : this.MIN_INFERENCE_INTERVAL;
|
|
988
|
+
if (currentTime - this.lastInferenceTime < minInterval) {
|
|
983
989
|
if (captureState.step !== 'completed') {
|
|
984
990
|
this.animationId = requestAnimationFrame(() => this.detectFrame());
|
|
985
991
|
}
|
|
@@ -1133,7 +1139,7 @@ export class JaakStamps {
|
|
|
1133
1139
|
isCapturing: false
|
|
1134
1140
|
};
|
|
1135
1141
|
const cameraInfo = this.cameraInfoWithAutofocus;
|
|
1136
|
-
return (h("div", { key: '
|
|
1142
|
+
return (h("div", { key: 'df70f4fa13b2997a19312125c8b236651cb2b81e', class: "detector-container" }, !this.licenseValid && this.licenseError && (h("div", { key: 'c4f7b51515843177bc3063dd7cf9383e3a4c6c73', class: "license-error-container" }, h("div", { key: 'a4a7e95a23690f9f59c971dd2af9bd096ae13ef0', class: "license-error-card" }, h("svg", { key: '6489a82c60fc9c1a7d89c2b3a537c04c1766cbd4', 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: 'b90b16b0ee155c8baeee321237470de7b6fa1ff5', 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: 'c90ec519befb073208dbc5e30e1237dda7f0a18f', d: "M12 8V12", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("circle", { key: 'b926e97a83e19c7ca9b66472fedd53b12d22b7d8', cx: "12", cy: "16", r: "0.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" })), h("h2", { key: '1f1fce48179331b0150e0c55a6d5efcd0bf95762', class: "license-error-title" }, "Licencia Requerida"), h("p", { key: '1f28787cea92c5160664bd8e445fb514ac55eff4', class: "license-error-message" }, this.licenseError), h("p", { key: '552aecf92fd34fbdd802fc80cdba46596edb115b', class: "license-error-help" }, "Contacte a soporte: ", h("a", { key: '8c44e1e33fbd22a2319acd6c6b27766bec4355f0', href: "mailto:support@jaak.ai" }, "support@jaak.ai")), h("div", { key: 'c2e139fdedcb8e8922f37e915caa7ae3a1b09cb9', class: "license-error-footer" }, "JAAK Stamps")))), this.licenseValid && (h("div", { key: 'c7876bbe35cd28b52433aab6e97de4a0282e25d5', class: "video-container" }, h("video", { key: 'a5fa99c086eb3730ceee7750ece0842539defa3d', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: '2c7923dfa706f65cfc3fe71a6ec626cb2ccce7d4', 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: {
|
|
1137
1143
|
position: 'absolute',
|
|
1138
1144
|
left: `${box.x}px`,
|
|
1139
1145
|
top: `${box.y}px`,
|
|
@@ -1142,9 +1148,9 @@ export class JaakStamps {
|
|
|
1142
1148
|
border: '2px solid #32406C',
|
|
1143
1149
|
pointerEvents: 'none',
|
|
1144
1150
|
boxSizing: 'border-box'
|
|
1145
|
-
} })))), this.isMaskReady && (h("div", { key: '
|
|
1151
|
+
} })))), this.isMaskReady && (h("div", { key: '3e1f77d89a00e4ad1519875cacd5c541c9b16f91', class: "overlay-mask" }, h("div", { key: '3c717afa809ef2fa102fdaab3418915602516d39', class: "card-outline" }, h("div", { key: 'd3dcd1a85290f3fb2216b1182dce9a4b62cc59c6', class: "side side-top" }), h("div", { key: '4280c1e0f0900ec69b905a6226c1afe9a0a993ad', class: "side side-right" }), h("div", { key: '9b88c21f5eb28d74872409335cd6ca83a284bd9b', class: "side side-bottom" }), h("div", { key: '46b4ef3fca60fcf807da8f574a43cba7f148165b', class: "side side-left" })), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '2222975293bebfd04fa2d4ac4878bce48fd35880', class: `guide-text ${this.showPerformanceMessage ? 'performance-warning-text' : ''}` }, this.getGuideText(captureState.step))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '836fbeadb849cb9df66e03ef0cb791dd0e179df8', class: "back-capture-section" }, h("div", { key: 'f0e8119b79f30ffd40ae206783a83869196757ac', class: "back-capture-buttons" }, (!this.useDocumentDetector || this.performanceDegradedMode || this.showManualCaptureButton) && (h("button", { key: 'e245e800e2378989bfa011524cca66026ace52d9', class: "capture-button primary-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-back' && (h("span", { key: 'd98a692f9ff883d05e24122b54c4e36f5f96e82f', class: "button-spinner" })), "Capturar Reverso")), h("button", { key: 'c32b7784e2bbb89947219f0d458d0a4d62b5352a', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'skip-back' && (h("span", { key: 'bb935e91f07c4c1052576c52aa2a82a726877217', class: "button-spinner" })), this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
|
|
1146
1152
|
? `Saltar reverso (${this.backDocumentTimerRemaining}s)`
|
|
1147
|
-
: 'Saltar reverso')))), captureState.isVideoActive && (h("div", { key: '
|
|
1153
|
+
: 'Saltar reverso')))), captureState.isVideoActive && (h("div", { key: '471a1292e9d093cce0a0d3fa7f96f3665de749fb', class: "camera-controls" }, h("button", { key: '406911235a06723310ff577c27e3858912e522c4', 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: 'b8fd729b78a3c5cb52b7f17d031bb12b894aaf41', class: "camera-selector-dropdown" }, h("div", { key: '2b9b451440d6b6be4103419694ff6a53c92e68ad', class: "camera-selector-header" }, h("span", { key: '2271f4694aa6c0b32ab23a02a7a8d6d4c1bd4144' }, "Seleccionar C\u00E1mara"), h("button", { key: 'ccfc02eb031da17a4907cd835642785bc2ef5e77', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: '073d6e9e09cde8523e926850dfa73704b579c899', 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: '8f914f855727a6ab02a2941fee91283bf3882df2', class: "device-info" }, h("small", { key: '295433a43a539034992f04a29355deed12082092' }, "Dispositivo: ", cameraInfo.deviceType)))), this.showManualCaptureButton && captureState.step === 'front' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: 'cc780583a636e7d4910851789710837c9e188d40', class: "manual-capture-section" }, h("button", { key: '40c5e212a3a4eab4d2edf44e29e6b4fe0e4c5e37', class: "manual-capture-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-front' && (h("span", { key: '1245a13523250b5959a1c303ca20662c2d6750c7', class: "button-spinner" })), "Capturar Frente"))))), captureState.isCapturing && (h("div", { key: '10a0a26b346ecf0945688f82292720871f8dc0b7', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: '68dc7effe82d2f043d778239e2aecb847d159818', class: "flip-animation" }, h("div", { key: '153e0c2229c39c5b9402b9610eaee586d98f84c1', class: "id-card-icon" }), h("div", { key: 'b60b249c43ac5f8417c15b8ce46f60d2cb3134d5', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: 'fefa7bf80546a463a54a275e425241545ace5c77', class: "success-animation" }, h("div", { key: 'cda9d64b3b30cc636d976c2c644a927a8ebe341e', class: "check-icon" }), h("div", { key: 'fd00554df841cdb6e1a167b7e6cc4a6b9b60957a', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: 'cd5fa1fbfa5e3a4e362281553dde2c37601b1078', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: 'cb0d76938d8ccab99632920ffc9d73a1fa7dec79', class: "status-spinner" })), h("div", { key: 'bcfdc2a24e12dc0bcc19ae0d647be5ce810994d5', class: "status-content" }, h("div", { key: 'a4b6dad22b40aed65a9c81e9581e61a9ca064e40', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: '236084444d4d156b672f823349f95b462a8a9bba', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: '7423d6c8c7e37b7baffc27fc243536e2659475cc', class: "performance-monitor" }, h("div", { key: '892736f4be3d1cd563ec919c5a504ca8e0d55db0', class: "performance-expanded" }, h("div", { key: 'aa0464f739f838ac4c9e553c79f4c7815f7f65cf', class: "metrics-row" }, h("div", { key: '5dca0c5fe0f91ecfaa25c5775c18a99d53eb8f73', class: "metric-compact" }, h("span", { key: '8e498b185cdefb97286356b56e45dc7b514f667e', class: "metric-label" }, "FPS"), h("span", { key: '3a90611c84b338314ae1503aef6208c67d1282ff', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: '568e492ef7dad971f1613132028999a81f38f457', class: "metric-compact" }, h("span", { key: '222fd2b522dd9f7172ad9adb442b10c1ce4c6455', class: "metric-label" }, "MEM"), h("span", { key: '8cbe2cf9fd7dd9e22e9a0df6f214165a09e03045', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: 'e5d946afd1cc80a15a52c9ba1cb252e6e146e929', class: "metrics-row" }, h("div", { key: '65aaaa92e3ce7b5567560d94f98e16226ecf9fd5', class: "metric-compact" }, h("span", { key: '80c6ad0923e729912274a05fffca039e88aa5719', class: "metric-label" }, "INF"), h("span", { key: '4a87270ebdad3be718b86d1382b2a54092e53a16', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: '41ddc923cdfab0012a2f5d3e19aee33dad6116fe', class: "metric-compact" }, h("span", { key: '84e9f4fb3d5bf60235d71d61dc1d6a8ad429293c', class: "metric-label" }, "FRAME"), h("span", { key: '88fd6964307399ac1547c7086f489af90a92a925', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: '22409e8dfb349e66ac54c20c6043b414b7ddba34', class: "metrics-row" }, h("div", { key: 'bbe72cb477f4bc313e7978d98c217a4789765df1', class: "metric-compact" }, h("span", { key: '56df43d72df8d3549fa42b2bc32fa5491c3cdb41', class: "metric-label" }, "DET"), h("span", { key: '7ceedb73086eccaed0e25177d76218e9bae1262d', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: '9407541b4f975b20843c19e7081d1c26bb3f4fd4', class: "metric-compact" }, h("span", { key: '511ffc66436ffe2f14300122213de11f50fbbc30', class: "metric-label" }, "RATE"), h("span", { key: '6a0c864b46314937043831be7646fbfa3d994c86', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: '72f26e4248c87e428a10bbd7b67bd77a9a32f321', class: "watermark" }, h("img", { key: '32e3f23ca1ff81699dd2a4922f8f7d4aeaa3cc2b', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" }))))));
|
|
1148
1154
|
}
|
|
1149
1155
|
// Utility methods
|
|
1150
1156
|
updateDetectionBoxes(boxes) {
|
|
@@ -1867,28 +1873,35 @@ export class JaakStamps {
|
|
|
1867
1873
|
}
|
|
1868
1874
|
// Adaptive frame skipping based on performance
|
|
1869
1875
|
getAdaptiveFrameSkip() {
|
|
1876
|
+
// Check if running on mobile device for more aggressive frame skipping
|
|
1877
|
+
const isMobileDevice = this.cameraInfoWithAutofocus.deviceType === 'mobile' ||
|
|
1878
|
+
/Android|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
1879
|
+
const isTablet = this.cameraInfoWithAutofocus.deviceType === 'tablet' ||
|
|
1880
|
+
(/iPad|Android/i.test(navigator.userAgent) && window.innerWidth >= 768);
|
|
1881
|
+
// Mobile-specific base frame skip (more aggressive to prevent slow motion effect)
|
|
1882
|
+
const mobileBaseSkip = isMobileDevice && !isTablet ? 4 : this.BASE_FRAME_SKIP;
|
|
1870
1883
|
// Base conditions for high frame skip
|
|
1871
1884
|
if (this.consecutiveFailures > 20)
|
|
1872
1885
|
return this.MAX_FRAME_SKIP;
|
|
1873
1886
|
if (this.performanceMetrics.inferenceTime > 200)
|
|
1874
|
-
return 6;
|
|
1887
|
+
return Math.max(6, mobileBaseSkip);
|
|
1875
1888
|
if (this.performanceMetrics.memoryUsage > 200)
|
|
1876
|
-
return 5;
|
|
1889
|
+
return Math.max(5, mobileBaseSkip);
|
|
1877
1890
|
// Calculate average processing time
|
|
1878
1891
|
if (this.performanceHistory.length > 0) {
|
|
1879
1892
|
const avgProcessingTime = this.performanceHistory.reduce((a, b) => a + b, 0) / this.performanceHistory.length;
|
|
1880
1893
|
if (avgProcessingTime > 100)
|
|
1881
|
-
return 4;
|
|
1894
|
+
return Math.max(4, mobileBaseSkip);
|
|
1882
1895
|
if (avgProcessingTime > 80)
|
|
1883
|
-
return 3;
|
|
1896
|
+
return Math.max(3, mobileBaseSkip);
|
|
1884
1897
|
if (avgProcessingTime > 60)
|
|
1885
|
-
return this.BASE_FRAME_SKIP + 1;
|
|
1898
|
+
return Math.max(this.BASE_FRAME_SKIP + 1, mobileBaseSkip);
|
|
1886
1899
|
}
|
|
1887
1900
|
// Low memory devices get higher frame skip
|
|
1888
1901
|
if (this.performanceMetrics.memoryUsage > 150)
|
|
1889
|
-
return 4;
|
|
1890
|
-
//
|
|
1891
|
-
return
|
|
1902
|
+
return Math.max(4, mobileBaseSkip);
|
|
1903
|
+
// Mobile devices use higher base frame skip for smoother video
|
|
1904
|
+
return mobileBaseSkip;
|
|
1892
1905
|
}
|
|
1893
1906
|
// Método para resetear la máscara a color blanco
|
|
1894
1907
|
resetMaskToWhite() {
|
|
@@ -2353,8 +2366,8 @@ export class JaakStamps {
|
|
|
2353
2366
|
"attribute": "license-environment",
|
|
2354
2367
|
"mutable": false,
|
|
2355
2368
|
"complexType": {
|
|
2356
|
-
"original": "'dev' | 'qa' | '
|
|
2357
|
-
"resolved": "\"dev\" | \"prod\" | \"qa\" | \"
|
|
2369
|
+
"original": "'dev' | 'qa' | 'sandbox' | 'prod'",
|
|
2370
|
+
"resolved": "\"dev\" | \"prod\" | \"qa\" | \"sandbox\"",
|
|
2358
2371
|
"references": {}
|
|
2359
2372
|
},
|
|
2360
2373
|
"required": false,
|