@jaak.ai/stamps 2.0.0-beta.3 → 2.0.0-dev.17
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 +19 -104
- package/dist/cjs/{index-BfhtOB0D.js → index-DGM9-FNg.js} +2 -5
- package/dist/cjs/index-DGM9-FNg.js.map +1 -0
- package/dist/cjs/jaak-stamps-webcomponent.cjs.js +2 -2
- package/dist/cjs/jaak-stamps.cjs.entry.js +39 -749
- package/dist/cjs/jaak-stamps.cjs.entry.js.map +1 -1
- package/dist/cjs/jaak-stamps.entry.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/components/my-component/my-component.css +7 -237
- package/dist/collection/components/my-component/my-component.js +38 -886
- package/dist/collection/components/my-component/my-component.js.map +1 -1
- package/dist/components/index.js +0 -3
- package/dist/components/index.js.map +1 -1
- package/dist/components/jaak-stamps.js +39 -760
- package/dist/components/jaak-stamps.js.map +1 -1
- package/dist/esm/{index-BP1Q4KOg.js → index-DqoVMnc7.js} +2 -5
- package/dist/esm/index-DqoVMnc7.js.map +1 -0
- package/dist/esm/jaak-stamps-webcomponent.js +3 -3
- package/dist/esm/jaak-stamps.entry.js +39 -749
- package/dist/esm/jaak-stamps.entry.js.map +1 -1
- package/dist/esm/loader.js +3 -3
- 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-45dcdc80.entry.js +2 -0
- package/dist/jaak-stamps-webcomponent/p-45dcdc80.entry.js.map +1 -0
- package/dist/jaak-stamps-webcomponent/p-DqoVMnc7.js +3 -0
- package/dist/jaak-stamps-webcomponent/p-DqoVMnc7.js.map +1 -0
- package/dist/types/components/my-component/my-component.d.ts +2 -56
- package/dist/types/components.d.ts +0 -36
- package/package.json +1 -1
- package/dist/cjs/index-BfhtOB0D.js.map +0 -1
- package/dist/esm/index-BP1Q4KOg.js.map +0 -1
- package/dist/jaak-stamps-webcomponent/p-14eb13d8.entry.js +0 -2
- package/dist/jaak-stamps-webcomponent/p-14eb13d8.entry.js.map +0 -1
- package/dist/jaak-stamps-webcomponent/p-BP1Q4KOg.js +0 -3
- package/dist/jaak-stamps-webcomponent/p-BP1Q4KOg.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
|
|
2
2
|
|
|
3
|
-
const myComponentCss = ":host{display:block;width:100%;height:100%;font-family:system-ui, -apple-system, sans-serif;color:#1a1a1a}.detector-container{display:flex;flex-direction:column;align-items:center;width:100%;height:100%}h1{font-size:24px;font-weight:500;color:#333;margin:0 0 24px 0}.video-container{position:relative;width:100%;height:100%;background:#333;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}video,canvas{position:absolute;width:100%;height:100%;border-radius:8px}video.mirror,canvas.mirror{transform:rotateY(180deg)}canvas{z-index:1}video{z-index:0}.status{margin-top:16px;font-size:12px;color:#666}.overlay-mask{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:block;pointer-events:none}.card-outline{position:absolute;top:var(--mask-center-y, 50%);left:var(--mask-center-x, 50%);transform:translate(-50%, -50%);width:var(--mask-width, 88%);height:var(--mask-height, 55%);border:none;border-radius:4px;background:transparent;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7);opacity:0.8}.card-outline.perfect-match{box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7)}.side{position:absolute;background:#999;transition:background-color 0.3s ease}.side.aligned{background:#28a745}.side-top{top:0;left:0;width:100%;height:3px}.side-right{top:0;right:0;width:3px;height:100%}.side-bottom{bottom:0;left:0;width:100%;height:3px}.side-left{top:0;left:0;width:3px;height:100%}.corner{position:absolute;width:20px;height:20px;border:2px solid #999;z-index:12}.corner-tl{top:-10px;left:-10px;border-right:none;border-bottom:none}.corner-tr{top:-10px;right:-10px;border-left:none;border-bottom:none}.corner-bl{bottom:-10px;left:-10px;border-right:none;border-top:none}.corner-br{bottom:-10px;right:-10px;border-left:none;border-top:none}.corner.perfect-match{border-color:#28a745}.guide-text{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#fff;font-size:14px;font-weight:600;text-align:center;white-space:normal;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;z-index:20}.capture-animation{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;z-index:30;pointer-events:none;animation:captureFlash 0.6s ease-out}@keyframes captureFlash{0%{opacity:0}15%{opacity:0.8}30%{opacity:0}45%{opacity:0.4}60%{opacity:0}100%{opacity:0}}.card-outline.capturing{animation:pulseGreen 0.6s ease-out}@keyframes pulseGreen{0%{border-color:#28a745;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(40, 167, 69, 0)}50%{border-color:#28a745;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 8px rgba(40, 167, 69, 0.6)}100%{border-color:#28a745;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(40, 167, 69, 0)}}.flip-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showFlipInstruction 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.id-card-icon{width:80px;height:50px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:8px;position:relative;animation:flipCard 2s ease-in-out infinite;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3)}.id-card-icon::before{content:'';position:absolute;top:8px;left:8px;width:16px;height:12px;background:rgba(255, 255, 255, 0.9);border-radius:2px}.id-card-icon::after{content:'';position:absolute;top:25px;left:8px;width:64px;height:3px;background:rgba(255, 255, 255, 0.7);border-radius:1px;box-shadow:0 6px 0 rgba(255, 255, 255, 0.7), 0 12px 0 rgba(255, 255, 255, 0.7)}.flip-text{margin-top:12px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px}@keyframes showFlipInstruction{0%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}}@keyframes flipCard{0%{transform:rotateY(0deg)}50%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}.success-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showSuccessMessage 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.check-icon{width:80px;height:80px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:50%;position:relative;animation:bounceSuccess 0.6s ease-out;box-shadow:0 4px 16px rgba(108, 117, 125, 0.4);display:flex;align-items:center;justify-content:center}.check-icon::before{content:'';position:absolute;width:20px;height:35px;border:4px solid #fff;border-top:none;border-left:none;transform:rotate(45deg);animation:drawCheck 0.4s ease-out 0.2s both}.success-text{margin-top:16px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;animation:fadeInUp 0.5s ease-out 0.4s both}@keyframes showSuccessMessage{0%{opacity:0;transform:translate(-50%, -50%) scale(0.5)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.9)}}@keyframes bounceSuccess{0%{transform:scale(0)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes drawCheck{0%{width:0;height:0}50%{width:20px;height:0}100%{width:20px;height:35px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.skip-button{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.skip-button:hover{background:#f8f9fa}.skip-button:active{background:#e9ecef;transform:translateX(-50%) translateY(0)}.camera-controls{position:absolute;top:16px;right:16px;z-index:25;display:flex;gap:8px;pointer-events:auto}.flip-camera-button{height:40px;padding:0 16px;border:none;border-radius:8px;background:rgba(0, 0, 0, 0.6);backdrop-filter:blur(12px);color:#ffffff;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255, 255, 255, 0.1);white-space:nowrap;min-width:fit-content}.camera-selector-button{height:40px;padding:0 16px;border:none;border-radius:8px;background:rgba(0, 0, 0, 0.6);backdrop-filter:blur(12px);color:#ffffff;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255, 255, 255, 0.1);white-space:nowrap;min-width:fit-content}.flip-camera-button:hover,.camera-selector-button:hover{background:rgba(0, 0, 0, 0.8);border-color:rgba(255, 255, 255, 0.2);transform:translateY(-1px)}.flip-camera-button:active,.camera-selector-button:active{transform:translateY(0);background:rgba(0, 0, 0, 0.9)}.camera-selector-dropdown{position:absolute;top:56px;right:16px;z-index:30;background:rgba(0, 0, 0, 0.85);backdrop-filter:blur(20px);border-radius:12px;min-width:260px;max-width:300px;border:1px solid rgba(255, 255, 255, 0.1);overflow:hidden;pointer-events:auto;animation:slideInFromTop 0.3s ease-out}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-8px) scale(0.95)}100%{opacity:1;transform:translateY(0) scale(1)}}.camera-selector-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}.camera-selector-header span{font-weight:500;color:#ffffff;font-size:13px;opacity:0.9}.close-selector{width:20px;height:20px;border:none;background:none;color:rgba(255, 255, 255, 0.7);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all 0.2s ease}.close-selector:hover{background:rgba(255, 255, 255, 0.1);color:#ffffff}.camera-list{padding:4px 0;max-height:240px;overflow-y:auto}.camera-option{width:100%;padding:10px 16px;border:none;background:none;text-align:left;cursor:pointer;transition:all 0.2s ease;display:flex;justify-content:space-between;align-items:center;color:rgba(255, 255, 255, 0.9)}.camera-option:hover{background:rgba(255, 255, 255, 0.08)}.camera-option.selected{background:rgba(255, 255, 255, 0.12);color:#ffffff}.camera-label{font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px;font-weight:400}.selected-indicator{font-size:14px;color:#ffffff;opacity:0.9}.device-info{padding:8px 16px;border-top:1px solid rgba(255, 255, 255, 0.1);background:rgba(255, 255, 255, 0.05)}.device-info small{color:rgba(255, 255, 255, 0.6);font-size:11px;text-transform:capitalize;font-weight:400}@media (max-width: 480px){.camera-controls{top:12px;right:12px;gap:6px}.flip-camera-button{height:36px;padding:0 12px;font-size:11px;border-radius:6px}.camera-selector-button{height:36px;padding:0 12px;font-size:11px;border-radius:6px}.camera-selector-dropdown{right:12px;top:48px;min-width:240px;max-width:calc(100vw - 24px)}.camera-selector-header{padding:10px 14px}.camera-option{padding:8px 14px}.device-info{padding:6px 14px}}.watermark{position:absolute;bottom:12px;right:12px;z-index:15;pointer-events:none;opacity:0.7}.watermark img{height:24px;width:auto;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.8);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;border-radius:20px}.loading-spinner{width:60px;height:60px;border:4px solid rgba(255, 255, 255, 0.2);border-top:4px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}.loading-text{color:white;font-size:16px;font-weight:500;text-align:center;opacity:0.9}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
|
|
3
|
+
const myComponentCss = ":host{display:block;font-family:system-ui, -apple-system, sans-serif;color:#1a1a1a}.detector-container{display:flex;flex-direction:column;align-items:center}h1{font-size:24px;font-weight:500;color:#333;margin:0 0 24px 0}.video-container{position:relative;width:100%;max-width:640px;aspect-ratio:1;background:#fff;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}video,canvas{position:absolute;width:100%;height:100%;border-radius:8px}video.mirror,canvas.mirror{transform:rotateY(180deg)}canvas{z-index:1}video{z-index:0}.status{margin-top:16px;font-size:12px;color:#666}.overlay-mask{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:block;pointer-events:none}.card-outline{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:88%;height:55%;border:none;border-radius:4px;background:transparent;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7);opacity:0.8}.card-outline.perfect-match{box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7)}.side{position:absolute;background:#999;transition:background-color 0.3s ease}.side.aligned{background:#28a745}.side-top{top:0;left:0;width:100%;height:3px}.side-right{top:0;right:0;width:3px;height:100%}.side-bottom{bottom:0;left:0;width:100%;height:3px}.side-left{top:0;left:0;width:3px;height:100%}.corner{position:absolute;width:20px;height:20px;border:2px solid #999;z-index:12}.corner-tl{top:-10px;left:-10px;border-right:none;border-bottom:none}.corner-tr{top:-10px;right:-10px;border-left:none;border-bottom:none}.corner-bl{bottom:-10px;left:-10px;border-right:none;border-top:none}.corner-br{bottom:-10px;right:-10px;border-left:none;border-top:none}.corner.perfect-match{border-color:#28a745}.guide-text{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#fff;font-size:14px;font-weight:600;text-align:center;white-space:normal;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;z-index:20}.capture-animation{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;z-index:30;pointer-events:none;animation:captureFlash 0.6s ease-out}@keyframes captureFlash{0%{opacity:0}15%{opacity:0.8}30%{opacity:0}45%{opacity:0.4}60%{opacity:0}100%{opacity:0}}.card-outline.capturing{animation:pulseGreen 0.6s ease-out}@keyframes pulseGreen{0%{border-color:#28a745;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(40, 167, 69, 0)}50%{border-color:#28a745;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 8px rgba(40, 167, 69, 0.6)}100%{border-color:#28a745;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(40, 167, 69, 0)}}.flip-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showFlipInstruction 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.id-card-icon{width:80px;height:50px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:8px;position:relative;animation:flipCard 2s ease-in-out infinite;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3)}.id-card-icon::before{content:'';position:absolute;top:8px;left:8px;width:16px;height:12px;background:rgba(255, 255, 255, 0.9);border-radius:2px}.id-card-icon::after{content:'';position:absolute;top:25px;left:8px;width:64px;height:3px;background:rgba(255, 255, 255, 0.7);border-radius:1px;box-shadow:0 6px 0 rgba(255, 255, 255, 0.7), 0 12px 0 rgba(255, 255, 255, 0.7)}.flip-text{margin-top:12px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px}@keyframes showFlipInstruction{0%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}}@keyframes flipCard{0%{transform:rotateY(0deg)}50%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}.success-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showSuccessMessage 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.check-icon{width:80px;height:80px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:50%;position:relative;animation:bounceSuccess 0.6s ease-out;box-shadow:0 4px 16px rgba(108, 117, 125, 0.4);display:flex;align-items:center;justify-content:center}.check-icon::before{content:'';position:absolute;width:20px;height:35px;border:4px solid #fff;border-top:none;border-left:none;transform:rotate(45deg);animation:drawCheck 0.4s ease-out 0.2s both}.success-text{margin-top:16px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;animation:fadeInUp 0.5s ease-out 0.4s both}@keyframes showSuccessMessage{0%{opacity:0;transform:translate(-50%, -50%) scale(0.5)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.9)}}@keyframes bounceSuccess{0%{transform:scale(0)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes drawCheck{0%{width:0;height:0}50%{width:20px;height:0}100%{width:20px;height:35px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.skip-button{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.skip-button:hover{background:#f8f9fa}.skip-button:active{background:#e9ecef;transform:translateX(-50%) translateY(0)}.watermark{position:absolute;bottom:12px;right:12px;z-index:15;pointer-events:none;opacity:0.7}.watermark img{height:24px;width:auto;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.8);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;border-radius:20px}.loading-spinner{width:60px;height:60px;border:4px solid rgba(255, 255, 255, 0.2);border-top:4px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}.loading-text{color:white;font-size:16px;font-weight:500;text-align:center;opacity:0.9}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
|
|
4
4
|
|
|
5
5
|
const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H {
|
|
6
6
|
constructor() {
|
|
@@ -8,17 +8,11 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
8
8
|
this.__registerHost();
|
|
9
9
|
this.__attachShadow();
|
|
10
10
|
this.captureCompleted = createEvent(this, "captureCompleted");
|
|
11
|
-
this.isReady = createEvent(this, "isReady");
|
|
12
11
|
}
|
|
13
12
|
get el() { return this; }
|
|
14
13
|
debug = false;
|
|
15
14
|
alignmentTolerance = 10; // Tolerancia en píxeles para considerar un lado alineado (escalado para 320x320)
|
|
16
|
-
maskSize = 90; // Porcentaje del video que ocupará la máscara (default 90%)
|
|
17
|
-
cropMargin = 0; // Margen en píxeles para el recorte del documento (default 0)
|
|
18
|
-
useDocumentClassification = false; // Habilita la clasificación automática de documentos para determinar si solicitar reverso
|
|
19
|
-
preferredCamera = 'auto'; // Define qué cámara usar: 'auto' (automático según dispositivo), 'front' (frontal), 'back' (trasera)
|
|
20
15
|
captureCompleted;
|
|
21
|
-
isReady;
|
|
22
16
|
isVideoActive = false;
|
|
23
17
|
statusMessage = 'Presione el botón para activar la cámara';
|
|
24
18
|
statusColor = '#aaa';
|
|
@@ -41,11 +35,6 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
41
35
|
isDetectionPaused = false;
|
|
42
36
|
isLoading = false;
|
|
43
37
|
isModelPreloaded = false;
|
|
44
|
-
isMaskReady = false;
|
|
45
|
-
availableCameras = [];
|
|
46
|
-
selectedCameraId = null;
|
|
47
|
-
showCameraSelector = false;
|
|
48
|
-
isMultipleCamerasAvailable = false;
|
|
49
38
|
videoRef;
|
|
50
39
|
canvasRef;
|
|
51
40
|
session;
|
|
@@ -54,11 +43,6 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
54
43
|
animationId;
|
|
55
44
|
hasScreenshotTaken = false;
|
|
56
45
|
lastDetectedBox;
|
|
57
|
-
mobileNetSession;
|
|
58
|
-
mobileNetClassMap;
|
|
59
|
-
// Camera management properties
|
|
60
|
-
deviceType = 'desktop';
|
|
61
|
-
preferredCameraFacing = null;
|
|
62
46
|
// Performance optimization properties
|
|
63
47
|
frameSkipCounter = 0;
|
|
64
48
|
FRAME_SKIP = 2; // Process every 3rd frame (reduces CPU by ~66%)
|
|
@@ -71,42 +55,16 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
71
55
|
preprocessCtx;
|
|
72
56
|
captureCanvas;
|
|
73
57
|
captureCtx;
|
|
74
|
-
MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/
|
|
75
|
-
MOBILENET_MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/cdmmp-v1.onnx";
|
|
76
|
-
MOBILENET_CLASSES_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/cdmmp-v1.json";
|
|
58
|
+
MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/detector-nano.onnx";
|
|
77
59
|
INPUT_SIZE = 320;
|
|
78
60
|
CONFIDENCE_THRESHOLD = 0.6;
|
|
79
|
-
|
|
80
|
-
|
|
61
|
+
MASK_WIDTH = 280;
|
|
62
|
+
MASK_HEIGHT = 176;
|
|
81
63
|
debugLog(...args) {
|
|
82
64
|
if (this.debug) {
|
|
83
65
|
console.log(...args);
|
|
84
66
|
}
|
|
85
67
|
}
|
|
86
|
-
validateMaskSize() {
|
|
87
|
-
if (this.maskSize < 50 || this.maskSize > 100) {
|
|
88
|
-
console.warn(`maskSize debe estar entre 50 y 100. Valor actual: ${this.maskSize}. Usando valor por defecto: 90`);
|
|
89
|
-
this.maskSize = 90;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
validateCropMargin() {
|
|
93
|
-
if (this.cropMargin < 0 || this.cropMargin > 100) {
|
|
94
|
-
console.warn(`cropMargin debe estar entre 0 y 100. Valor actual: ${this.cropMargin}. Usando valor por defecto: 0`);
|
|
95
|
-
this.cropMargin = 0;
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
validatePreferredCamera() {
|
|
99
|
-
const validOptions = ['auto', 'front', 'back'];
|
|
100
|
-
if (!validOptions.includes(this.preferredCamera)) {
|
|
101
|
-
console.warn(`preferredCamera debe ser uno de: ${validOptions.join(', ')}. Valor actual: ${this.preferredCamera}. Usando valor por defecto: 'auto'`);
|
|
102
|
-
this.preferredCamera = 'auto';
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
emitReadyEvent() {
|
|
106
|
-
const isDocumentReady = !!window.ort && this.isModelPreloaded;
|
|
107
|
-
this.isReady.emit(isDocumentReady);
|
|
108
|
-
this.debugLog('🟢 isReady event emitted:', isDocumentReady);
|
|
109
|
-
}
|
|
110
68
|
isRearCamera(stream) {
|
|
111
69
|
const videoTrack = stream.getVideoTracks()[0];
|
|
112
70
|
if (!videoTrack)
|
|
@@ -114,368 +72,14 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
114
72
|
const settings = videoTrack.getSettings();
|
|
115
73
|
return settings.facingMode === 'environment';
|
|
116
74
|
}
|
|
117
|
-
async detectDeviceTypeAndCameras() {
|
|
118
|
-
// Detect device type
|
|
119
|
-
const userAgent = navigator.userAgent;
|
|
120
|
-
const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
|
|
121
|
-
const isTablet = /iPad|Android/i.test(userAgent) && window.innerWidth >= 768;
|
|
122
|
-
if (isTablet) {
|
|
123
|
-
this.deviceType = 'tablet';
|
|
124
|
-
}
|
|
125
|
-
else if (isMobile) {
|
|
126
|
-
this.deviceType = 'mobile';
|
|
127
|
-
}
|
|
128
|
-
else {
|
|
129
|
-
this.deviceType = 'desktop';
|
|
130
|
-
}
|
|
131
|
-
this.debugLog('📱 Device type detected:', this.deviceType);
|
|
132
|
-
// Enumerate available cameras
|
|
133
|
-
await this.enumerateAndDetectCameras();
|
|
134
|
-
// Load user preference
|
|
135
|
-
this.loadCameraPreference();
|
|
136
|
-
}
|
|
137
|
-
async enumerateAndDetectCameras() {
|
|
138
|
-
try {
|
|
139
|
-
// First, check if we have permission to enumerate devices
|
|
140
|
-
const permissionStatus = await this.checkCameraPermission();
|
|
141
|
-
if (permissionStatus === 'denied') {
|
|
142
|
-
this.debugLog('❌ Camera permission denied');
|
|
143
|
-
this.statusMessage = "Permiso de cámara denegado";
|
|
144
|
-
this.statusColor = "#ff6b6b";
|
|
145
|
-
return;
|
|
146
|
-
}
|
|
147
|
-
// Request minimal permission to get device labels
|
|
148
|
-
if (permissionStatus === 'prompt') {
|
|
149
|
-
const tempStream = await navigator.mediaDevices.getUserMedia({ video: true });
|
|
150
|
-
tempStream.getTracks().forEach(track => track.stop());
|
|
151
|
-
}
|
|
152
|
-
// Now enumerate devices with labels
|
|
153
|
-
const devices = await navigator.mediaDevices.enumerateDevices();
|
|
154
|
-
this.availableCameras = devices.filter(device => device.kind === 'videoinput');
|
|
155
|
-
this.isMultipleCamerasAvailable = this.availableCameras.length > 1;
|
|
156
|
-
this.debugLog('📹 Available cameras:', {
|
|
157
|
-
count: this.availableCameras.length,
|
|
158
|
-
isMultipleCamerasAvailable: this.isMultipleCamerasAvailable,
|
|
159
|
-
cameras: this.availableCameras.map(cam => ({
|
|
160
|
-
id: cam.deviceId,
|
|
161
|
-
label: cam.label || 'Unknown Camera'
|
|
162
|
-
}))
|
|
163
|
-
});
|
|
164
|
-
// Set initial camera preference based on device type
|
|
165
|
-
this.setInitialCameraPreference();
|
|
166
|
-
}
|
|
167
|
-
catch (error) {
|
|
168
|
-
this.debugLog('❌ Error enumerating cameras:', error);
|
|
169
|
-
this.handleCameraPermissionError(error);
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
async checkCameraPermission() {
|
|
173
|
-
try {
|
|
174
|
-
if (!navigator.permissions) {
|
|
175
|
-
return 'prompt'; // Assume we need to prompt on older browsers
|
|
176
|
-
}
|
|
177
|
-
const permission = await navigator.permissions.query({ name: 'camera' });
|
|
178
|
-
return permission.state;
|
|
179
|
-
}
|
|
180
|
-
catch (error) {
|
|
181
|
-
this.debugLog('⚠️ Could not check camera permission:', error);
|
|
182
|
-
return 'prompt';
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
handleCameraPermissionError(error) {
|
|
186
|
-
if (error.name === 'NotAllowedError') {
|
|
187
|
-
this.statusMessage = "Permiso de cámara denegado. Active el permiso en configuración.";
|
|
188
|
-
this.statusColor = "#ff6b6b";
|
|
189
|
-
this.availableCameras = [];
|
|
190
|
-
this.isMultipleCamerasAvailable = false;
|
|
191
|
-
}
|
|
192
|
-
else if (error.name === 'NotFoundError') {
|
|
193
|
-
this.statusMessage = "No se encontraron cámaras disponibles.";
|
|
194
|
-
this.statusColor = "#ff6b6b";
|
|
195
|
-
this.availableCameras = [];
|
|
196
|
-
this.isMultipleCamerasAvailable = false;
|
|
197
|
-
}
|
|
198
|
-
else if (error.name === 'NotReadableError') {
|
|
199
|
-
this.statusMessage = "Cámara en uso por otra aplicación.";
|
|
200
|
-
this.statusColor = "#ff6b6b";
|
|
201
|
-
this.availableCameras = [];
|
|
202
|
-
this.isMultipleCamerasAvailable = false;
|
|
203
|
-
}
|
|
204
|
-
else {
|
|
205
|
-
this.statusMessage = "Error al acceder a las cámaras.";
|
|
206
|
-
this.statusColor = "#ff6b6b";
|
|
207
|
-
this.availableCameras = [];
|
|
208
|
-
this.isMultipleCamerasAvailable = false;
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
setInitialCameraPreference() {
|
|
212
|
-
if (this.availableCameras.length === 0)
|
|
213
|
-
return;
|
|
214
|
-
// Apply user preference for camera selection
|
|
215
|
-
if (this.preferredCamera === 'front') {
|
|
216
|
-
// User explicitly wants front camera
|
|
217
|
-
this.preferredCameraFacing = 'user';
|
|
218
|
-
const frontCamera = this.availableCameras.find(camera => camera.label.toLowerCase().includes('front') ||
|
|
219
|
-
camera.label.toLowerCase().includes('user') ||
|
|
220
|
-
camera.label.toLowerCase().includes('selfie') ||
|
|
221
|
-
!camera.label.toLowerCase().includes('back') && !camera.label.toLowerCase().includes('rear'));
|
|
222
|
-
if (frontCamera) {
|
|
223
|
-
this.selectedCameraId = frontCamera.deviceId;
|
|
224
|
-
this.debugLog('👤 User selected front camera:', frontCamera.label);
|
|
225
|
-
}
|
|
226
|
-
else {
|
|
227
|
-
this.selectedCameraId = this.availableCameras[0].deviceId;
|
|
228
|
-
this.debugLog('⚠️ Front camera not found, using first available:', this.availableCameras[0].label);
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
else if (this.preferredCamera === 'back') {
|
|
232
|
-
// User explicitly wants back camera
|
|
233
|
-
this.preferredCameraFacing = 'environment';
|
|
234
|
-
const backCamera = this.availableCameras.find(camera => camera.label.toLowerCase().includes('back') ||
|
|
235
|
-
camera.label.toLowerCase().includes('rear') ||
|
|
236
|
-
camera.label.toLowerCase().includes('environment'));
|
|
237
|
-
if (backCamera) {
|
|
238
|
-
this.selectedCameraId = backCamera.deviceId;
|
|
239
|
-
this.debugLog('📷 User selected back camera:', backCamera.label);
|
|
240
|
-
}
|
|
241
|
-
else {
|
|
242
|
-
this.selectedCameraId = this.availableCameras[0].deviceId;
|
|
243
|
-
this.debugLog('⚠️ Back camera not found, using first available:', this.availableCameras[0].label);
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
|
-
else {
|
|
247
|
-
// Auto mode - use device type to determine best camera
|
|
248
|
-
if (this.deviceType === 'mobile' || this.deviceType === 'tablet') {
|
|
249
|
-
// For mobile/tablet, prefer rear camera for document scanning
|
|
250
|
-
this.preferredCameraFacing = 'environment';
|
|
251
|
-
const rearCamera = this.availableCameras.find(camera => camera.label.toLowerCase().includes('back') ||
|
|
252
|
-
camera.label.toLowerCase().includes('rear') ||
|
|
253
|
-
camera.label.toLowerCase().includes('environment'));
|
|
254
|
-
if (rearCamera) {
|
|
255
|
-
this.selectedCameraId = rearCamera.deviceId;
|
|
256
|
-
this.debugLog('📱 Auto-selected rear camera for mobile:', rearCamera.label);
|
|
257
|
-
}
|
|
258
|
-
else {
|
|
259
|
-
this.selectedCameraId = this.availableCameras[0].deviceId;
|
|
260
|
-
this.debugLog('📱 Rear camera not found, using first available:', this.availableCameras[0].label);
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
|
-
else {
|
|
264
|
-
// For desktop, use first available camera (usually the only one)
|
|
265
|
-
this.selectedCameraId = this.availableCameras[0].deviceId;
|
|
266
|
-
this.debugLog('💻 Auto-selected desktop camera:', this.availableCameras[0].label);
|
|
267
|
-
}
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
loadCameraPreference() {
|
|
271
|
-
try {
|
|
272
|
-
const saved = localStorage.getItem('jaak-stamps-camera-preference');
|
|
273
|
-
if (saved) {
|
|
274
|
-
const preference = JSON.parse(saved);
|
|
275
|
-
// Validate that the saved camera is still available
|
|
276
|
-
const isStillAvailable = this.availableCameras.some(camera => camera.deviceId === preference.cameraId);
|
|
277
|
-
if (isStillAvailable) {
|
|
278
|
-
this.selectedCameraId = preference.cameraId;
|
|
279
|
-
this.preferredCameraFacing = preference.facing;
|
|
280
|
-
this.debugLog('💾 Loaded camera preference:', preference);
|
|
281
|
-
}
|
|
282
|
-
}
|
|
283
|
-
}
|
|
284
|
-
catch (error) {
|
|
285
|
-
this.debugLog('⚠️ Error loading camera preference:', error);
|
|
286
|
-
}
|
|
287
|
-
}
|
|
288
|
-
saveCameraPreference() {
|
|
289
|
-
try {
|
|
290
|
-
const preference = {
|
|
291
|
-
cameraId: this.selectedCameraId,
|
|
292
|
-
facing: this.preferredCameraFacing,
|
|
293
|
-
timestamp: Date.now()
|
|
294
|
-
};
|
|
295
|
-
localStorage.setItem('jaak-stamps-camera-preference', JSON.stringify(preference));
|
|
296
|
-
this.debugLog('💾 Saved camera preference:', preference);
|
|
297
|
-
}
|
|
298
|
-
catch (error) {
|
|
299
|
-
this.debugLog('⚠️ Error saving camera preference:', error);
|
|
300
|
-
}
|
|
301
|
-
}
|
|
302
|
-
async switchCamera(cameraId) {
|
|
303
|
-
if (!this.isVideoActive || this.selectedCameraId === cameraId)
|
|
304
|
-
return;
|
|
305
|
-
try {
|
|
306
|
-
// Check if the selected camera is still available
|
|
307
|
-
const selectedCamera = this.availableCameras.find(cam => cam.deviceId === cameraId);
|
|
308
|
-
if (!selectedCamera) {
|
|
309
|
-
this.debugLog('❌ Selected camera not found, re-enumerating...');
|
|
310
|
-
await this.enumerateAndDetectCameras();
|
|
311
|
-
return;
|
|
312
|
-
}
|
|
313
|
-
// Show loading state
|
|
314
|
-
this.statusMessage = "Cambiando cámara...";
|
|
315
|
-
this.statusColor = "#007bff";
|
|
316
|
-
// Stop current stream
|
|
317
|
-
if (this.videoStream) {
|
|
318
|
-
this.videoStream.getTracks().forEach(track => track.stop());
|
|
319
|
-
}
|
|
320
|
-
// Update selected camera
|
|
321
|
-
this.selectedCameraId = cameraId;
|
|
322
|
-
// Update facing mode preference
|
|
323
|
-
const isRearCamera = selectedCamera.label.toLowerCase().includes('back') ||
|
|
324
|
-
selectedCamera.label.toLowerCase().includes('rear') ||
|
|
325
|
-
selectedCamera.label.toLowerCase().includes('environment');
|
|
326
|
-
this.preferredCameraFacing = isRearCamera ? 'environment' : 'user';
|
|
327
|
-
// Save preference
|
|
328
|
-
this.saveCameraPreference();
|
|
329
|
-
// Setup new camera with error handling
|
|
330
|
-
await this.setupCameraWithRetry();
|
|
331
|
-
this.debugLog('🔄 Switched to camera:', selectedCamera.label);
|
|
332
|
-
}
|
|
333
|
-
catch (error) {
|
|
334
|
-
this.debugLog('❌ Error switching camera:', error);
|
|
335
|
-
this.handleCameraPermissionError(error);
|
|
336
|
-
}
|
|
337
|
-
}
|
|
338
|
-
async setupCameraWithRetry(maxRetries = 3) {
|
|
339
|
-
for (let attempt = 1; attempt <= maxRetries; attempt++) {
|
|
340
|
-
try {
|
|
341
|
-
await this.setupCamera();
|
|
342
|
-
return; // Success
|
|
343
|
-
}
|
|
344
|
-
catch (error) {
|
|
345
|
-
this.debugLog(`❌ Camera setup attempt ${attempt} failed:`, error);
|
|
346
|
-
if (attempt === maxRetries) {
|
|
347
|
-
// Last attempt failed, handle the error
|
|
348
|
-
this.handleCameraPermissionError(error);
|
|
349
|
-
throw error;
|
|
350
|
-
}
|
|
351
|
-
// Wait before retrying
|
|
352
|
-
await new Promise(resolve => setTimeout(resolve, 500 * attempt));
|
|
353
|
-
}
|
|
354
|
-
}
|
|
355
|
-
}
|
|
356
|
-
toggleCameraSelector() {
|
|
357
|
-
this.showCameraSelector = !this.showCameraSelector;
|
|
358
|
-
this.debugLog('📹 Camera selector toggled:', {
|
|
359
|
-
showCameraSelector: this.showCameraSelector,
|
|
360
|
-
isMultipleCamerasAvailable: this.isMultipleCamerasAvailable,
|
|
361
|
-
availableCameras: this.availableCameras.length,
|
|
362
|
-
isVideoActive: this.isVideoActive
|
|
363
|
-
});
|
|
364
|
-
}
|
|
365
|
-
async flipCamera() {
|
|
366
|
-
if (!this.isMultipleCamerasAvailable)
|
|
367
|
-
return;
|
|
368
|
-
const currentIndex = this.availableCameras.findIndex(camera => camera.deviceId === this.selectedCameraId);
|
|
369
|
-
const nextIndex = (currentIndex + 1) % this.availableCameras.length;
|
|
370
|
-
const nextCamera = this.availableCameras[nextIndex];
|
|
371
|
-
await this.switchCamera(nextCamera.deviceId);
|
|
372
|
-
}
|
|
373
75
|
async componentDidLoad() {
|
|
374
|
-
this.validateMaskSize();
|
|
375
|
-
this.validateCropMargin();
|
|
376
|
-
this.validatePreferredCamera();
|
|
377
|
-
await this.detectDeviceTypeAndCameras();
|
|
378
76
|
if (!window.ort) {
|
|
379
77
|
const script = document.createElement('script');
|
|
380
78
|
script.src = 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js';
|
|
381
79
|
document.head.appendChild(script);
|
|
382
|
-
// Wait for ONNX runtime to load before emitting ready event
|
|
383
|
-
script.onload = () => {
|
|
384
|
-
this.emitReadyEvent();
|
|
385
|
-
};
|
|
386
|
-
}
|
|
387
|
-
else {
|
|
388
|
-
// ONNX runtime already loaded
|
|
389
|
-
this.emitReadyEvent();
|
|
390
80
|
}
|
|
391
81
|
// Initialize canvas pool for better performance
|
|
392
82
|
this.initializeCanvasPool();
|
|
393
|
-
this.setupResizeObserver();
|
|
394
|
-
}
|
|
395
|
-
setupResizeObserver() {
|
|
396
|
-
if ('ResizeObserver' in window && this.canvasRef) {
|
|
397
|
-
const resizeObserver = new ResizeObserver(() => {
|
|
398
|
-
this.handleResize();
|
|
399
|
-
});
|
|
400
|
-
resizeObserver.observe(this.canvasRef.parentElement);
|
|
401
|
-
}
|
|
402
|
-
}
|
|
403
|
-
handleResize() {
|
|
404
|
-
if (this.canvasRef) {
|
|
405
|
-
const container = this.canvasRef.parentElement;
|
|
406
|
-
const rect = container.getBoundingClientRect();
|
|
407
|
-
// Set canvas size to match container
|
|
408
|
-
this.canvasRef.width = rect.width;
|
|
409
|
-
this.canvasRef.height = rect.height;
|
|
410
|
-
// Update mask positioning based on container and video dimensions
|
|
411
|
-
this.updateMaskDimensions(rect);
|
|
412
|
-
this.debugLog('📐 Canvas resized:', { width: rect.width, height: rect.height });
|
|
413
|
-
}
|
|
414
|
-
}
|
|
415
|
-
updateMaskDimensions(containerRect) {
|
|
416
|
-
if (!this.videoRef)
|
|
417
|
-
return;
|
|
418
|
-
const videoWidth = this.videoRef.videoWidth;
|
|
419
|
-
const videoHeight = this.videoRef.videoHeight;
|
|
420
|
-
if (videoWidth === 0 || videoHeight === 0)
|
|
421
|
-
return;
|
|
422
|
-
// Calculate video aspect ratio and container aspect ratio
|
|
423
|
-
const videoAspectRatio = videoWidth / videoHeight;
|
|
424
|
-
const containerAspectRatio = containerRect.width / containerRect.height;
|
|
425
|
-
// Determine how video fits in container (letterboxed or pillarboxed)
|
|
426
|
-
let displayedVideoWidth, displayedVideoHeight;
|
|
427
|
-
let videoOffsetX = 0, videoOffsetY = 0;
|
|
428
|
-
if (videoAspectRatio > containerAspectRatio) {
|
|
429
|
-
// Video is wider - letterboxed (black bars top/bottom)
|
|
430
|
-
displayedVideoWidth = containerRect.width;
|
|
431
|
-
displayedVideoHeight = containerRect.width / videoAspectRatio;
|
|
432
|
-
videoOffsetY = (containerRect.height - displayedVideoHeight) / 2;
|
|
433
|
-
}
|
|
434
|
-
else {
|
|
435
|
-
// Video is taller - pillarboxed (black bars left/right)
|
|
436
|
-
displayedVideoHeight = containerRect.height;
|
|
437
|
-
displayedVideoWidth = containerRect.height * videoAspectRatio;
|
|
438
|
-
videoOffsetX = (containerRect.width - displayedVideoWidth) / 2;
|
|
439
|
-
}
|
|
440
|
-
// Calculate maximum possible mask size while preserving exact ID-1 aspect ratio
|
|
441
|
-
// Determine the limiting dimension based on video orientation and ID-1 proportions
|
|
442
|
-
// Calculate what would be the max width if limited by video height
|
|
443
|
-
const maxWidthByHeight = displayedVideoHeight * this.ID1_ASPECT_RATIO;
|
|
444
|
-
let maskWidthInVideo, maskHeightInVideo;
|
|
445
|
-
const sizeRatio = this.maskSize / 100;
|
|
446
|
-
if (maxWidthByHeight <= displayedVideoWidth) {
|
|
447
|
-
// Video height is the limiting factor
|
|
448
|
-
maskHeightInVideo = displayedVideoHeight * sizeRatio;
|
|
449
|
-
maskWidthInVideo = maskHeightInVideo * this.ID1_ASPECT_RATIO;
|
|
450
|
-
}
|
|
451
|
-
else {
|
|
452
|
-
// Video width is the limiting factor
|
|
453
|
-
maskWidthInVideo = displayedVideoWidth * sizeRatio;
|
|
454
|
-
maskHeightInVideo = maskWidthInVideo / this.ID1_ASPECT_RATIO;
|
|
455
|
-
}
|
|
456
|
-
// Convert to percentages of the container
|
|
457
|
-
const maskWidthPercent = (maskWidthInVideo / containerRect.width) * 100;
|
|
458
|
-
const maskHeightPercent = (maskHeightInVideo / containerRect.height) * 100;
|
|
459
|
-
// Calculate the center position of the displayed video area
|
|
460
|
-
const videoCenterX = videoOffsetX + (displayedVideoWidth / 2);
|
|
461
|
-
const videoCenterY = videoOffsetY + (displayedVideoHeight / 2);
|
|
462
|
-
// Convert to percentages of the container
|
|
463
|
-
const videoCenterXPercent = (videoCenterX / containerRect.width) * 100;
|
|
464
|
-
const videoCenterYPercent = (videoCenterY / containerRect.height) * 100;
|
|
465
|
-
// Update CSS custom properties for mask sizing and positioning
|
|
466
|
-
this.el.style.setProperty('--mask-width', `${maskWidthPercent}%`);
|
|
467
|
-
this.el.style.setProperty('--mask-height', `${maskHeightPercent}%`);
|
|
468
|
-
this.el.style.setProperty('--mask-center-x', `${videoCenterXPercent}%`);
|
|
469
|
-
this.el.style.setProperty('--mask-center-y', `${videoCenterYPercent}%`);
|
|
470
|
-
// Mark mask as ready now that dimensions are calculated
|
|
471
|
-
this.isMaskReady = true;
|
|
472
|
-
this.debugLog('🎯 Mask dimensions updated:', {
|
|
473
|
-
video: { width: videoWidth, height: videoHeight },
|
|
474
|
-
displayed: { width: displayedVideoWidth, height: displayedVideoHeight },
|
|
475
|
-
mask: { widthPercent: maskWidthPercent, heightPercent: maskHeightPercent },
|
|
476
|
-
center: { x: videoCenterXPercent, y: videoCenterYPercent },
|
|
477
|
-
offset: { x: videoOffsetX, y: videoOffsetY }
|
|
478
|
-
});
|
|
479
83
|
}
|
|
480
84
|
initializeCanvasPool() {
|
|
481
85
|
// Preprocess canvas - reused for every inference
|
|
@@ -544,29 +148,24 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
544
148
|
}
|
|
545
149
|
try {
|
|
546
150
|
this.isLoading = true;
|
|
547
|
-
this.statusMessage = "Precargando
|
|
151
|
+
this.statusMessage = "Precargando modelo de detección...";
|
|
548
152
|
this.statusColor = "#007bff";
|
|
549
153
|
const modelPath = this.MODEL_PATH;
|
|
550
|
-
this.debugLog('🤖 Preloading
|
|
154
|
+
this.debugLog('🤖 Preloading model:', modelPath);
|
|
551
155
|
// Configure ONNX Runtime with device-specific optimizations
|
|
552
156
|
const sessionOptions = this.getSessionOptions();
|
|
553
157
|
this.session = await window.ort.InferenceSession.create(modelPath, sessionOptions);
|
|
554
|
-
// Preload MobileNet model and classes only if classification is enabled
|
|
555
|
-
if (this.useDocumentClassification) {
|
|
556
|
-
await this.loadMobileNetModel();
|
|
557
|
-
}
|
|
558
158
|
this.isModelPreloaded = true;
|
|
559
159
|
this.isLoading = false;
|
|
560
|
-
this.statusMessage = "
|
|
160
|
+
this.statusMessage = "Modelo precargado. Listo para comenzar detección";
|
|
561
161
|
this.statusColor = "#28a745";
|
|
562
|
-
this.
|
|
563
|
-
|
|
564
|
-
return { success: true, message: 'Models preloaded successfully' };
|
|
162
|
+
this.debugLog('✅ Model preloaded successfully');
|
|
163
|
+
return { success: true, message: 'Model preloaded successfully' };
|
|
565
164
|
}
|
|
566
165
|
catch (error) {
|
|
567
|
-
this.debugLog('❌ Error preloading
|
|
166
|
+
this.debugLog('❌ Error preloading model:', error);
|
|
568
167
|
this.isLoading = false;
|
|
569
|
-
this.statusMessage = "Error al precargar
|
|
168
|
+
this.statusMessage = "Error al precargar el modelo";
|
|
570
169
|
this.statusColor = "#ff6b6b";
|
|
571
170
|
return { success: false, error: error.message };
|
|
572
171
|
}
|
|
@@ -576,109 +175,6 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
576
175
|
this.completeProcess(true);
|
|
577
176
|
}
|
|
578
177
|
}
|
|
579
|
-
async getCameraInfo() {
|
|
580
|
-
return {
|
|
581
|
-
availableCameras: this.availableCameras.map(camera => ({
|
|
582
|
-
id: camera.deviceId,
|
|
583
|
-
label: camera.label || 'Unknown Camera',
|
|
584
|
-
selected: camera.deviceId === this.selectedCameraId
|
|
585
|
-
})),
|
|
586
|
-
selectedCameraId: this.selectedCameraId,
|
|
587
|
-
deviceType: this.deviceType,
|
|
588
|
-
isMultipleCamerasAvailable: this.isMultipleCamerasAvailable,
|
|
589
|
-
preferredFacing: this.preferredCameraFacing,
|
|
590
|
-
userPreferredCamera: this.preferredCamera
|
|
591
|
-
};
|
|
592
|
-
}
|
|
593
|
-
async setPreferredCamera(camera) {
|
|
594
|
-
this.preferredCamera = camera;
|
|
595
|
-
this.debugLog('🎯 Camera preference changed to:', camera);
|
|
596
|
-
// Re-detect and apply new camera preference
|
|
597
|
-
await this.enumerateAndDetectCameras();
|
|
598
|
-
// If video is active, switch to the new preferred camera
|
|
599
|
-
if (this.isVideoActive && this.selectedCameraId) {
|
|
600
|
-
await this.switchCamera(this.selectedCameraId);
|
|
601
|
-
}
|
|
602
|
-
return {
|
|
603
|
-
success: true,
|
|
604
|
-
selectedCamera: this.selectedCameraId,
|
|
605
|
-
availableCameras: this.availableCameras.length
|
|
606
|
-
};
|
|
607
|
-
}
|
|
608
|
-
async loadMobileNetModel() {
|
|
609
|
-
try {
|
|
610
|
-
this.debugLog('🤖 Loading MobileNet model...');
|
|
611
|
-
// Load class map
|
|
612
|
-
const classResponse = await fetch(this.MOBILENET_CLASSES_PATH);
|
|
613
|
-
if (!classResponse.ok) {
|
|
614
|
-
throw new Error(`Failed to load class map: ${this.MOBILENET_CLASSES_PATH}`);
|
|
615
|
-
}
|
|
616
|
-
this.mobileNetClassMap = await classResponse.json();
|
|
617
|
-
this.debugLog('📋 MobileNet classes loaded:', this.mobileNetClassMap);
|
|
618
|
-
// Load model
|
|
619
|
-
const sessionOptions = this.getSessionOptions();
|
|
620
|
-
this.mobileNetSession = await window.ort.InferenceSession.create(this.MOBILENET_MODEL_PATH, sessionOptions);
|
|
621
|
-
this.debugLog('✅ MobileNet model loaded successfully');
|
|
622
|
-
}
|
|
623
|
-
catch (error) {
|
|
624
|
-
this.debugLog('❌ Error loading MobileNet model:', error);
|
|
625
|
-
throw error;
|
|
626
|
-
}
|
|
627
|
-
}
|
|
628
|
-
preprocessMobileNet(canvas) {
|
|
629
|
-
// Create a temporary canvas for MobileNet preprocessing (224x224)
|
|
630
|
-
const tempCanvas = document.createElement('canvas');
|
|
631
|
-
tempCanvas.width = 224;
|
|
632
|
-
tempCanvas.height = 224;
|
|
633
|
-
const tempCtx = tempCanvas.getContext('2d');
|
|
634
|
-
// Draw the cropped image onto the 224x224 canvas
|
|
635
|
-
tempCtx.drawImage(canvas, 0, 0, 224, 224);
|
|
636
|
-
// Get image data and preprocess for MobileNet
|
|
637
|
-
const imageData = tempCtx.getImageData(0, 0, 224, 224);
|
|
638
|
-
const data = imageData.data;
|
|
639
|
-
const hw = 224 * 224;
|
|
640
|
-
const arr = new Float32Array(3 * hw);
|
|
641
|
-
// Normalize pixels: (pixel/255 - 0.5) / 0.5 = (pixel - 127.5) / 127.5
|
|
642
|
-
for (let i = 0; i < hw; i++) {
|
|
643
|
-
arr[i] = (data[i * 4 + 0] / 255 - 0.5) / 0.5; // R
|
|
644
|
-
arr[hw + i] = (data[i * 4 + 1] / 255 - 0.5) / 0.5; // G
|
|
645
|
-
arr[2 * hw + i] = (data[i * 4 + 2] / 255 - 0.5) / 0.5; // B
|
|
646
|
-
}
|
|
647
|
-
return new window.ort.Tensor('float32', arr, [1, 3, 224, 224]);
|
|
648
|
-
}
|
|
649
|
-
async classifyDocument(canvas) {
|
|
650
|
-
if (!this.mobileNetSession || !this.mobileNetClassMap) {
|
|
651
|
-
this.debugLog('⚠️ MobileNet model not loaded');
|
|
652
|
-
return null;
|
|
653
|
-
}
|
|
654
|
-
try {
|
|
655
|
-
this.debugLog('🔍 Classifying document...');
|
|
656
|
-
// Preprocess image for MobileNet
|
|
657
|
-
const inputTensor = this.preprocessMobileNet(canvas);
|
|
658
|
-
// Run inference
|
|
659
|
-
const feeds = { input: inputTensor };
|
|
660
|
-
const results = await this.mobileNetSession.run(feeds);
|
|
661
|
-
const output = results[Object.keys(results)[0]].data;
|
|
662
|
-
// Find the class with highest confidence
|
|
663
|
-
const maxIdx = output.reduce((bestIdx, val, idx, arr) => val > arr[bestIdx] ? idx : bestIdx, 0);
|
|
664
|
-
const confidence = output[maxIdx];
|
|
665
|
-
const className = this.mobileNetClassMap[maxIdx.toString()] || "unknown";
|
|
666
|
-
this.debugLog('📄 Document classification result:', {
|
|
667
|
-
class: className,
|
|
668
|
-
confidence: confidence.toFixed(3),
|
|
669
|
-
classIndex: maxIdx
|
|
670
|
-
});
|
|
671
|
-
return {
|
|
672
|
-
class: className,
|
|
673
|
-
confidence: confidence,
|
|
674
|
-
classIndex: maxIdx
|
|
675
|
-
};
|
|
676
|
-
}
|
|
677
|
-
catch (error) {
|
|
678
|
-
this.debugLog('❌ Error classifying document:', error);
|
|
679
|
-
return null;
|
|
680
|
-
}
|
|
681
|
-
}
|
|
682
178
|
cleanup() {
|
|
683
179
|
if (this.animationId) {
|
|
684
180
|
cancelAnimationFrame(this.animationId);
|
|
@@ -706,102 +202,22 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
706
202
|
this.captureCtx = undefined;
|
|
707
203
|
this.captureCanvas = undefined;
|
|
708
204
|
}
|
|
709
|
-
// Disposed ONNX
|
|
205
|
+
// Disposed ONNX session
|
|
710
206
|
if (this.session) {
|
|
711
207
|
this.session.release?.();
|
|
712
208
|
this.session = undefined;
|
|
713
209
|
}
|
|
714
|
-
if (this.mobileNetSession) {
|
|
715
|
-
this.mobileNetSession.release?.();
|
|
716
|
-
this.mobileNetSession = undefined;
|
|
717
|
-
}
|
|
718
|
-
this.mobileNetClassMap = undefined;
|
|
719
210
|
this.isModelPreloaded = false;
|
|
720
211
|
this.debugLog('🧹 Canvas pool cleaned up');
|
|
721
212
|
}
|
|
722
|
-
async getMaxResolution() {
|
|
723
|
-
try {
|
|
724
|
-
// Build constraints with selected camera if available
|
|
725
|
-
const videoConstraints = {};
|
|
726
|
-
if (this.selectedCameraId) {
|
|
727
|
-
videoConstraints.deviceId = { exact: this.selectedCameraId };
|
|
728
|
-
}
|
|
729
|
-
else if (this.preferredCameraFacing) {
|
|
730
|
-
videoConstraints.facingMode = this.preferredCameraFacing;
|
|
731
|
-
}
|
|
732
|
-
else {
|
|
733
|
-
videoConstraints.facingMode = "environment";
|
|
734
|
-
}
|
|
735
|
-
// Get temporary stream to access capabilities
|
|
736
|
-
const tempStream = await navigator.mediaDevices.getUserMedia({
|
|
737
|
-
video: videoConstraints
|
|
738
|
-
});
|
|
739
|
-
const videoTrack = tempStream.getVideoTracks()[0];
|
|
740
|
-
const capabilities = videoTrack.getCapabilities();
|
|
741
|
-
// Detener el stream temporal
|
|
742
|
-
tempStream.getTracks().forEach(track => track.stop());
|
|
743
|
-
// Build constraints with resolution optimized for tablets
|
|
744
|
-
const constraints = {};
|
|
745
|
-
// Set camera selection constraints
|
|
746
|
-
if (this.selectedCameraId) {
|
|
747
|
-
constraints.deviceId = { exact: this.selectedCameraId };
|
|
748
|
-
}
|
|
749
|
-
else if (this.preferredCameraFacing) {
|
|
750
|
-
constraints.facingMode = this.preferredCameraFacing;
|
|
751
|
-
}
|
|
752
|
-
else {
|
|
753
|
-
constraints.facingMode = "environment";
|
|
754
|
-
}
|
|
755
|
-
if (capabilities.width && capabilities.height) {
|
|
756
|
-
// Limitar resolución máxima para tablets para evitar problemas de rendimiento
|
|
757
|
-
const maxWidth = Math.min(capabilities.width.max, 1920);
|
|
758
|
-
const maxHeight = Math.min(capabilities.height.max, 1080);
|
|
759
|
-
// Para tablets, usar resolución moderada en lugar de máxima
|
|
760
|
-
const isTablet = /iPad|Android/i.test(navigator.userAgent) && window.innerWidth >= 768;
|
|
761
|
-
if (isTablet) {
|
|
762
|
-
constraints.width = { ideal: Math.min(maxWidth, 1280) };
|
|
763
|
-
constraints.height = { ideal: Math.min(maxHeight, 720) };
|
|
764
|
-
}
|
|
765
|
-
else {
|
|
766
|
-
constraints.width = { ideal: maxWidth };
|
|
767
|
-
constraints.height = { ideal: maxHeight };
|
|
768
|
-
}
|
|
769
|
-
this.debugLog('📐 Resolution capabilities:', {
|
|
770
|
-
maxWidth: capabilities.width.max,
|
|
771
|
-
maxHeight: capabilities.height.max,
|
|
772
|
-
selectedWidth: constraints.width.ideal,
|
|
773
|
-
selectedHeight: constraints.height.ideal,
|
|
774
|
-
isTablet
|
|
775
|
-
});
|
|
776
|
-
}
|
|
777
|
-
return constraints;
|
|
778
|
-
}
|
|
779
|
-
catch (err) {
|
|
780
|
-
this.debugLog('⚠️ Could not get capabilities, using fallback');
|
|
781
|
-
// Optimized fallback for tablets
|
|
782
|
-
const isTablet = /iPad|Android/i.test(navigator.userAgent) && window.innerWidth >= 768;
|
|
783
|
-
const fallbackConstraints = {
|
|
784
|
-
width: { ideal: isTablet ? 1280 : 1920 },
|
|
785
|
-
height: { ideal: isTablet ? 720 : 1080 }
|
|
786
|
-
};
|
|
787
|
-
// Add camera selection to fallback
|
|
788
|
-
if (this.selectedCameraId) {
|
|
789
|
-
fallbackConstraints.deviceId = { exact: this.selectedCameraId };
|
|
790
|
-
}
|
|
791
|
-
else if (this.preferredCameraFacing) {
|
|
792
|
-
fallbackConstraints.facingMode = this.preferredCameraFacing;
|
|
793
|
-
}
|
|
794
|
-
else {
|
|
795
|
-
fallbackConstraints.facingMode = "environment";
|
|
796
|
-
}
|
|
797
|
-
return fallbackConstraints;
|
|
798
|
-
}
|
|
799
|
-
}
|
|
800
213
|
async setupCamera() {
|
|
801
214
|
try {
|
|
802
|
-
const constraints = await this.getMaxResolution();
|
|
803
215
|
const stream = await navigator.mediaDevices.getUserMedia({
|
|
804
|
-
video:
|
|
216
|
+
video: {
|
|
217
|
+
width: { exact: 640 },
|
|
218
|
+
height: { exact: 640 },
|
|
219
|
+
facingMode: "environment"
|
|
220
|
+
},
|
|
805
221
|
audio: false
|
|
806
222
|
});
|
|
807
223
|
if (this.videoRef) {
|
|
@@ -816,12 +232,6 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
816
232
|
this.videoRef.onloadedmetadata = async () => {
|
|
817
233
|
await this.videoRef.play();
|
|
818
234
|
this.isVideoActive = true;
|
|
819
|
-
// Update mask dimensions once video is loaded
|
|
820
|
-
if (this.canvasRef) {
|
|
821
|
-
const container = this.canvasRef.parentElement;
|
|
822
|
-
const rect = container.getBoundingClientRect();
|
|
823
|
-
this.updateMaskDimensions(rect);
|
|
824
|
-
}
|
|
825
235
|
resolve();
|
|
826
236
|
};
|
|
827
237
|
});
|
|
@@ -829,7 +239,8 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
829
239
|
}
|
|
830
240
|
catch (err) {
|
|
831
241
|
this.debugLog("❌ No se pudo acceder a la cámara:", err);
|
|
832
|
-
this.
|
|
242
|
+
this.statusMessage = "Error: No se pudo acceder a la cámara.";
|
|
243
|
+
this.statusColor = "#ff6b6b";
|
|
833
244
|
}
|
|
834
245
|
}
|
|
835
246
|
preprocess(video) {
|
|
@@ -874,22 +285,17 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
874
285
|
// Check if model is already preloaded
|
|
875
286
|
if (!this.session) {
|
|
876
287
|
this.isLoading = true;
|
|
877
|
-
this.statusMessage = "Cargando
|
|
288
|
+
this.statusMessage = "Cargando modelo de detección...";
|
|
878
289
|
this.statusColor = "#007bff";
|
|
879
290
|
const modelPath = this.MODEL_PATH;
|
|
880
|
-
this.debugLog('🤖 Loading
|
|
291
|
+
this.debugLog('🤖 Loading model:', modelPath);
|
|
881
292
|
const sessionOptions = this.getSessionOptions();
|
|
882
293
|
this.session = await window.ort.InferenceSession.create(modelPath, sessionOptions);
|
|
883
|
-
// Load MobileNet model if classification is enabled and not already loaded
|
|
884
|
-
if (this.useDocumentClassification && !this.mobileNetSession) {
|
|
885
|
-
await this.loadMobileNetModel();
|
|
886
|
-
}
|
|
887
294
|
this.isModelPreloaded = true;
|
|
888
|
-
this.emitReadyEvent();
|
|
889
295
|
}
|
|
890
296
|
else {
|
|
891
|
-
this.debugLog('🚀 Using preloaded
|
|
892
|
-
this.statusMessage = "Usando
|
|
297
|
+
this.debugLog('🚀 Using preloaded model');
|
|
298
|
+
this.statusMessage = "Usando modelo precargado...";
|
|
893
299
|
this.statusColor = "#007bff";
|
|
894
300
|
}
|
|
895
301
|
this.statusMessage = "Configurando cámara...";
|
|
@@ -1002,58 +408,13 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
1002
408
|
return isCentered && isGoodSize;
|
|
1003
409
|
}
|
|
1004
410
|
checkSideAlignment(box) {
|
|
1005
|
-
|
|
1006
|
-
return { top: false, right: false, bottom: false, left: false };
|
|
1007
|
-
// Get video dimensions to calculate actual mask boundaries in model space
|
|
1008
|
-
const videoWidth = this.videoRef.videoWidth;
|
|
1009
|
-
const videoHeight = this.videoRef.videoHeight;
|
|
1010
|
-
if (videoWidth === 0 || videoHeight === 0) {
|
|
1011
|
-
return { top: false, right: false, bottom: false, left: false };
|
|
1012
|
-
}
|
|
1013
|
-
// Calculate video aspect ratio
|
|
1014
|
-
const videoAspectRatio = videoWidth / videoHeight;
|
|
1015
|
-
// The model sees video stretched to 320x320, but we need to calculate where
|
|
1016
|
-
// the mask should be in this distorted space to match the visual mask
|
|
1017
|
-
// In the visual display, we calculate mask size based on the limiting dimension
|
|
1018
|
-
// We need to replicate this logic but account for the distortion in model space
|
|
1019
|
-
// Calculate the "display" dimensions (what the visual mask calculations use)
|
|
1020
|
-
const containerAspectRatio = 1; // Assume square container for simplicity
|
|
1021
|
-
let displayedVideoWidth, displayedVideoHeight;
|
|
1022
|
-
if (videoAspectRatio > containerAspectRatio) {
|
|
1023
|
-
// Video is wider - letterboxed in display
|
|
1024
|
-
displayedVideoWidth = this.INPUT_SIZE;
|
|
1025
|
-
displayedVideoHeight = this.INPUT_SIZE / videoAspectRatio;
|
|
1026
|
-
}
|
|
1027
|
-
else {
|
|
1028
|
-
// Video is taller - pillarboxed in display
|
|
1029
|
-
displayedVideoHeight = this.INPUT_SIZE;
|
|
1030
|
-
displayedVideoWidth = this.INPUT_SIZE * videoAspectRatio;
|
|
1031
|
-
}
|
|
1032
|
-
// Calculate mask dimensions using the same logic as updateMaskDimensions
|
|
1033
|
-
const maxWidthByHeight = displayedVideoHeight * this.ID1_ASPECT_RATIO;
|
|
1034
|
-
let visualMaskWidth, visualMaskHeight;
|
|
1035
|
-
const sizeRatio = this.maskSize / 100;
|
|
1036
|
-
if (maxWidthByHeight <= displayedVideoWidth) {
|
|
1037
|
-
// Video height is the limiting factor
|
|
1038
|
-
visualMaskHeight = displayedVideoHeight * sizeRatio;
|
|
1039
|
-
visualMaskWidth = visualMaskHeight * this.ID1_ASPECT_RATIO;
|
|
1040
|
-
}
|
|
1041
|
-
else {
|
|
1042
|
-
// Video width is the limiting factor
|
|
1043
|
-
visualMaskWidth = displayedVideoWidth * sizeRatio;
|
|
1044
|
-
visualMaskHeight = visualMaskWidth / this.ID1_ASPECT_RATIO;
|
|
1045
|
-
}
|
|
1046
|
-
// Now map these visual mask dimensions to the distorted model space
|
|
1047
|
-
// The model stretches video to 320x320, so we need to apply the inverse transformation
|
|
1048
|
-
const modelMaskWidth = visualMaskWidth * (this.INPUT_SIZE / displayedVideoWidth);
|
|
1049
|
-
const modelMaskHeight = visualMaskHeight * (this.INPUT_SIZE / displayedVideoHeight);
|
|
1050
|
-
// Calculate mask boundaries in model coordinate system (always centered in 320x320)
|
|
411
|
+
// Obtener las coordenadas del marco de referencia (máscara)
|
|
1051
412
|
const maskCenterX = this.INPUT_SIZE / 2;
|
|
1052
413
|
const maskCenterY = this.INPUT_SIZE / 2;
|
|
1053
|
-
const maskLeft = maskCenterX - (
|
|
1054
|
-
const maskRight = maskCenterX + (
|
|
1055
|
-
const maskTop = maskCenterY - (
|
|
1056
|
-
const maskBottom = maskCenterY + (
|
|
414
|
+
const maskLeft = maskCenterX - (this.MASK_WIDTH / 2);
|
|
415
|
+
const maskRight = maskCenterX + (this.MASK_WIDTH / 2);
|
|
416
|
+
const maskTop = maskCenterY - (this.MASK_HEIGHT / 2);
|
|
417
|
+
const maskBottom = maskCenterY + (this.MASK_HEIGHT / 2);
|
|
1057
418
|
// Obtener las coordenadas del documento detectado
|
|
1058
419
|
let docLeft = box.x;
|
|
1059
420
|
let docRight = box.x + box.w;
|
|
@@ -1108,9 +469,7 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
1108
469
|
corners?.forEach(corner => corner.classList.add('perfect-match'));
|
|
1109
470
|
if (!this.hasScreenshotTaken) {
|
|
1110
471
|
this.lastDetectedBox = bestBox;
|
|
1111
|
-
this.takeScreenshot()
|
|
1112
|
-
this.debugLog('❌ Error taking screenshot:', error);
|
|
1113
|
-
});
|
|
472
|
+
this.takeScreenshot();
|
|
1114
473
|
this.hasScreenshotTaken = true;
|
|
1115
474
|
// Reset para permitir segunda captura
|
|
1116
475
|
setTimeout(() => {
|
|
@@ -1152,48 +511,15 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
1152
511
|
}
|
|
1153
512
|
}
|
|
1154
513
|
drawDetections(ctx, boxes) {
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
// Get video and container dimensions
|
|
1158
|
-
const videoWidth = this.videoRef.videoWidth;
|
|
1159
|
-
const videoHeight = this.videoRef.videoHeight;
|
|
1160
|
-
const containerWidth = this.canvasRef.width;
|
|
1161
|
-
const containerHeight = this.canvasRef.height;
|
|
1162
|
-
if (videoWidth === 0 || videoHeight === 0)
|
|
1163
|
-
return;
|
|
1164
|
-
// Calculate video aspect ratio and container aspect ratio
|
|
1165
|
-
const videoAspectRatio = videoWidth / videoHeight;
|
|
1166
|
-
const containerAspectRatio = containerWidth / containerHeight;
|
|
1167
|
-
// Determine how video fits in container (same logic as updateMaskDimensions)
|
|
1168
|
-
let displayedVideoWidth, displayedVideoHeight;
|
|
1169
|
-
let videoOffsetX = 0, videoOffsetY = 0;
|
|
1170
|
-
if (videoAspectRatio > containerAspectRatio) {
|
|
1171
|
-
// Video is wider - letterboxed (black bars top/bottom)
|
|
1172
|
-
displayedVideoWidth = containerWidth;
|
|
1173
|
-
displayedVideoHeight = containerWidth / videoAspectRatio;
|
|
1174
|
-
videoOffsetY = (containerHeight - displayedVideoHeight) / 2;
|
|
1175
|
-
}
|
|
1176
|
-
else {
|
|
1177
|
-
// Video is taller - pillarboxed (black bars left/right)
|
|
1178
|
-
displayedVideoHeight = containerHeight;
|
|
1179
|
-
displayedVideoWidth = containerHeight * videoAspectRatio;
|
|
1180
|
-
videoOffsetX = (containerWidth - displayedVideoWidth) / 2;
|
|
1181
|
-
}
|
|
1182
|
-
// Scale factor from model coordinates (320x320) to displayed video area
|
|
1183
|
-
const scaleX = displayedVideoWidth / this.INPUT_SIZE;
|
|
1184
|
-
const scaleY = displayedVideoHeight / this.INPUT_SIZE;
|
|
514
|
+
// Scale factor to convert from model coordinates (320x320) to canvas coordinates (640x640)
|
|
515
|
+
const scale = this.canvasRef.width / this.INPUT_SIZE;
|
|
1185
516
|
boxes.forEach(det => {
|
|
1186
|
-
// Convert model coordinates to displayed video coordinates
|
|
1187
|
-
const x = det.x * scaleX + videoOffsetX;
|
|
1188
|
-
const y = det.y * scaleY + videoOffsetY;
|
|
1189
|
-
const w = det.w * scaleX;
|
|
1190
|
-
const h = det.h * scaleY;
|
|
1191
517
|
ctx.strokeStyle = "#32406C";
|
|
1192
518
|
ctx.lineWidth = 2;
|
|
1193
|
-
ctx.strokeRect(x, y, w, h);
|
|
519
|
+
ctx.strokeRect(det.x * scale, det.y * scale, det.w * scale, det.h * scale);
|
|
1194
520
|
});
|
|
1195
521
|
}
|
|
1196
|
-
|
|
522
|
+
takeScreenshot() {
|
|
1197
523
|
if (!this.videoRef || !this.lastDetectedBox)
|
|
1198
524
|
return;
|
|
1199
525
|
// Activar animación
|
|
@@ -1209,10 +535,10 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
1209
535
|
// Calcular las coordenadas de recorte basadas en la detección
|
|
1210
536
|
const scaleX = this.videoRef.videoWidth / this.INPUT_SIZE;
|
|
1211
537
|
const scaleY = this.videoRef.videoHeight / this.INPUT_SIZE;
|
|
1212
|
-
const cropX = Math.max(0,
|
|
1213
|
-
const cropY = Math.max(0,
|
|
1214
|
-
const cropWidth = Math.min(
|
|
1215
|
-
const cropHeight = Math.min(
|
|
538
|
+
const cropX = Math.max(0, this.lastDetectedBox.x * scaleX);
|
|
539
|
+
const cropY = Math.max(0, this.lastDetectedBox.y * scaleY);
|
|
540
|
+
const cropWidth = Math.min(this.lastDetectedBox.w * scaleX, this.videoRef.videoWidth - cropX);
|
|
541
|
+
const cropHeight = Math.min(this.lastDetectedBox.h * scaleY, this.videoRef.videoHeight - cropY);
|
|
1216
542
|
// OPTIMIZATION: Create temporary canvas only for cropped version
|
|
1217
543
|
// (We reuse main capture canvas for full frame)
|
|
1218
544
|
const croppedCanvas = document.createElement('canvas');
|
|
@@ -1227,29 +553,6 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
1227
553
|
// Captura del frente usando canvas reutilizado
|
|
1228
554
|
this.capturedFullFrame = this.captureCanvas.toDataURL('image/png');
|
|
1229
555
|
this.capturedCroppedId = croppedCanvas.toDataURL('image/png');
|
|
1230
|
-
// Check if document classification is enabled
|
|
1231
|
-
if (this.useDocumentClassification) {
|
|
1232
|
-
// Load MobileNet model if not loaded yet (lazy loading)
|
|
1233
|
-
if (!this.mobileNetSession) {
|
|
1234
|
-
try {
|
|
1235
|
-
await this.loadMobileNetModel();
|
|
1236
|
-
}
|
|
1237
|
-
catch (error) {
|
|
1238
|
-
this.debugLog('⚠️ Failed to load classification model, continuing without classification:', error);
|
|
1239
|
-
}
|
|
1240
|
-
}
|
|
1241
|
-
// Classify the cropped document if model is available
|
|
1242
|
-
if (this.mobileNetSession) {
|
|
1243
|
-
const classification = await this.classifyDocument(croppedCanvas);
|
|
1244
|
-
if (classification && classification.class === 'passport') {
|
|
1245
|
-
// If it's a passport, skip back capture since passports don't have a back side
|
|
1246
|
-
this.debugLog('📄 Passport detected - skipping back capture');
|
|
1247
|
-
this.completeProcess(true);
|
|
1248
|
-
return;
|
|
1249
|
-
}
|
|
1250
|
-
}
|
|
1251
|
-
}
|
|
1252
|
-
// For other IDs, continue with normal flow (back capture)
|
|
1253
556
|
this.captureStep = 'back';
|
|
1254
557
|
this.statusMessage = "Voltee la identificación y muestre la parte trasera";
|
|
1255
558
|
this.statusColor = "#007bff";
|
|
@@ -1379,29 +682,12 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
1379
682
|
this.cleanup();
|
|
1380
683
|
}
|
|
1381
684
|
render() {
|
|
1382
|
-
return (h("div", { key: '
|
|
1383
|
-
position: 'absolute',
|
|
1384
|
-
top: '50px',
|
|
1385
|
-
right: '0',
|
|
1386
|
-
background: 'rgba(0,0,0,0.8)',
|
|
1387
|
-
color: 'white',
|
|
1388
|
-
padding: '8px',
|
|
1389
|
-
fontSize: '10px',
|
|
1390
|
-
borderRadius: '4px',
|
|
1391
|
-
whiteSpace: 'nowrap'
|
|
1392
|
-
} }, "C\u00E1maras: ", this.availableCameras.length, h("br", { key: '8f112283d1e0518a395dc6d94e1caa46fee0a86b' }), "M\u00FAltiples: ", this.isMultipleCamerasAvailable ? 'Sí' : 'No', h("br", { key: 'aacfd3ee868ee5d0819ce5ef693e3ef384867332' }), "Selector: ", this.showCameraSelector ? 'Visible' : 'Oculto', h("br", { key: '9927df7f56583c7388cee25e13526efc7e032eb1' }), "Video: ", this.isVideoActive ? 'Activo' : 'Inactivo')))), this.showCameraSelector && this.availableCameras.length > 0 && (h("div", { key: 'c2914bf7f3175b8f0ddab977abbdefe3022d7d29', class: "camera-selector-dropdown" }, h("div", { key: '0b5397e77ff33944f3620d78b1ab41275dffd7ac', class: "camera-selector-header" }, h("span", { key: '78f0fb8e34a0cf2d16138522a98cbdb9eefd671f' }, "Seleccionar C\u00E1mara"), h("button", { key: '0d4ea7b191d61d1d9b9c35462ce336148be73fcb', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: 'c16c7a106493ef7633a4cd35b06a4f45327a2e23', class: "camera-list" }, this.availableCameras.map((camera) => (h("button", { key: camera.deviceId, class: `camera-option ${this.selectedCameraId === camera.deviceId ? 'selected' : ''}`, onClick: () => {
|
|
1393
|
-
this.switchCamera(camera.deviceId);
|
|
1394
|
-
this.toggleCameraSelector();
|
|
1395
|
-
}, 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: '11d6f980c3995a8414da5f7e6921f963ca72aed4', class: "device-info" }, h("small", { key: '78f5ff030f9e6e5021234a246599eb459b05d9f7' }, "Dispositivo: ", this.deviceType)))))), this.isCapturing && (h("div", { key: 'ef7d32491d8bdb94b2d6456420c2ddbc80f03d81', class: "capture-animation" })), this.showFlipAnimation && (h("div", { key: 'cfb5868ee75a9d1d1604c52f6fce1241090e4ac2', class: "flip-animation" }, h("div", { key: '1b41035e63f88434aba6699d4e68e06bea2c1529', class: "id-card-icon" }), h("div", { key: '4e83af9d0d39ce37b7448c4a0783b60b42b858e2', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (h("div", { key: 'c7911e8be74b0fc7d7d18d7dcb52374645ca5f12', class: "success-animation" }, h("div", { key: '18e5ea5cfa3eb35fe3b99c12e6fab8e27e09e85e', class: "check-icon" }), h("div", { key: '490d8fcd6540c3b4fdc95f7fb5e6f6697722c9ac', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (h("div", { key: 'f7fbfec6be2d8e0dc4e522b85b7d67897575cf0e', class: "loading-overlay" }, h("div", { key: '8282b92f19da6a9c7d22a64a0929b2b4d67c46be', class: "loading-spinner" }), h("div", { key: '7880b689297eb9d80a9b0023ba7933148fd8710a', class: "loading-text" }, this.statusMessage))), h("div", { key: '887c951fb03097171d9bd466fe24e36d11a49954', class: "watermark" }, h("img", { key: '314c9c172a4c6795c825741ea6f02b0e1186e93d', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
|
|
685
|
+
return (h("div", { key: 'a1036d3867a4f5c40a942e47a30992a6c56e5240', class: "detector-container" }, h("div", { key: 'dada4edb4cc690e4e73d616e8eb22fa8fb6b2817', class: "video-container" }, h("video", { key: '16b43f5efdd0c32dbfab49a86e6904baabfdc220', ref: el => this.videoRef = el, width: "640", height: "640", autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: this.isVideoActive ? 'block' : 'none' } }), h("canvas", { key: 'e89cf0292df3bef51d9e9ed650b4f68493506314', ref: el => this.canvasRef = el, width: "640", height: "640", class: this.shouldMirrorVideo ? 'mirror' : '' }), h("div", { key: '3740295495466519be1b4b95891dd06d8272a7d6', class: "overlay-mask" }, h("div", { key: 'ac61b03420ae83d06ec8e5095a11665a8b5a4cd1', class: "card-outline" }, h("div", { key: '7190506e4803ccde1f6c95e6238b05271e7e01a5', class: "side side-top" }), h("div", { key: 'e383f023305021cdd5a02ccaf6a2bb2c775b28be', class: "side side-right" }), h("div", { key: '733f572b80c5f0050c21aa4cf5efd5b499859c23', class: "side side-bottom" }), h("div", { key: 'dbf175597a0d0790b9cc54f737693e418f1500f2', class: "side side-left" }), h("div", { key: '657375f468fc83444e6157c5308fca7237e85f22', class: "corner corner-tl" }), h("div", { key: '0491bf2ed49322cba5220a82016bb9a77c102386', class: "corner corner-tr" }), h("div", { key: 'eb7d153a47dfb1f0c98229752aabfe71181d6c3b', class: "corner corner-bl" }), h("div", { key: '7d57726a70864f9c2590395f6dc89918558fbc87', class: "corner corner-br" }), !this.showFlipAnimation && !this.showSuccessAnimation && (h("div", { key: '8deff6975766142bae69fb7596f0097b1319bc5f', class: "guide-text" }, this.statusMessage))), this.captureStep === 'back' && !this.showFlipAnimation && !this.showSuccessAnimation && (h("button", { key: '471fae3b2c48302d474a7e7186cbe21e1260288f', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso"))), this.isCapturing && (h("div", { key: '83fa0133b072f982c9d861632525a64068271833', class: "capture-animation" })), this.showFlipAnimation && (h("div", { key: '0cdcabf20a263067a3fb120ec112a7c688eaece1', class: "flip-animation" }, h("div", { key: 'c7fd5c4211aa67cdc37be882617120cfb3afcfad', class: "id-card-icon" }), h("div", { key: '1c8e889d1de4867887fc25ac221b780154da59dd', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), this.showSuccessAnimation && (h("div", { key: '7fcf315cb26c2c860d06dcdb7da6f58524ef4474', class: "success-animation" }, h("div", { key: '5ea1a6aa4368cd154189db166af531abe2e0029e', class: "check-icon" }), h("div", { key: 'deb064b437a664ea5dfdb9b3883ee83bc85b939e', class: "success-text" }, "\u00A1Proceso completado!"))), this.isLoading && (h("div", { key: '7a28906555b0e5b891e1f8516a318ec540a83320', class: "loading-overlay" }, h("div", { key: '6f0778d156648405dd385f95c5e9bad0c4112eda', class: "loading-spinner" }), h("div", { key: 'b1cd4ddee0e282e8353bf8ed298fbd1c8498fb5e', class: "loading-text" }, this.statusMessage))), h("div", { key: '1e74b90a10ef2e2e71505160accb0ea83672c5de', class: "watermark" }, h("img", { key: '352fee0189ac25f59724e69e317b28859c86476e', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
|
|
1396
686
|
}
|
|
1397
687
|
static get style() { return myComponentCss; }
|
|
1398
688
|
}, [1, "jaak-stamps", {
|
|
1399
689
|
"debug": [4],
|
|
1400
690
|
"alignmentTolerance": [2, "alignment-tolerance"],
|
|
1401
|
-
"maskSize": [2, "mask-size"],
|
|
1402
|
-
"cropMargin": [2, "crop-margin"],
|
|
1403
|
-
"useDocumentClassification": [4, "use-document-classification"],
|
|
1404
|
-
"preferredCamera": [1, "preferred-camera"],
|
|
1405
691
|
"isVideoActive": [32],
|
|
1406
692
|
"statusMessage": [32],
|
|
1407
693
|
"statusColor": [32],
|
|
@@ -1419,11 +705,6 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
1419
705
|
"isDetectionPaused": [32],
|
|
1420
706
|
"isLoading": [32],
|
|
1421
707
|
"isModelPreloaded": [32],
|
|
1422
|
-
"isMaskReady": [32],
|
|
1423
|
-
"availableCameras": [32],
|
|
1424
|
-
"selectedCameraId": [32],
|
|
1425
|
-
"showCameraSelector": [32],
|
|
1426
|
-
"isMultipleCamerasAvailable": [32],
|
|
1427
708
|
"getCapturedImages": [64],
|
|
1428
709
|
"isProcessCompleted": [64],
|
|
1429
710
|
"startCapture": [64],
|
|
@@ -1431,9 +712,7 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
|
|
|
1431
712
|
"resetCapture": [64],
|
|
1432
713
|
"getStatus": [64],
|
|
1433
714
|
"preloadModel": [64],
|
|
1434
|
-
"skipBackCapture": [64]
|
|
1435
|
-
"getCameraInfo": [64],
|
|
1436
|
-
"setPreferredCamera": [64]
|
|
715
|
+
"skipBackCapture": [64]
|
|
1437
716
|
}]);
|
|
1438
717
|
function defineCustomElement$1() {
|
|
1439
718
|
if (typeof customElements === "undefined") {
|