@jaak.ai/stamps 1.0.0-dev.14 → 1.0.0-dev.16
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 +71 -10
- package/dist/cjs/document-detector_19.cjs.entry.js +49 -5
- package/dist/collection/components/document-detector/document-detector.js +46 -7
- package/dist/collection/components/shared/mb-component/mb-component.js +28 -3
- package/dist/esm/document-detector_19.entry.js +49 -5
- package/dist/stamps/p-ae1d9117.entry.js +9 -0
- package/dist/stamps/stamps.esm.js +1 -1
- package/dist/types/components/document-detector/document-detector.d.ts +13 -0
- package/dist/types/components/shared/mb-component/mb-component.d.ts +2 -0
- package/dist/types/components.d.ts +25 -0
- package/package.json +1 -1
- package/dist/stamps/p-e70043eb.entry.js +0 -9
package/README.md
CHANGED
|
@@ -264,6 +264,10 @@ El `document-detector` es un componente web que utiliza tecnología de reconocim
|
|
|
264
264
|
- **Captura de imágenes**: Guarda imágenes del documento, rostro y firma cuando están disponibles.
|
|
265
265
|
- **Interfaz personalizable**: Permite adaptar la apariencia y comportamiento a las necesidades de tu aplicación.
|
|
266
266
|
- **Eventos detallados**: Proporciona eventos para cada etapa del proceso de escaneo.
|
|
267
|
+
- **Modo dinámico**: Optimiza automáticamente el rendimiento según el dispositivo (escritorio o móvil).
|
|
268
|
+
- **Filtros de calidad ajustables**: Controla la rigurosidad de los filtros de desenfoque y brillo.
|
|
269
|
+
- **Traducciones personalizables**: Permite personalizar todos los mensajes mostrados al usuario.
|
|
270
|
+
- **Capacidad de reinicio**: Facilita reiniciar el componente sin necesidad de recargarlo.
|
|
267
271
|
|
|
268
272
|
### Ciclo de Vida del Componente
|
|
269
273
|
|
|
@@ -287,9 +291,20 @@ El `document-detector` es un componente web que utiliza tecnología de reconocim
|
|
|
287
291
|
license-key="TU_CLAVE_DE_LICENCIA">
|
|
288
292
|
</document-detector>
|
|
289
293
|
|
|
290
|
-
<!-- O usando la propiedad config -->
|
|
294
|
+
<!-- O usando la propiedad config con opciones avanzadas -->
|
|
291
295
|
<document-detector
|
|
292
|
-
config='{
|
|
296
|
+
config='{
|
|
297
|
+
"key": "TU_CLAVE_DE_LICENCIA",
|
|
298
|
+
"dynamicMode": true,
|
|
299
|
+
"strictMode": true,
|
|
300
|
+
"translation": {
|
|
301
|
+
"front": "Escanea el frente de tu documento",
|
|
302
|
+
"back": "Ahora escanea el reverso",
|
|
303
|
+
"changeSide": "Voltea el documento",
|
|
304
|
+
"cameraFeedbackBlur": "El documento está borroso",
|
|
305
|
+
"cameraFeedbackGlare": "Evita el reflejo en el documento"
|
|
306
|
+
}
|
|
307
|
+
}'>
|
|
293
308
|
</document-detector>
|
|
294
309
|
```
|
|
295
310
|
|
|
@@ -307,15 +322,30 @@ detector.addEventListener('status', (event) => {
|
|
|
307
322
|
case 'INITIALIZING':
|
|
308
323
|
console.log('El detector se está inicializando');
|
|
309
324
|
break;
|
|
310
|
-
case 'READY':
|
|
311
|
-
console.log('El detector está listo para escanear');
|
|
312
|
-
break;
|
|
313
325
|
case 'RECORDING':
|
|
314
326
|
console.log('La cámara está activa y grabando');
|
|
315
327
|
break;
|
|
328
|
+
case 'FRONT_SIDE_DETECTION':
|
|
329
|
+
console.log('Detectando el frente del documento');
|
|
330
|
+
break;
|
|
331
|
+
case 'BACK_SIDE_DETECTION':
|
|
332
|
+
console.log('Detectando el reverso del documento');
|
|
333
|
+
break;
|
|
334
|
+
case 'DOCUMENT_DETECTED':
|
|
335
|
+
console.log('Documento detectado correctamente');
|
|
336
|
+
break;
|
|
337
|
+
case 'CHANGE_SIDE':
|
|
338
|
+
console.log('Es necesario voltear el documento');
|
|
339
|
+
break;
|
|
316
340
|
case 'RESULTS_SUCCESS':
|
|
317
341
|
console.log('Se han obtenido resultados exitosamente');
|
|
318
342
|
break;
|
|
343
|
+
case 'RESULTS_EMPTY':
|
|
344
|
+
console.log('No se encontraron datos en el documento');
|
|
345
|
+
break;
|
|
346
|
+
case 'DETECTION_FAILED':
|
|
347
|
+
console.log('Falló la detección del documento');
|
|
348
|
+
break;
|
|
319
349
|
case 'ERROR':
|
|
320
350
|
console.log('Ha ocurrido un error en el detector');
|
|
321
351
|
break;
|
|
@@ -356,6 +386,8 @@ function escanearDesdeImagen(archivo) {
|
|
|
356
386
|
// Reiniciar el componente (útil cuando se necesita resetear el estado)
|
|
357
387
|
function reiniciarEscaneo() {
|
|
358
388
|
detector.restartComponent();
|
|
389
|
+
// El método restartComponent reinicia internamente el componente y vuelve a iniciar
|
|
390
|
+
// el escaneo por cámara automáticamente, sin necesidad de llamar a startCameraScan()
|
|
359
391
|
}
|
|
360
392
|
|
|
361
393
|
// Ejemplo de uso con un input de archivo
|
|
@@ -393,7 +425,31 @@ document-detector::part(mb-camera-video) {
|
|
|
393
425
|
| Propiedad | Tipo | Descripción |
|
|
394
426
|
|--------------------------|-------------------------------------------|--------------------------------------------|
|
|
395
427
|
| `license-key` | string | Clave de licencia para el SDK |
|
|
396
|
-
| `config` |
|
|
428
|
+
| `config` | object | Configuración del componente (ver detalle abajo) |
|
|
429
|
+
|
|
430
|
+
#### Objeto de configuración (`config`)
|
|
431
|
+
|
|
432
|
+
| Propiedad | Tipo | Descripción |
|
|
433
|
+
|--------------------------|-------------------------------------------|--------------------------------------------|
|
|
434
|
+
| `key` | string | Clave de licencia para el SDK |
|
|
435
|
+
| `dynamicMode` | boolean | Cuando está activado, utiliza la variante completa del SDK en escritorio y la ligera en móviles |
|
|
436
|
+
| `strictMode` | boolean | Controla los filtros de desenfoque y brillo. Cuando está activado, se aplican filtros más estrictos |
|
|
437
|
+
| `translation` | object | Configuración de traducciones personalizadas (ver detalle abajo) |
|
|
438
|
+
|
|
439
|
+
#### Objeto de traducción (`config.translation`)
|
|
440
|
+
|
|
441
|
+
| Propiedad | Tipo | Descripción |
|
|
442
|
+
|--------------------------------|-------------------------------------------|--------------------------------------------|
|
|
443
|
+
| `front` | string | Mensaje para escanear el frente del documento |
|
|
444
|
+
| `back` | string | Mensaje para escanear el reverso del documento |
|
|
445
|
+
| `changeSide` | string | Mensaje para voltear el documento |
|
|
446
|
+
| `adjustAngle` | string | Mensaje para ajustar el ángulo del documento |
|
|
447
|
+
| `cameraFeedbackBlur` | string | Mensaje cuando el documento está borroso |
|
|
448
|
+
| `cameraFeedbackFacePhotoCovered`| string | Mensaje cuando la foto de la cara está cubierta |
|
|
449
|
+
| `cameraFeedbackGlare` | string | Mensaje cuando hay deslumbramiento en el documento |
|
|
450
|
+
| `cameraFeedbackWrongSide` | string | Mensaje cuando se muestra el lado incorrecto del documento |
|
|
451
|
+
| `moveCloser` | string | Mensaje para acercar el documento |
|
|
452
|
+
| `moveFarther` | string | Mensaje para alejar el documento |
|
|
397
453
|
|
|
398
454
|
### Eventos
|
|
399
455
|
|
|
@@ -426,13 +482,18 @@ document-detector::part(mb-camera-video) {
|
|
|
426
482
|
|
|
427
483
|
```typescript
|
|
428
484
|
enum StatusDocumentDetector {
|
|
429
|
-
INITIALIZING = "INITIALIZING",
|
|
430
|
-
READY = "READY",
|
|
431
485
|
RECORDING = "RECORDING",
|
|
486
|
+
ERROR = "ERROR",
|
|
432
487
|
RUNNING = "RUNNING",
|
|
488
|
+
INITIALIZING = "INITIALIZING",
|
|
489
|
+
FRONT_SIDE_DETECTION = "FRONT_SIDE_DETECTION",
|
|
490
|
+
BACK_SIDE_DETECTION = "BACK_SIDE_DETECTION",
|
|
491
|
+
DOCUMENT_NOT_FOUND = "DOCUMENT_NOT_FOUND",
|
|
492
|
+
DOCUMENT_DETECTED = "DOCUMENT_DETECTED",
|
|
493
|
+
CHANGE_SIDE = "CHANGE_SIDE",
|
|
433
494
|
RESULTS_SUCCESS = "RESULTS_SUCCESS",
|
|
434
|
-
|
|
435
|
-
|
|
495
|
+
RESULTS_EMPTY = "RESULTS_EMPTY",
|
|
496
|
+
DETECTION_FAILED = "DETECTION_FAILED"
|
|
436
497
|
}
|
|
437
498
|
```
|
|
438
499
|
|
|
@@ -6124,7 +6124,7 @@ const DocumentDetector = class {
|
|
|
6124
6124
|
};
|
|
6125
6125
|
this.ready = {
|
|
6126
6126
|
emit: (data) => {
|
|
6127
|
-
this.status.emit(StatusDocumentDetector.
|
|
6127
|
+
this.status.emit(StatusDocumentDetector.RECORDING);
|
|
6128
6128
|
return undefined;
|
|
6129
6129
|
}
|
|
6130
6130
|
};
|
|
@@ -6143,13 +6143,12 @@ const DocumentDetector = class {
|
|
|
6143
6143
|
};
|
|
6144
6144
|
this.feedback = {
|
|
6145
6145
|
emit: (data) => {
|
|
6146
|
-
console.log(data);
|
|
6147
6146
|
return undefined;
|
|
6148
6147
|
}
|
|
6149
6148
|
};
|
|
6150
6149
|
this.cameraScanStarted = {
|
|
6151
6150
|
emit: () => {
|
|
6152
|
-
this.status.emit(StatusDocumentDetector.
|
|
6151
|
+
this.status.emit(StatusDocumentDetector.FRONT_SIDE_DETECTION);
|
|
6153
6152
|
return undefined;
|
|
6154
6153
|
}
|
|
6155
6154
|
};
|
|
@@ -6210,12 +6209,14 @@ const DocumentDetector = class {
|
|
|
6210
6209
|
}
|
|
6211
6210
|
};
|
|
6212
6211
|
}
|
|
6212
|
+
this.init();
|
|
6213
6213
|
}
|
|
6214
6214
|
}
|
|
6215
6215
|
async setUiState(state) {
|
|
6216
6216
|
this.mbComponentEl.setUiState(state);
|
|
6217
6217
|
}
|
|
6218
6218
|
async startCameraScan() {
|
|
6219
|
+
this.status.emit(StatusDocumentDetector.INITIALIZING);
|
|
6219
6220
|
this.mbComponentEl.startCameraScan();
|
|
6220
6221
|
}
|
|
6221
6222
|
async startImageScan(file) {
|
|
@@ -6292,7 +6293,45 @@ const DocumentDetector = class {
|
|
|
6292
6293
|
this.finalTranslations = this.translations
|
|
6293
6294
|
? this.translations
|
|
6294
6295
|
: rawTranslations;
|
|
6295
|
-
|
|
6296
|
+
const customTranslations = {};
|
|
6297
|
+
if (this.config && this.config.translation) {
|
|
6298
|
+
if (this.config.translation.front) {
|
|
6299
|
+
customTranslations["camera-feedback-scan-front"] = this.config.translation.front;
|
|
6300
|
+
}
|
|
6301
|
+
if (this.config.translation.back) {
|
|
6302
|
+
customTranslations["camera-feedback-scan-back"] = this.config.translation.back;
|
|
6303
|
+
}
|
|
6304
|
+
if (this.config.translation.changeSide) {
|
|
6305
|
+
customTranslations["camera-feedback-flip"] = this.config.translation.changeSide;
|
|
6306
|
+
}
|
|
6307
|
+
if (this.config.translation.adjustAngle) {
|
|
6308
|
+
customTranslations["camera-feedback-adjust-angle"] = this.config.translation.adjustAngle;
|
|
6309
|
+
}
|
|
6310
|
+
if (this.config.translation.cameraFeedbackBlur) {
|
|
6311
|
+
customTranslations["camera-feedback-blur"] = this.config.translation.cameraFeedbackBlur;
|
|
6312
|
+
}
|
|
6313
|
+
if (this.config.translation.cameraFeedbackFacePhotoCovered) {
|
|
6314
|
+
customTranslations["camera-feedback-face-photo-covered"] = this.config.translation.cameraFeedbackFacePhotoCovered;
|
|
6315
|
+
}
|
|
6316
|
+
if (this.config.translation.cameraFeedbackGlare) {
|
|
6317
|
+
customTranslations["camera-feedback-glare"] = this.config.translation.cameraFeedbackGlare;
|
|
6318
|
+
}
|
|
6319
|
+
if (this.config.translation.cameraFeedbackWrongSide) {
|
|
6320
|
+
customTranslations["camera-feedback-wrong-side"] = this.config.translation.cameraFeedbackWrongSide;
|
|
6321
|
+
}
|
|
6322
|
+
if (this.config.translation.moveCloser) {
|
|
6323
|
+
customTranslations["camera-feedback-move-closer"] = this.config.translation.moveCloser;
|
|
6324
|
+
}
|
|
6325
|
+
if (this.config.translation.moveFarther) {
|
|
6326
|
+
customTranslations["camera-feedback-move-farther"] = this.config.translation.moveFarther;
|
|
6327
|
+
}
|
|
6328
|
+
}
|
|
6329
|
+
// Merge custom translations with finalTranslations
|
|
6330
|
+
const mergedTranslations = {
|
|
6331
|
+
...(this.finalTranslations || {}),
|
|
6332
|
+
...customTranslations
|
|
6333
|
+
};
|
|
6334
|
+
this.translationService = new TranslationService(mergedTranslations);
|
|
6296
6335
|
this.sdkService = new SdkService();
|
|
6297
6336
|
}
|
|
6298
6337
|
render() {
|
|
@@ -6301,7 +6340,7 @@ const DocumentDetector = class {
|
|
|
6301
6340
|
}, onFeedback: (ev) => {
|
|
6302
6341
|
this.feedbackEl.show(ev.detail);
|
|
6303
6342
|
this.feedback.emit(ev.detail);
|
|
6304
|
-
}, onScanSuccess: (ev) => this.scanSuccess.emit(ev.detail), onReady: (ev) => this.ready.emit(ev.detail), onCameraScanStarted: (ev) => this.cameraScanStarted.emit(ev.detail), onImageScanStarted: (ev) => this.imageScanStarted.emit(ev.detail), onScanError: (ev) => this.scanError.emit(ev.detail), onScanAborted: (ev) => this.scanAborted.emit(ev.detail) })), index.h("mb-feedback", { dir: this.hostEl.getAttribute("dir"), visible: !this.hideFeedback, ref: (el) => (this.feedbackEl = el) }))));
|
|
6343
|
+
}, onScanSuccess: (ev) => this.scanSuccess.emit(ev.detail), onReady: (ev) => this.ready.emit(ev.detail), onCameraScanStarted: (ev) => this.cameraScanStarted.emit(ev.detail), onImageScanStarted: (ev) => this.imageScanStarted.emit(ev.detail), onScanError: (ev) => this.scanError.emit(ev.detail), onScanAborted: (ev) => this.scanAborted.emit(ev.detail), onStatus: (ev) => this.status.emit(ev.detail) })), index.h("mb-feedback", { dir: this.hostEl.getAttribute("dir"), visible: !this.hideFeedback, ref: (el) => (this.feedbackEl = el) }))));
|
|
6305
6344
|
}
|
|
6306
6345
|
get hostEl() { return index.getElement(this); }
|
|
6307
6346
|
static get watchers() { return {
|
|
@@ -6949,6 +6988,7 @@ const MbComponent = class {
|
|
|
6949
6988
|
this.imageScanStarted = index.createEvent(this, "imageScanStarted", 7);
|
|
6950
6989
|
this.scanAborted = index.createEvent(this, "scanAborted", 7);
|
|
6951
6990
|
this.setIsCameraActive = index.createEvent(this, "setIsCameraActive", 7);
|
|
6991
|
+
this.status = index.createEvent(this, "status", 7);
|
|
6952
6992
|
this.screens = {
|
|
6953
6993
|
action: null,
|
|
6954
6994
|
error: null,
|
|
@@ -7338,9 +7378,11 @@ const MbComponent = class {
|
|
|
7338
7378
|
break;
|
|
7339
7379
|
case RecognitionStatus.DetectionStatusFail:
|
|
7340
7380
|
this.cameraExperience.setState(CameraExperienceState.Default, this.isBackSide);
|
|
7381
|
+
this.status.emit(StatusDocumentDetector.DOCUMENT_NOT_FOUND);
|
|
7341
7382
|
break;
|
|
7342
7383
|
case RecognitionStatus.DetectionStatusSuccess:
|
|
7343
7384
|
this.detectionSuccessLock = true;
|
|
7385
|
+
this.status.emit(StatusDocumentDetector.DOCUMENT_DETECTED);
|
|
7344
7386
|
window.setTimeout(() => {
|
|
7345
7387
|
if (this.detectionSuccessLock) {
|
|
7346
7388
|
this.cameraExperience.setState(CameraExperienceState.Detection);
|
|
@@ -7484,6 +7526,8 @@ const MbComponent = class {
|
|
|
7484
7526
|
break;
|
|
7485
7527
|
// handle flipping of other documents
|
|
7486
7528
|
case RecognitionStatus.OnFirstSideResult:
|
|
7529
|
+
this.status.emit(StatusDocumentDetector.CHANGE_SIDE);
|
|
7530
|
+
this.status.emit(StatusDocumentDetector.BACK_SIDE_DETECTION);
|
|
7487
7531
|
this.sdkService.videoRecognizer.pauseRecognition();
|
|
7488
7532
|
window.setTimeout(async () => {
|
|
7489
7533
|
if (this.areHelpScreensOpen) {
|
|
@@ -39,7 +39,7 @@ export class DocumentDetector {
|
|
|
39
39
|
};
|
|
40
40
|
this.ready = {
|
|
41
41
|
emit: (data) => {
|
|
42
|
-
this.status.emit(StatusDocumentDetector.
|
|
42
|
+
this.status.emit(StatusDocumentDetector.RECORDING);
|
|
43
43
|
return undefined;
|
|
44
44
|
}
|
|
45
45
|
};
|
|
@@ -58,13 +58,12 @@ export class DocumentDetector {
|
|
|
58
58
|
};
|
|
59
59
|
this.feedback = {
|
|
60
60
|
emit: (data) => {
|
|
61
|
-
console.log(data);
|
|
62
61
|
return undefined;
|
|
63
62
|
}
|
|
64
63
|
};
|
|
65
64
|
this.cameraScanStarted = {
|
|
66
65
|
emit: () => {
|
|
67
|
-
this.status.emit(StatusDocumentDetector.
|
|
66
|
+
this.status.emit(StatusDocumentDetector.FRONT_SIDE_DETECTION);
|
|
68
67
|
return undefined;
|
|
69
68
|
}
|
|
70
69
|
};
|
|
@@ -125,12 +124,14 @@ export class DocumentDetector {
|
|
|
125
124
|
}
|
|
126
125
|
};
|
|
127
126
|
}
|
|
127
|
+
this.init();
|
|
128
128
|
}
|
|
129
129
|
}
|
|
130
130
|
async setUiState(state) {
|
|
131
131
|
this.mbComponentEl.setUiState(state);
|
|
132
132
|
}
|
|
133
133
|
async startCameraScan() {
|
|
134
|
+
this.status.emit(StatusDocumentDetector.INITIALIZING);
|
|
134
135
|
this.mbComponentEl.startCameraScan();
|
|
135
136
|
}
|
|
136
137
|
async startImageScan(file) {
|
|
@@ -207,7 +208,45 @@ export class DocumentDetector {
|
|
|
207
208
|
this.finalTranslations = this.translations
|
|
208
209
|
? this.translations
|
|
209
210
|
: rawTranslations;
|
|
210
|
-
|
|
211
|
+
const customTranslations = {};
|
|
212
|
+
if (this.config && this.config.translation) {
|
|
213
|
+
if (this.config.translation.front) {
|
|
214
|
+
customTranslations["camera-feedback-scan-front"] = this.config.translation.front;
|
|
215
|
+
}
|
|
216
|
+
if (this.config.translation.back) {
|
|
217
|
+
customTranslations["camera-feedback-scan-back"] = this.config.translation.back;
|
|
218
|
+
}
|
|
219
|
+
if (this.config.translation.changeSide) {
|
|
220
|
+
customTranslations["camera-feedback-flip"] = this.config.translation.changeSide;
|
|
221
|
+
}
|
|
222
|
+
if (this.config.translation.adjustAngle) {
|
|
223
|
+
customTranslations["camera-feedback-adjust-angle"] = this.config.translation.adjustAngle;
|
|
224
|
+
}
|
|
225
|
+
if (this.config.translation.cameraFeedbackBlur) {
|
|
226
|
+
customTranslations["camera-feedback-blur"] = this.config.translation.cameraFeedbackBlur;
|
|
227
|
+
}
|
|
228
|
+
if (this.config.translation.cameraFeedbackFacePhotoCovered) {
|
|
229
|
+
customTranslations["camera-feedback-face-photo-covered"] = this.config.translation.cameraFeedbackFacePhotoCovered;
|
|
230
|
+
}
|
|
231
|
+
if (this.config.translation.cameraFeedbackGlare) {
|
|
232
|
+
customTranslations["camera-feedback-glare"] = this.config.translation.cameraFeedbackGlare;
|
|
233
|
+
}
|
|
234
|
+
if (this.config.translation.cameraFeedbackWrongSide) {
|
|
235
|
+
customTranslations["camera-feedback-wrong-side"] = this.config.translation.cameraFeedbackWrongSide;
|
|
236
|
+
}
|
|
237
|
+
if (this.config.translation.moveCloser) {
|
|
238
|
+
customTranslations["camera-feedback-move-closer"] = this.config.translation.moveCloser;
|
|
239
|
+
}
|
|
240
|
+
if (this.config.translation.moveFarther) {
|
|
241
|
+
customTranslations["camera-feedback-move-farther"] = this.config.translation.moveFarther;
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
// Merge custom translations with finalTranslations
|
|
245
|
+
const mergedTranslations = {
|
|
246
|
+
...(this.finalTranslations || {}),
|
|
247
|
+
...customTranslations
|
|
248
|
+
};
|
|
249
|
+
this.translationService = new TranslationService(mergedTranslations);
|
|
211
250
|
this.sdkService = new SdkService();
|
|
212
251
|
}
|
|
213
252
|
render() {
|
|
@@ -216,7 +255,7 @@ export class DocumentDetector {
|
|
|
216
255
|
}, onFeedback: (ev) => {
|
|
217
256
|
this.feedbackEl.show(ev.detail);
|
|
218
257
|
this.feedback.emit(ev.detail);
|
|
219
|
-
}, onScanSuccess: (ev) => this.scanSuccess.emit(ev.detail), onReady: (ev) => this.ready.emit(ev.detail), onCameraScanStarted: (ev) => this.cameraScanStarted.emit(ev.detail), onImageScanStarted: (ev) => this.imageScanStarted.emit(ev.detail), onScanError: (ev) => this.scanError.emit(ev.detail), onScanAborted: (ev) => this.scanAborted.emit(ev.detail) })), h("mb-feedback", { dir: this.hostEl.getAttribute("dir"), visible: !this.hideFeedback, ref: (el) => (this.feedbackEl = el) }))));
|
|
258
|
+
}, onScanSuccess: (ev) => this.scanSuccess.emit(ev.detail), onReady: (ev) => this.ready.emit(ev.detail), onCameraScanStarted: (ev) => this.cameraScanStarted.emit(ev.detail), onImageScanStarted: (ev) => this.imageScanStarted.emit(ev.detail), onScanError: (ev) => this.scanError.emit(ev.detail), onScanAborted: (ev) => this.scanAborted.emit(ev.detail), onStatus: (ev) => this.status.emit(ev.detail) })), h("mb-feedback", { dir: this.hostEl.getAttribute("dir"), visible: !this.hideFeedback, ref: (el) => (this.feedbackEl = el) }))));
|
|
220
259
|
}
|
|
221
260
|
static get is() { return "document-detector"; }
|
|
222
261
|
static get encapsulation() { return "shadow"; }
|
|
@@ -253,8 +292,8 @@ export class DocumentDetector {
|
|
|
253
292
|
"type": "unknown",
|
|
254
293
|
"mutable": true,
|
|
255
294
|
"complexType": {
|
|
256
|
-
"original": "{\n key: string;\n dynamicMode: boolean;\n strictMode: boolean;\n }",
|
|
257
|
-
"resolved": "{ key: string; dynamicMode: boolean; strictMode: boolean; }",
|
|
295
|
+
"original": "{\n key: string;\n dynamicMode: boolean;\n strictMode: boolean;\n translation: {\n front: string;\n back: string;\n changeSide: string;\n adjustAngle: string;\n cameraFeedbackBlur: string;\n cameraFeedbackFacePhotoCovered: string;\n cameraFeedbackGlare: string;\n cameraFeedbackWrongSide: string;\n moveCloser: string;\n moveFarther: string;\n }\n }",
|
|
296
|
+
"resolved": "{ key: string; dynamicMode: boolean; strictMode: boolean; translation: { front: string; back: string; changeSide: string; adjustAngle: string; cameraFeedbackBlur: string; cameraFeedbackFacePhotoCovered: string; cameraFeedbackGlare: string; cameraFeedbackWrongSide: string; moveCloser: string; moveFarther: string; }; }",
|
|
258
297
|
"references": {}
|
|
259
298
|
},
|
|
260
299
|
"required": false,
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { CameraExperienceState, Code,
|
|
1
|
+
import { h, Host, } from "@stencil/core";
|
|
2
|
+
import { CameraExperienceState, Code, FeedbackCode, ImageRecognitionType, MultiSideImageType, RecognitionStatus, SDKError, } from "../../../utils/data-structures";
|
|
3
3
|
import * as ErrorTypes from "../../../utils/error-structures";
|
|
4
|
-
import {
|
|
4
|
+
import { ErrorCodes, LicenseErrorType, sdkErrors, } from "@microblink/blinkid-in-browser-sdk";
|
|
5
5
|
import * as DeviceHelpers from "../../../utils/device.helpers";
|
|
6
6
|
import * as GenericHelpers from "../../../utils/generic.helpers";
|
|
7
7
|
import * as Utils from "./mb-component.utils";
|
|
8
|
+
import { StatusDocumentDetector } from "../../../utils/status.document-detector";
|
|
8
9
|
export class MbComponent {
|
|
9
10
|
constructor() {
|
|
10
11
|
this.screens = {
|
|
@@ -396,9 +397,11 @@ export class MbComponent {
|
|
|
396
397
|
break;
|
|
397
398
|
case RecognitionStatus.DetectionStatusFail:
|
|
398
399
|
this.cameraExperience.setState(CameraExperienceState.Default, this.isBackSide);
|
|
400
|
+
this.status.emit(StatusDocumentDetector.DOCUMENT_NOT_FOUND);
|
|
399
401
|
break;
|
|
400
402
|
case RecognitionStatus.DetectionStatusSuccess:
|
|
401
403
|
this.detectionSuccessLock = true;
|
|
404
|
+
this.status.emit(StatusDocumentDetector.DOCUMENT_DETECTED);
|
|
402
405
|
window.setTimeout(() => {
|
|
403
406
|
if (this.detectionSuccessLock) {
|
|
404
407
|
this.cameraExperience.setState(CameraExperienceState.Detection);
|
|
@@ -542,6 +545,8 @@ export class MbComponent {
|
|
|
542
545
|
break;
|
|
543
546
|
// handle flipping of other documents
|
|
544
547
|
case RecognitionStatus.OnFirstSideResult:
|
|
548
|
+
this.status.emit(StatusDocumentDetector.CHANGE_SIDE);
|
|
549
|
+
this.status.emit(StatusDocumentDetector.BACK_SIDE_DETECTION);
|
|
545
550
|
this.sdkService.videoRecognizer.pauseRecognition();
|
|
546
551
|
window.setTimeout(async () => {
|
|
547
552
|
if (this.areHelpScreensOpen) {
|
|
@@ -2150,6 +2155,26 @@ export class MbComponent {
|
|
|
2150
2155
|
"resolved": "boolean",
|
|
2151
2156
|
"references": {}
|
|
2152
2157
|
}
|
|
2158
|
+
}, {
|
|
2159
|
+
"method": "status",
|
|
2160
|
+
"name": "status",
|
|
2161
|
+
"bubbles": true,
|
|
2162
|
+
"cancelable": true,
|
|
2163
|
+
"composed": true,
|
|
2164
|
+
"docs": {
|
|
2165
|
+
"tags": [],
|
|
2166
|
+
"text": ""
|
|
2167
|
+
},
|
|
2168
|
+
"complexType": {
|
|
2169
|
+
"original": "StatusDocumentDetector",
|
|
2170
|
+
"resolved": "StatusDocumentDetector.BACK_SIDE_DETECTION | StatusDocumentDetector.CHANGE_SIDE | StatusDocumentDetector.DETECTION_FAILED | StatusDocumentDetector.DOCUMENT_DETECTED | StatusDocumentDetector.DOCUMENT_NOT_FOUND | StatusDocumentDetector.ERROR | StatusDocumentDetector.FRONT_SIDE_DETECTION | StatusDocumentDetector.INITIALIZING | StatusDocumentDetector.RECORDING | StatusDocumentDetector.RESULTS_EMPTY | StatusDocumentDetector.RESULTS_SUCCESS | StatusDocumentDetector.RUNNING",
|
|
2171
|
+
"references": {
|
|
2172
|
+
"StatusDocumentDetector": {
|
|
2173
|
+
"location": "import",
|
|
2174
|
+
"path": "../../../utils/status.document-detector"
|
|
2175
|
+
}
|
|
2176
|
+
}
|
|
2177
|
+
}
|
|
2153
2178
|
}];
|
|
2154
2179
|
}
|
|
2155
2180
|
static get methods() {
|
|
@@ -6120,7 +6120,7 @@ const DocumentDetector = class {
|
|
|
6120
6120
|
};
|
|
6121
6121
|
this.ready = {
|
|
6122
6122
|
emit: (data) => {
|
|
6123
|
-
this.status.emit(StatusDocumentDetector.
|
|
6123
|
+
this.status.emit(StatusDocumentDetector.RECORDING);
|
|
6124
6124
|
return undefined;
|
|
6125
6125
|
}
|
|
6126
6126
|
};
|
|
@@ -6139,13 +6139,12 @@ const DocumentDetector = class {
|
|
|
6139
6139
|
};
|
|
6140
6140
|
this.feedback = {
|
|
6141
6141
|
emit: (data) => {
|
|
6142
|
-
console.log(data);
|
|
6143
6142
|
return undefined;
|
|
6144
6143
|
}
|
|
6145
6144
|
};
|
|
6146
6145
|
this.cameraScanStarted = {
|
|
6147
6146
|
emit: () => {
|
|
6148
|
-
this.status.emit(StatusDocumentDetector.
|
|
6147
|
+
this.status.emit(StatusDocumentDetector.FRONT_SIDE_DETECTION);
|
|
6149
6148
|
return undefined;
|
|
6150
6149
|
}
|
|
6151
6150
|
};
|
|
@@ -6206,12 +6205,14 @@ const DocumentDetector = class {
|
|
|
6206
6205
|
}
|
|
6207
6206
|
};
|
|
6208
6207
|
}
|
|
6208
|
+
this.init();
|
|
6209
6209
|
}
|
|
6210
6210
|
}
|
|
6211
6211
|
async setUiState(state) {
|
|
6212
6212
|
this.mbComponentEl.setUiState(state);
|
|
6213
6213
|
}
|
|
6214
6214
|
async startCameraScan() {
|
|
6215
|
+
this.status.emit(StatusDocumentDetector.INITIALIZING);
|
|
6215
6216
|
this.mbComponentEl.startCameraScan();
|
|
6216
6217
|
}
|
|
6217
6218
|
async startImageScan(file) {
|
|
@@ -6288,7 +6289,45 @@ const DocumentDetector = class {
|
|
|
6288
6289
|
this.finalTranslations = this.translations
|
|
6289
6290
|
? this.translations
|
|
6290
6291
|
: rawTranslations;
|
|
6291
|
-
|
|
6292
|
+
const customTranslations = {};
|
|
6293
|
+
if (this.config && this.config.translation) {
|
|
6294
|
+
if (this.config.translation.front) {
|
|
6295
|
+
customTranslations["camera-feedback-scan-front"] = this.config.translation.front;
|
|
6296
|
+
}
|
|
6297
|
+
if (this.config.translation.back) {
|
|
6298
|
+
customTranslations["camera-feedback-scan-back"] = this.config.translation.back;
|
|
6299
|
+
}
|
|
6300
|
+
if (this.config.translation.changeSide) {
|
|
6301
|
+
customTranslations["camera-feedback-flip"] = this.config.translation.changeSide;
|
|
6302
|
+
}
|
|
6303
|
+
if (this.config.translation.adjustAngle) {
|
|
6304
|
+
customTranslations["camera-feedback-adjust-angle"] = this.config.translation.adjustAngle;
|
|
6305
|
+
}
|
|
6306
|
+
if (this.config.translation.cameraFeedbackBlur) {
|
|
6307
|
+
customTranslations["camera-feedback-blur"] = this.config.translation.cameraFeedbackBlur;
|
|
6308
|
+
}
|
|
6309
|
+
if (this.config.translation.cameraFeedbackFacePhotoCovered) {
|
|
6310
|
+
customTranslations["camera-feedback-face-photo-covered"] = this.config.translation.cameraFeedbackFacePhotoCovered;
|
|
6311
|
+
}
|
|
6312
|
+
if (this.config.translation.cameraFeedbackGlare) {
|
|
6313
|
+
customTranslations["camera-feedback-glare"] = this.config.translation.cameraFeedbackGlare;
|
|
6314
|
+
}
|
|
6315
|
+
if (this.config.translation.cameraFeedbackWrongSide) {
|
|
6316
|
+
customTranslations["camera-feedback-wrong-side"] = this.config.translation.cameraFeedbackWrongSide;
|
|
6317
|
+
}
|
|
6318
|
+
if (this.config.translation.moveCloser) {
|
|
6319
|
+
customTranslations["camera-feedback-move-closer"] = this.config.translation.moveCloser;
|
|
6320
|
+
}
|
|
6321
|
+
if (this.config.translation.moveFarther) {
|
|
6322
|
+
customTranslations["camera-feedback-move-farther"] = this.config.translation.moveFarther;
|
|
6323
|
+
}
|
|
6324
|
+
}
|
|
6325
|
+
// Merge custom translations with finalTranslations
|
|
6326
|
+
const mergedTranslations = {
|
|
6327
|
+
...(this.finalTranslations || {}),
|
|
6328
|
+
...customTranslations
|
|
6329
|
+
};
|
|
6330
|
+
this.translationService = new TranslationService(mergedTranslations);
|
|
6292
6331
|
this.sdkService = new SdkService();
|
|
6293
6332
|
}
|
|
6294
6333
|
render() {
|
|
@@ -6297,7 +6336,7 @@ const DocumentDetector = class {
|
|
|
6297
6336
|
}, onFeedback: (ev) => {
|
|
6298
6337
|
this.feedbackEl.show(ev.detail);
|
|
6299
6338
|
this.feedback.emit(ev.detail);
|
|
6300
|
-
}, onScanSuccess: (ev) => this.scanSuccess.emit(ev.detail), onReady: (ev) => this.ready.emit(ev.detail), onCameraScanStarted: (ev) => this.cameraScanStarted.emit(ev.detail), onImageScanStarted: (ev) => this.imageScanStarted.emit(ev.detail), onScanError: (ev) => this.scanError.emit(ev.detail), onScanAborted: (ev) => this.scanAborted.emit(ev.detail) })), h("mb-feedback", { dir: this.hostEl.getAttribute("dir"), visible: !this.hideFeedback, ref: (el) => (this.feedbackEl = el) }))));
|
|
6339
|
+
}, onScanSuccess: (ev) => this.scanSuccess.emit(ev.detail), onReady: (ev) => this.ready.emit(ev.detail), onCameraScanStarted: (ev) => this.cameraScanStarted.emit(ev.detail), onImageScanStarted: (ev) => this.imageScanStarted.emit(ev.detail), onScanError: (ev) => this.scanError.emit(ev.detail), onScanAborted: (ev) => this.scanAborted.emit(ev.detail), onStatus: (ev) => this.status.emit(ev.detail) })), h("mb-feedback", { dir: this.hostEl.getAttribute("dir"), visible: !this.hideFeedback, ref: (el) => (this.feedbackEl = el) }))));
|
|
6301
6340
|
}
|
|
6302
6341
|
get hostEl() { return getElement(this); }
|
|
6303
6342
|
static get watchers() { return {
|
|
@@ -6945,6 +6984,7 @@ const MbComponent = class {
|
|
|
6945
6984
|
this.imageScanStarted = createEvent(this, "imageScanStarted", 7);
|
|
6946
6985
|
this.scanAborted = createEvent(this, "scanAborted", 7);
|
|
6947
6986
|
this.setIsCameraActive = createEvent(this, "setIsCameraActive", 7);
|
|
6987
|
+
this.status = createEvent(this, "status", 7);
|
|
6948
6988
|
this.screens = {
|
|
6949
6989
|
action: null,
|
|
6950
6990
|
error: null,
|
|
@@ -7334,9 +7374,11 @@ const MbComponent = class {
|
|
|
7334
7374
|
break;
|
|
7335
7375
|
case RecognitionStatus.DetectionStatusFail:
|
|
7336
7376
|
this.cameraExperience.setState(CameraExperienceState.Default, this.isBackSide);
|
|
7377
|
+
this.status.emit(StatusDocumentDetector.DOCUMENT_NOT_FOUND);
|
|
7337
7378
|
break;
|
|
7338
7379
|
case RecognitionStatus.DetectionStatusSuccess:
|
|
7339
7380
|
this.detectionSuccessLock = true;
|
|
7381
|
+
this.status.emit(StatusDocumentDetector.DOCUMENT_DETECTED);
|
|
7340
7382
|
window.setTimeout(() => {
|
|
7341
7383
|
if (this.detectionSuccessLock) {
|
|
7342
7384
|
this.cameraExperience.setState(CameraExperienceState.Detection);
|
|
@@ -7480,6 +7522,8 @@ const MbComponent = class {
|
|
|
7480
7522
|
break;
|
|
7481
7523
|
// handle flipping of other documents
|
|
7482
7524
|
case RecognitionStatus.OnFirstSideResult:
|
|
7525
|
+
this.status.emit(StatusDocumentDetector.CHANGE_SIDE);
|
|
7526
|
+
this.status.emit(StatusDocumentDetector.BACK_SIDE_DETECTION);
|
|
7483
7527
|
this.sdkService.videoRecognizer.pauseRecognition();
|
|
7484
7528
|
window.setTimeout(async () => {
|
|
7485
7529
|
if (this.areHelpScreensOpen) {
|