@jaak.ai/stamps 1.0.0-dev.7 → 1.0.0-dev.9
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 +327 -240
- package/dist/cjs/document-detector_19.cjs.entry.js +15 -3
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/stamps.cjs.js +1 -1
- package/dist/collection/components/document-detector/document-detector.css +2 -0
- package/dist/collection/components/document-detector/document-detector.js +35 -2
- package/dist/esm/document-detector_19.entry.js +15 -3
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stamps.js +1 -1
- package/dist/stamps/p-f4015454.entry.js +9 -0
- package/dist/stamps/stamps.esm.js +1 -1
- package/dist/types/components/document-detector/document-detector.d.ts +2 -0
- package/dist/types/components.d.ts +1 -0
- package/package.json +3 -3
- package/dist/stamps/p-02990b18.entry.js +0 -9
package/README.md
CHANGED
|
@@ -3,112 +3,83 @@
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
Un componente web potente y personalizable para la identificación de documentos en aplicaciones web modernas. Construido con Stencil.js para un escaneo e identificación de documentos confiable.
|
|
7
|
-
|
|
8
|
-
## Características
|
|
9
|
-
|
|
10
|
-
- Escaneo e identificación de documentos con alta precisión
|
|
11
|
-
- Funciona tanto con cámara como con carga de imágenes
|
|
12
|
-
- Interfaz y comportamiento personalizables
|
|
13
|
-
- Eventos para una integración completa con el flujo de tu aplicación
|
|
14
|
-
- Compatibilidad con múltiples navegadores
|
|
15
|
-
- Paquete ligero
|
|
16
|
-
|
|
17
6
|
## Instalación
|
|
18
7
|
|
|
19
8
|
```bash
|
|
20
9
|
npm install @jaak.ai/stamps
|
|
21
10
|
```
|
|
22
11
|
|
|
23
|
-
## Uso
|
|
24
|
-
|
|
25
|
-
### Integración Básica
|
|
12
|
+
## Uso Básico
|
|
26
13
|
|
|
27
|
-
|
|
14
|
+
### HTML
|
|
28
15
|
|
|
29
16
|
```html
|
|
30
17
|
<!DOCTYPE html>
|
|
31
|
-
<html
|
|
18
|
+
<html>
|
|
32
19
|
<head>
|
|
33
|
-
<meta charset="
|
|
34
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
20
|
+
<meta charset="utf-8">
|
|
35
21
|
<title>Ejemplo de Detector de Documentos</title>
|
|
36
|
-
<script type="module" src="https://
|
|
37
|
-
<script nomodule src="https://
|
|
22
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@jaak.ai/stamps/dist/stamps/stamps.esm.js"></script>
|
|
23
|
+
<script nomodule src="https://cdn.jsdelivr.net/npm/@jaak.ai/stamps/dist/stamps/stamps.js"></script>
|
|
38
24
|
</head>
|
|
39
25
|
<body>
|
|
40
26
|
<document-detector
|
|
41
|
-
license-key="TU_CLAVE_DE_LICENCIA"
|
|
42
|
-
engine-location="https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0"
|
|
43
|
-
worker-location="https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0/BlinkIDWasmSDK.worker.min.js">
|
|
27
|
+
license-key="TU_CLAVE_DE_LICENCIA">
|
|
44
28
|
</document-detector>
|
|
45
29
|
|
|
46
30
|
<script>
|
|
47
31
|
const detector = document.querySelector('document-detector');
|
|
48
|
-
|
|
49
|
-
detector.addEventListener('ready', (ev) => {
|
|
50
|
-
console.log('El detector de documentos está listo');
|
|
51
|
-
});
|
|
52
32
|
|
|
53
|
-
|
|
54
|
-
|
|
33
|
+
// Escuchar los eventos emitidos directamente por el componente
|
|
34
|
+
detector.addEventListener('status', (ev) => {
|
|
35
|
+
console.log('Estado del detector:', ev.detail);
|
|
55
36
|
});
|
|
56
37
|
|
|
57
|
-
detector.addEventListener('
|
|
58
|
-
console.
|
|
38
|
+
detector.addEventListener('results', (ev) => {
|
|
39
|
+
console.log('Resultados del escaneo:', ev.detail);
|
|
59
40
|
});
|
|
60
41
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
42
|
+
// Iniciar el escaneo por cámara cuando el componente esté listo
|
|
43
|
+
setTimeout(() => {
|
|
44
|
+
detector.startCameraScan();
|
|
45
|
+
}, 1000);
|
|
64
46
|
</script>
|
|
65
47
|
</body>
|
|
66
48
|
</html>
|
|
67
49
|
```
|
|
68
50
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
##### React
|
|
51
|
+
### React
|
|
72
52
|
|
|
73
53
|
```jsx
|
|
74
54
|
import React, { useEffect, useRef } from 'react';
|
|
75
|
-
import
|
|
55
|
+
import '@jaak.ai/stamps';
|
|
76
56
|
|
|
77
|
-
|
|
78
|
-
defineCustomElements();
|
|
79
|
-
|
|
80
|
-
function ComponenteEscánerDocumento() {
|
|
57
|
+
function DocumentDetectorComponent() {
|
|
81
58
|
const detectorRef = useRef(null);
|
|
82
59
|
|
|
83
60
|
useEffect(() => {
|
|
84
61
|
const detector = detectorRef.current;
|
|
85
|
-
|
|
86
|
-
const handleReady = (ev) => {
|
|
87
|
-
console.log('El detector de documentos está listo');
|
|
88
|
-
};
|
|
89
62
|
|
|
90
|
-
|
|
91
|
-
|
|
63
|
+
// Escuchar los eventos emitidos directamente por el componente
|
|
64
|
+
const handleStatus = (ev) => {
|
|
65
|
+
console.log('Estado del detector:', ev.detail);
|
|
92
66
|
};
|
|
93
67
|
|
|
94
|
-
const
|
|
95
|
-
console.
|
|
68
|
+
const handleResults = (ev) => {
|
|
69
|
+
console.log('Resultados del escaneo:', ev.detail);
|
|
96
70
|
};
|
|
97
71
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
};
|
|
72
|
+
detector.addEventListener('status', handleStatus);
|
|
73
|
+
detector.addEventListener('results', handleResults);
|
|
101
74
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
75
|
+
// Iniciar el escaneo por cámara cuando el componente esté listo
|
|
76
|
+
setTimeout(() => {
|
|
77
|
+
detector.startCameraScan();
|
|
78
|
+
}, 1000);
|
|
106
79
|
|
|
107
80
|
return () => {
|
|
108
|
-
detector.removeEventListener('
|
|
109
|
-
detector.removeEventListener('
|
|
110
|
-
detector.removeEventListener('scanError', handleScanError);
|
|
111
|
-
detector.removeEventListener('fatalError', handleFatalError);
|
|
81
|
+
detector.removeEventListener('status', handleStatus);
|
|
82
|
+
detector.removeEventListener('results', handleResults);
|
|
112
83
|
};
|
|
113
84
|
}, []);
|
|
114
85
|
|
|
@@ -116,270 +87,386 @@ function ComponenteEscánerDocumento() {
|
|
|
116
87
|
<document-detector
|
|
117
88
|
ref={detectorRef}
|
|
118
89
|
license-key="TU_CLAVE_DE_LICENCIA"
|
|
119
|
-
|
|
120
|
-
worker-location="https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0/BlinkIDWasmSDK.worker.min.js">
|
|
121
|
-
</document-detector>
|
|
90
|
+
/>
|
|
122
91
|
);
|
|
123
92
|
}
|
|
124
93
|
|
|
125
|
-
export default
|
|
94
|
+
export default DocumentDetectorComponent;
|
|
126
95
|
```
|
|
127
96
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
```javascript
|
|
131
|
-
// main.js
|
|
132
|
-
import { defineCustomElements } from '@jaak.ai/stamps/loader';
|
|
133
|
-
|
|
134
|
-
// Registrar los componentes web
|
|
135
|
-
defineCustomElements();
|
|
136
|
-
```
|
|
97
|
+
### Vue.js
|
|
137
98
|
|
|
138
99
|
```vue
|
|
139
|
-
<!-- EscánerDocumento.vue -->
|
|
140
100
|
<template>
|
|
141
101
|
<document-detector
|
|
142
102
|
ref="detector"
|
|
143
103
|
:license-key="licenseKey"
|
|
144
|
-
|
|
145
|
-
:worker-location="workerLocation">
|
|
146
|
-
</document-detector>
|
|
104
|
+
/>
|
|
147
105
|
</template>
|
|
148
106
|
|
|
149
107
|
<script>
|
|
108
|
+
import '@jaak.ai/stamps';
|
|
109
|
+
|
|
150
110
|
export default {
|
|
151
|
-
name: '
|
|
111
|
+
name: 'DocumentDetectorComponent',
|
|
152
112
|
data() {
|
|
153
113
|
return {
|
|
154
|
-
licenseKey: 'TU_CLAVE_DE_LICENCIA'
|
|
155
|
-
engineLocation: 'https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0',
|
|
156
|
-
workerLocation: 'https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0/BlinkIDWasmSDK.worker.min.js'
|
|
114
|
+
licenseKey: 'TU_CLAVE_DE_LICENCIA'
|
|
157
115
|
};
|
|
158
116
|
},
|
|
117
|
+
methods: {
|
|
118
|
+
// Métodos para manejar los eventos emitidos directamente por el componente
|
|
119
|
+
handleStatus(ev) {
|
|
120
|
+
console.log('Estado del detector:', ev.detail);
|
|
121
|
+
},
|
|
122
|
+
handleResults(ev) {
|
|
123
|
+
console.log('Resultados del escaneo:', ev.detail);
|
|
124
|
+
}
|
|
125
|
+
},
|
|
159
126
|
mounted() {
|
|
160
127
|
const detector = this.$refs.detector;
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
detector.addEventListener('
|
|
164
|
-
detector.addEventListener('
|
|
165
|
-
|
|
128
|
+
|
|
129
|
+
// Escuchar los eventos emitidos directamente por el componente
|
|
130
|
+
detector.addEventListener('status', this.handleStatus);
|
|
131
|
+
detector.addEventListener('results', this.handleResults);
|
|
132
|
+
|
|
133
|
+
// Iniciar el escaneo por cámara cuando el componente esté listo
|
|
134
|
+
setTimeout(() => {
|
|
135
|
+
detector.startCameraScan();
|
|
136
|
+
}, 1000);
|
|
166
137
|
},
|
|
167
138
|
beforeUnmount() {
|
|
168
139
|
const detector = this.$refs.detector;
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
detector.removeEventListener('
|
|
172
|
-
detector.removeEventListener('
|
|
173
|
-
detector.removeEventListener('fatalError', this.handleFatalError);
|
|
174
|
-
},
|
|
175
|
-
methods: {
|
|
176
|
-
handleReady(ev) {
|
|
177
|
-
console.log('El detector de documentos está listo');
|
|
178
|
-
},
|
|
179
|
-
handleScanSuccess(ev) {
|
|
180
|
-
console.log('Escaneo completado con éxito', ev.detail);
|
|
181
|
-
this.$emit('scan-success', ev.detail);
|
|
182
|
-
},
|
|
183
|
-
handleScanError(ev) {
|
|
184
|
-
console.error('Error de escaneo', ev.detail);
|
|
185
|
-
this.$emit('scan-error', ev.detail);
|
|
186
|
-
},
|
|
187
|
-
handleFatalError(ev) {
|
|
188
|
-
console.error('Error fatal', ev.detail);
|
|
189
|
-
this.$emit('fatal-error', ev.detail);
|
|
190
|
-
}
|
|
140
|
+
|
|
141
|
+
// Eliminar los event listeners
|
|
142
|
+
detector.removeEventListener('status', this.handleStatus);
|
|
143
|
+
detector.removeEventListener('results', this.handleResults);
|
|
191
144
|
}
|
|
192
145
|
};
|
|
193
146
|
</script>
|
|
194
147
|
```
|
|
195
148
|
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
```typescript
|
|
199
|
-
// app.module.ts
|
|
200
|
-
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
|
201
|
-
import { BrowserModule } from '@angular/platform-browser';
|
|
202
|
-
import { AppComponent } from './app.component';
|
|
203
|
-
|
|
204
|
-
// Importar el cargador
|
|
205
|
-
import { defineCustomElements } from '@jaak.ai/stamps/loader';
|
|
206
|
-
|
|
207
|
-
// Registrar los componentes web
|
|
208
|
-
defineCustomElements();
|
|
209
|
-
|
|
210
|
-
@NgModule({
|
|
211
|
-
declarations: [AppComponent],
|
|
212
|
-
imports: [BrowserModule],
|
|
213
|
-
providers: [],
|
|
214
|
-
bootstrap: [AppComponent],
|
|
215
|
-
schemas: [CUSTOM_ELEMENTS_SCHEMA] // Necesario para usar componentes web
|
|
216
|
-
})
|
|
217
|
-
export class AppModule {}
|
|
218
|
-
```
|
|
149
|
+
### Angular
|
|
219
150
|
|
|
220
151
|
```typescript
|
|
221
|
-
//
|
|
222
|
-
import { Component, ElementRef,
|
|
152
|
+
// Asegúrate de configurar el esquema CUSTOM_ELEMENTS_SCHEMA en tu módulo
|
|
153
|
+
import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
|
|
154
|
+
import '@jaak.ai/stamps';
|
|
223
155
|
|
|
224
156
|
@Component({
|
|
225
|
-
selector: 'app-
|
|
157
|
+
selector: 'app-document-detector',
|
|
226
158
|
template: `
|
|
227
159
|
<document-detector
|
|
228
160
|
#detector
|
|
229
|
-
license-key="
|
|
230
|
-
|
|
231
|
-
worker-location="https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0/BlinkIDWasmSDK.worker.min.js">
|
|
232
|
-
</document-detector>
|
|
161
|
+
[attr.license-key]="licenseKey"
|
|
162
|
+
></document-detector>
|
|
233
163
|
`
|
|
234
164
|
})
|
|
235
|
-
export class
|
|
165
|
+
export class DocumentDetectorComponent implements AfterViewInit, OnDestroy {
|
|
236
166
|
@ViewChild('detector') detectorRef: ElementRef;
|
|
237
|
-
|
|
238
|
-
@Output() scanSuccess = new EventEmitter<any>();
|
|
239
|
-
@Output() scanError = new EventEmitter<any>();
|
|
240
|
-
@Output() fatalError = new EventEmitter<any>();
|
|
167
|
+
licenseKey = 'TU_CLAVE_DE_LICENCIA';
|
|
241
168
|
|
|
242
|
-
|
|
169
|
+
// Métodos para manejar los eventos emitidos directamente por el componente
|
|
170
|
+
handleStatus(ev) {
|
|
171
|
+
console.log('Estado del detector:', ev.detail);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
handleResults(ev) {
|
|
175
|
+
console.log('Resultados del escaneo:', ev.detail);
|
|
176
|
+
}
|
|
243
177
|
|
|
244
178
|
ngAfterViewInit() {
|
|
245
179
|
const detector = this.detectorRef.nativeElement;
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
detector.addEventListener('
|
|
249
|
-
detector.addEventListener('
|
|
250
|
-
|
|
180
|
+
|
|
181
|
+
// Escuchar los eventos emitidos directamente por el componente
|
|
182
|
+
detector.addEventListener('status', this.handleStatus.bind(this));
|
|
183
|
+
detector.addEventListener('results', this.handleResults.bind(this));
|
|
184
|
+
|
|
185
|
+
// Iniciar el escaneo por cámara cuando el componente esté listo
|
|
186
|
+
setTimeout(() => {
|
|
187
|
+
detector.startCameraScan();
|
|
188
|
+
}, 1000);
|
|
251
189
|
}
|
|
252
190
|
|
|
253
191
|
ngOnDestroy() {
|
|
254
192
|
const detector = this.detectorRef.nativeElement;
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
detector.removeEventListener('
|
|
258
|
-
detector.removeEventListener('
|
|
259
|
-
detector.removeEventListener('fatalError', this.handleFatalError.bind(this));
|
|
193
|
+
|
|
194
|
+
// Eliminar los event listeners
|
|
195
|
+
detector.removeEventListener('status', this.handleStatus.bind(this));
|
|
196
|
+
detector.removeEventListener('results', this.handleResults.bind(this));
|
|
260
197
|
}
|
|
198
|
+
}
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
### Stencil.js
|
|
261
202
|
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
203
|
+
```tsx
|
|
204
|
+
import { Component, h, State, Listen, Element } from '@stencil/core';
|
|
205
|
+
import '@jaak.ai/stamps';
|
|
206
|
+
|
|
207
|
+
@Component({
|
|
208
|
+
tag: 'app-document-detector',
|
|
209
|
+
styleUrl: 'app-document-detector.css',
|
|
210
|
+
shadow: true
|
|
211
|
+
})
|
|
212
|
+
export class AppDocumentDetector {
|
|
213
|
+
@Element() el: HTMLElement;
|
|
214
|
+
@State() results: any = null;
|
|
215
|
+
@State() status: string = '';
|
|
216
|
+
|
|
217
|
+
// Escuchar los eventos emitidos directamente por el componente
|
|
218
|
+
@Listen('status')
|
|
219
|
+
handleStatus(ev: CustomEvent) {
|
|
220
|
+
this.status = ev.detail;
|
|
221
|
+
console.log('Estado del detector:', this.status);
|
|
265
222
|
}
|
|
266
223
|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
this.
|
|
224
|
+
@Listen('results')
|
|
225
|
+
handleResults(ev: CustomEvent) {
|
|
226
|
+
this.results = ev.detail;
|
|
227
|
+
console.log('Resultados del escaneo:', this.results);
|
|
270
228
|
}
|
|
271
229
|
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
this.
|
|
230
|
+
componentDidLoad() {
|
|
231
|
+
// Iniciar el escaneo por cámara cuando el componente esté listo
|
|
232
|
+
const detector = this.el.shadowRoot.querySelector('document-detector');
|
|
233
|
+
setTimeout(() => {
|
|
234
|
+
detector.startCameraScan();
|
|
235
|
+
}, 1000);
|
|
275
236
|
}
|
|
276
237
|
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
238
|
+
render() {
|
|
239
|
+
return (
|
|
240
|
+
<div>
|
|
241
|
+
<document-detector
|
|
242
|
+
license-key="TU_CLAVE_DE_LICENCIA"
|
|
243
|
+
/>
|
|
244
|
+
</div>
|
|
245
|
+
);
|
|
280
246
|
}
|
|
281
247
|
}
|
|
282
248
|
```
|
|
283
249
|
|
|
284
|
-
##
|
|
250
|
+
## Componente Document-Detector
|
|
285
251
|
|
|
286
|
-
|
|
252
|
+
El componente `document-detector` es el elemento principal de esta librería, diseñado para proporcionar una experiencia completa de escaneo e identificación de documentos en aplicaciones web.
|
|
253
|
+
|
|
254
|
+
### Descripción General
|
|
255
|
+
|
|
256
|
+
El `document-detector` es un componente web que utiliza tecnología de reconocimiento óptico avanzada para escanear y extraer información de documentos de identidad. Está construido sobre el SDK BlinkID y ofrece una interfaz fácil de usar para integrar capacidades de escaneo de documentos en cualquier aplicación web.
|
|
257
|
+
|
|
258
|
+
### Características Principales
|
|
259
|
+
|
|
260
|
+
- **Escaneo en tiempo real**: Captura documentos de identidad a través de la cámara del dispositivo.
|
|
261
|
+
- **Procesamiento de imágenes**: Permite cargar imágenes de documentos para su análisis.
|
|
262
|
+
- **Soporte para documentos de doble cara**: Puede procesar ambos lados de documentos como identificaciones o licencias de conducir.
|
|
263
|
+
- **Extracción de datos**: Obtiene automáticamente información como nombre, fecha de nacimiento, número de documento, etc.
|
|
264
|
+
- **Captura de imágenes**: Guarda imágenes del documento, rostro y firma cuando están disponibles.
|
|
265
|
+
- **Interfaz personalizable**: Permite adaptar la apariencia y comportamiento a las necesidades de tu aplicación.
|
|
266
|
+
- **Eventos detallados**: Proporciona eventos para cada etapa del proceso de escaneo.
|
|
267
|
+
|
|
268
|
+
### Ciclo de Vida del Componente
|
|
269
|
+
|
|
270
|
+
1. **Inicialización**: El componente carga el SDK y prepara los reconocedores.
|
|
271
|
+
2. **Detección**: Busca un documento en el campo visual de la cámara o en la imagen proporcionada.
|
|
272
|
+
3. **Análisis**: Procesa el documento detectado para extraer la información.
|
|
273
|
+
4. **Resultados**: Emite los datos extraídos y las imágenes capturadas.
|
|
274
|
+
|
|
275
|
+
### Casos de Uso Comunes
|
|
276
|
+
|
|
277
|
+
- **Verificación de identidad**: Para procesos de onboarding digital o KYC (Know Your Customer).
|
|
278
|
+
- **Registro de usuarios**: Automatización de la captura de datos personales.
|
|
279
|
+
- **Check-in digital**: En hoteles, eventos o instalaciones que requieren identificación.
|
|
280
|
+
- **Servicios financieros**: Para apertura de cuentas o solicitudes de crédito.
|
|
281
|
+
- **Servicios de salud**: Registro de pacientes y verificación de seguros.
|
|
282
|
+
|
|
283
|
+
### Ejemplo de Implementación Básica
|
|
284
|
+
|
|
285
|
+
```html
|
|
286
|
+
<document-detector
|
|
287
|
+
license-key="TU_CLAVE_DE_LICENCIA">
|
|
288
|
+
</document-detector>
|
|
289
|
+
|
|
290
|
+
<!-- O usando la propiedad config -->
|
|
291
|
+
<document-detector
|
|
292
|
+
config='{"key": "TU_CLAVE_DE_LICENCIA"}'>
|
|
293
|
+
</document-detector>
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
### Manejo de Eventos
|
|
287
297
|
|
|
288
|
-
| Propiedad | Tipo | Valor por defecto | Descripción |
|
|
289
|
-
|-------------------------|--------------------------|------------------------------------------------|---------------------------------------------------|
|
|
290
|
-
| `license-key` | string | - | **Requerido** Clave de licencia |
|
|
291
|
-
| `engine-location` | string | "https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0" | Ruta a los archivos del motor WASM |
|
|
292
|
-
| `worker-location` | string | "https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0/BlinkIDWasmSDK.worker.min.js" | Ruta al archivo worker |
|
|
293
|
-
| `allow-hello-message` | boolean | false | Habilitar mensaje de Hello a la API |
|
|
294
|
-
| `wasm-type` | string | "ADVANCE" | Tipo de WASM a utilizar (ADVANCE, BASIC, etc.) |
|
|
295
|
-
| `blink-id-variant` | string | "lightweight" | Variante a utilizar |
|
|
296
|
-
| `raw-recognizers` | string | - | String JSON de reconocedores |
|
|
297
|
-
| `recognizers` | array | ['BlinkIdMultiSideRecognizer'] | Array de nombres de reconocedores a utilizar |
|
|
298
|
-
| `recognizer-options` | object | *Ver abajo* | Opciones de configuración para reconocedores |
|
|
299
|
-
| `recognition-timeout` | number | - | Tiempo límite para reconocimiento en milisegundos |
|
|
300
|
-
| `recognition-pause-timeout` | number | 3800 | Tiempo de pausa entre reconocimientos |
|
|
301
|
-
| `enable-drag` | boolean | false | Permitir arrastrar y soltar imágenes |
|
|
302
|
-
| `hide-feedback` | boolean | true | Ocultar mensajes de retroalimentación |
|
|
303
|
-
| `hide-loading-and-error-ui` | boolean | false | Ocultar elementos UI de carga y error |
|
|
304
|
-
| `scan-from-camera` | boolean | true | Permitir escaneo desde cámara |
|
|
305
|
-
| `scan-from-image` | boolean | false | Permitir escaneo desde carga de imagen |
|
|
306
|
-
| `thorough-scan-from-image` | boolean | false | Realizar escaneo exhaustivo para imágenes |
|
|
307
|
-
| `gallery-overlay-type` | "FULLSCREEN" \| "INLINE" | "INLINE" | Tipo de visualización del overlay de galería |
|
|
308
|
-
| `gallery-drop-type` | "FULLSCREEN" \| "INLINE" | "INLINE" | Tipo de visualización del área de drop de galería |
|
|
309
|
-
| `show-action-labels` | boolean | false | Mostrar etiquetas de texto para acciones |
|
|
310
|
-
| `show-modal-windows` | boolean | false | Mostrar ventanas modales para mensajes |
|
|
311
|
-
| `show-scanning-line` | boolean | - | Mostrar animación de línea de escaneo |
|
|
312
|
-
|
|
313
|
-
Opciones por defecto del reconocedor:
|
|
314
298
|
```javascript
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
299
|
+
const detector = document.querySelector('document-detector');
|
|
300
|
+
|
|
301
|
+
// Escuchar el evento de cambio de estado
|
|
302
|
+
detector.addEventListener('status', (event) => {
|
|
303
|
+
console.log('Estado del detector:', event.detail);
|
|
304
|
+
|
|
305
|
+
// Puedes reaccionar a diferentes estados
|
|
306
|
+
switch(event.detail) {
|
|
307
|
+
case 'INITIALIZING':
|
|
308
|
+
console.log('El detector se está inicializando');
|
|
309
|
+
break;
|
|
310
|
+
case 'READY':
|
|
311
|
+
console.log('El detector está listo para escanear');
|
|
312
|
+
break;
|
|
313
|
+
case 'RECORDING':
|
|
314
|
+
console.log('La cámara está activa y grabando');
|
|
315
|
+
break;
|
|
316
|
+
case 'RESULTS_SUCCESS':
|
|
317
|
+
console.log('Se han obtenido resultados exitosamente');
|
|
318
|
+
break;
|
|
319
|
+
case 'ERROR':
|
|
320
|
+
console.log('Ha ocurrido un error en el detector');
|
|
321
|
+
break;
|
|
327
322
|
}
|
|
323
|
+
});
|
|
324
|
+
|
|
325
|
+
// Escuchar el evento de resultados
|
|
326
|
+
detector.addEventListener('results', (event) => {
|
|
327
|
+
const resultados = event.detail;
|
|
328
|
+
console.log('Datos del documento:', resultados);
|
|
329
|
+
|
|
330
|
+
// Acceder a imágenes del documento (si están disponibles)
|
|
331
|
+
if (resultados.generalData && resultados.generalData.documentImage) {
|
|
332
|
+
const imagenFrente = resultados.generalData.documentImage.front;
|
|
333
|
+
const imagenReverso = resultados.generalData.documentImage.back;
|
|
334
|
+
const imagenRostro = resultados.generalData.documentImage.face;
|
|
335
|
+
|
|
336
|
+
// Hacer algo con las imágenes...
|
|
337
|
+
}
|
|
338
|
+
});
|
|
339
|
+
```
|
|
340
|
+
|
|
341
|
+
### Control Programático
|
|
342
|
+
|
|
343
|
+
```javascript
|
|
344
|
+
const detector = document.querySelector('document-detector');
|
|
345
|
+
|
|
346
|
+
// Iniciar escaneo por cámara
|
|
347
|
+
function iniciarEscaneoCamara() {
|
|
348
|
+
detector.startCameraScan();
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
// Iniciar escaneo desde archivo de imagen
|
|
352
|
+
function escanearDesdeImagen(archivo) {
|
|
353
|
+
detector.startImageScan(archivo);
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
// Reiniciar el componente (útil cuando se necesita resetear el estado)
|
|
357
|
+
function reiniciarEscaneo() {
|
|
358
|
+
detector.restartComponent();
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
// Ejemplo de uso con un input de archivo
|
|
362
|
+
document.getElementById('inputImagen').addEventListener('change', (event) => {
|
|
363
|
+
if (event.target.files && event.target.files[0]) {
|
|
364
|
+
escanearDesdeImagen(event.target.files[0]);
|
|
365
|
+
}
|
|
366
|
+
});
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
### Personalización de la Apariencia
|
|
370
|
+
|
|
371
|
+
El componente puede personalizarse mediante CSS utilizando las partes expuestas a través de Shadow DOM:
|
|
372
|
+
|
|
373
|
+
```css
|
|
374
|
+
document-detector::part(mb-camera-video) {
|
|
375
|
+
border-radius: 16px;
|
|
376
|
+
border: 2px solid #3498db;
|
|
328
377
|
}
|
|
329
378
|
```
|
|
330
379
|
|
|
380
|
+
### Consideraciones Importantes
|
|
381
|
+
|
|
382
|
+
- **Permisos de cámara**: El navegador solicitará permiso para acceder a la cámara del dispositivo.
|
|
383
|
+
- **HTTPS**: Para usar la funcionalidad de cámara, tu aplicación debe servirse a través de HTTPS.
|
|
384
|
+
- **Compatibilidad**: Verifica la compatibilidad con navegadores móviles si tu aplicación está orientada a dispositivos móviles.
|
|
385
|
+
- **Licencia**: Se requiere una clave de licencia válida para el funcionamiento del componente.
|
|
386
|
+
|
|
387
|
+
## Referencia de API
|
|
388
|
+
|
|
389
|
+
### Propiedades
|
|
390
|
+
|
|
391
|
+
> **Nota**: Solo las siguientes propiedades pueden ser configuradas directamente en el componente.
|
|
392
|
+
|
|
393
|
+
| Propiedad | Tipo | Descripción |
|
|
394
|
+
|--------------------------|-------------------------------------------|--------------------------------------------|
|
|
395
|
+
| `license-key` | string | Clave de licencia para el SDK |
|
|
396
|
+
| `config` | { key: string } | Configuración del componente (incluye la clave de licencia) |
|
|
397
|
+
|
|
331
398
|
### Eventos
|
|
332
399
|
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
|
336
|
-
|
|
337
|
-
| `
|
|
338
|
-
| `
|
|
339
|
-
| `cameraScanStarted` | Emitido cuando comienza el escaneo con cámara | null |
|
|
340
|
-
| `imageScanStarted` | Emitido cuando comienza el escaneo de imagen | null |
|
|
400
|
+
> **Nota**: Solo los siguientes eventos son emitidos directamente por el componente.
|
|
401
|
+
|
|
402
|
+
| Evento | Detalle | Descripción |
|
|
403
|
+
|----------------------|-------------------------------------------|--------------------------------------------|
|
|
404
|
+
| `status` | StatusDocumentDetector | Cambio de estado del detector |
|
|
405
|
+
| `results` | any | Resultados del escaneo |
|
|
341
406
|
|
|
342
407
|
### Métodos
|
|
343
408
|
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
|
347
|
-
|
|
409
|
+
> **Nota**: Solo los siguientes métodos pueden ser llamados directamente en el componente.
|
|
410
|
+
|
|
411
|
+
| Método | Parámetros | Retorno | Descripción |
|
|
412
|
+
|-------------------------|--------------------------------------------|--------------------- |-------------------------------------------|
|
|
413
|
+
| `setUiState` | state: "ERROR" \| "LOADING" \| "NONE" \| "SUCCESS" | Promise<void> | Establecer el estado UI del componente |
|
|
414
|
+
| `startCameraScan` | Ninguno | Promise<void> | Inicia el escaneo utilizando la cámara |
|
|
415
|
+
| `startImageScan` | file: File | Promise<void> | Inicia el escaneo utilizando una imagen |
|
|
416
|
+
| `startMultiSideImageScan` | firstFile: File, secondFile: File | Promise<void> | Inicia el escaneo utilizando dos imágenes para documentos de doble cara |
|
|
417
|
+
| `setUiMessage` | state: "FEEDBACK_ERROR" \| "FEEDBACK_INFO" \| "FEEDBACK_OK", message: string | Promise<void> | Establecer un mensaje UI |
|
|
348
418
|
| `getProductIntegrationInfo` | Ninguno | Promise<ProductIntegrationInfo> | Obtener información de integración del producto |
|
|
419
|
+
| `restartComponent` | Ninguno | Promise<void> | Reinicia el componente y vuelve a iniciar el escaneo por cámara |
|
|
349
420
|
|
|
350
421
|
## Tipos de Objetos de Eventos
|
|
351
422
|
|
|
352
|
-
|
|
423
|
+
> **Nota**: A continuación se describen los tipos de datos para los eventos emitidos por el componente.
|
|
353
424
|
|
|
354
|
-
|
|
355
|
-
{
|
|
356
|
-
sdk: WasmSDK; // Instancia del SDK
|
|
357
|
-
}
|
|
358
|
-
```
|
|
359
|
-
|
|
360
|
-
### EventScanSuccess
|
|
425
|
+
### StatusDocumentDetector
|
|
361
426
|
|
|
362
427
|
```typescript
|
|
363
|
-
{
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
428
|
+
enum StatusDocumentDetector {
|
|
429
|
+
INITIALIZING = "INITIALIZING",
|
|
430
|
+
READY = "READY",
|
|
431
|
+
RECORDING = "RECORDING",
|
|
432
|
+
RUNNING = "RUNNING",
|
|
433
|
+
RESULTS_SUCCESS = "RESULTS_SUCCESS",
|
|
434
|
+
DETECTION_FAILED = "DETECTION_FAILED",
|
|
435
|
+
ERROR = "ERROR"
|
|
368
436
|
}
|
|
369
437
|
```
|
|
370
438
|
|
|
371
|
-
###
|
|
439
|
+
### Resultados (results)
|
|
440
|
+
|
|
441
|
+
El evento `results` emite un objeto con los datos extraídos del documento escaneado, que incluye:
|
|
372
442
|
|
|
373
443
|
```typescript
|
|
374
|
-
{
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
444
|
+
interface DocumentData {
|
|
445
|
+
generalData: {
|
|
446
|
+
type: string;
|
|
447
|
+
nationality: string;
|
|
448
|
+
name: string;
|
|
449
|
+
surname: string;
|
|
450
|
+
address: string;
|
|
451
|
+
birthDate: string;
|
|
452
|
+
gender: string;
|
|
453
|
+
documentImage: {
|
|
454
|
+
frontFull: string; // Imagen base64
|
|
455
|
+
backFull: string; // Imagen base64
|
|
456
|
+
front: string; // Imagen base64
|
|
457
|
+
back: string; // Imagen base64
|
|
458
|
+
signature: string; // Imagen base64
|
|
459
|
+
face: string; // Imagen base64
|
|
460
|
+
}
|
|
461
|
+
};
|
|
462
|
+
mechanicalReadingZone: string;
|
|
463
|
+
specificData: Array<{
|
|
464
|
+
label: string;
|
|
465
|
+
value: string;
|
|
466
|
+
}>;
|
|
380
467
|
}
|
|
381
468
|
```
|
|
382
469
|
|
|
383
470
|
## Licencia
|
|
384
471
|
|
|
385
|
-
MIT
|
|
472
|
+
MIT
|