npm - @jaak.ai/stamps - Versions diffs - 1.0.0-dev.8 → 1.0.0-dev.9 - Mend

@jaak.ai/stamps 1.0.0-dev.8 → 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.

Files changed (8) hide show

package/README.md +327 -240
package/dist/cjs/document-detector_19.cjs.entry.js +1 -1
package/dist/collection/components/document-detector/document-detector.css +2 -0
package/dist/esm/document-detector_19.entry.js +1 -1
package/dist/stamps/p-f4015454.entry.js +9 -0
package/dist/stamps/stamps.esm.js +1 -1
package/package.json +1 -1
package/dist/stamps/p-66d9fb33.entry.js +0 -9

package/README.md CHANGED Viewed

@@ -3,112 +3,83 @@
 ![Versión NPM](https://img.shields.io/npm/v/@jaak.ai/stamps)
 ![Licencia](https://img.shields.io/npm/l/@jaak.ai/stamps)
-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.
-## Características
-- Escaneo e identificación de documentos con alta precisión
-- Funciona tanto con cámara como con carga de imágenes
-- Interfaz y comportamiento personalizables
-- Eventos para una integración completa con el flujo de tu aplicación
-- Compatibilidad con múltiples navegadores
-- Paquete ligero
 ## Instalación
 ```bash
 npm install @jaak.ai/stamps
 ```
-## Uso
-### Integración Básica
+## Uso Básico
-#### HTML
+### HTML
 ```html
 <!DOCTYPE html>
-<html lang="es">
+<html>
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta charset="utf-8">
   <title>Ejemplo de Detector de Documentos</title>
-  <script type="module" src="https://unpkg.com/@jaak.ai/stamps/dist/stamps/stamps.esm.js"></script>
-  <script nomodule src="https://unpkg.com/@jaak.ai/stamps/dist/stamps/stamps.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@jaak.ai/stamps/dist/stamps/stamps.esm.js"></script>
+  <script nomodule src="https://cdn.jsdelivr.net/npm/@jaak.ai/stamps/dist/stamps/stamps.js"></script>
 </head>
 <body>
   <document-detector
-    license-key="TU_CLAVE_DE_LICENCIA"
-    engine-location="https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0"
-    worker-location="https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0/BlinkIDWasmSDK.worker.min.js">
+    license-key="TU_CLAVE_DE_LICENCIA">
   </document-detector>
   <script>
     const detector = document.querySelector('document-detector');
-    detector.addEventListener('ready', (ev) => {
-      console.log('El detector de documentos está listo');
-    });
-    detector.addEventListener('scanSuccess', (ev) => {
-      console.log('Escaneo completado con éxito', ev.detail);
+    // Escuchar los eventos emitidos directamente por el componente
+    detector.addEventListener('status', (ev) => {
+      console.log('Estado del detector:', ev.detail);
     });
-    detector.addEventListener('scanError', (ev) => {
-      console.error('Error de escaneo', ev.detail);
+    detector.addEventListener('results', (ev) => {
+      console.log('Resultados del escaneo:', ev.detail);
     });
-    detector.addEventListener('fatalError', (ev) => {
-      console.error('Error fatal', ev.detail);
-    });
+    // Iniciar el escaneo por cámara cuando el componente esté listo
+    setTimeout(() => {
+      detector.startCameraScan();
+    }, 1000);
   </script>
 </body>
 </html>
 ```
-#### Frameworks de JavaScript
-##### React
+### React
 ```jsx
 import React, { useEffect, useRef } from 'react';
-import { defineCustomElements } from '@jaak.ai/stamps/loader';
+import '@jaak.ai/stamps';
-// Registrar los componentes web
-defineCustomElements();
-function ComponenteEscánerDocumento() {
+function DocumentDetectorComponent() {
   const detectorRef = useRef(null);
   useEffect(() => {
     const detector = detectorRef.current;
-    const handleReady = (ev) => {
-      console.log('El detector de documentos está listo');
-    };
-    const handleScanSuccess = (ev) => {
-      console.log('Escaneo completado con éxito', ev.detail);
+    // Escuchar los eventos emitidos directamente por el componente
+    const handleStatus = (ev) => {
+      console.log('Estado del detector:', ev.detail);
     };
-    const handleScanError = (ev) => {
-      console.error('Error de escaneo', ev.detail);
+    const handleResults = (ev) => {
+      console.log('Resultados del escaneo:', ev.detail);
     };
-    const handleFatalError = (ev) => {
-      console.error('Error fatal', ev.detail);
-    };
+    detector.addEventListener('status', handleStatus);
+    detector.addEventListener('results', handleResults);
-    detector.addEventListener('ready', handleReady);
-    detector.addEventListener('scanSuccess', handleScanSuccess);
-    detector.addEventListener('scanError', handleScanError);
-    detector.addEventListener('fatalError', handleFatalError);
+    // Iniciar el escaneo por cámara cuando el componente esté listo
+    setTimeout(() => {
+      detector.startCameraScan();
+    }, 1000);
     return () => {
-      detector.removeEventListener('ready', handleReady);
-      detector.removeEventListener('scanSuccess', handleScanSuccess);
-      detector.removeEventListener('scanError', handleScanError);
-      detector.removeEventListener('fatalError', handleFatalError);
+      detector.removeEventListener('status', handleStatus);
+      detector.removeEventListener('results', handleResults);
     };
   }, []);
@@ -116,270 +87,386 @@ function ComponenteEscánerDocumento() {
     <document-detector
       ref={detectorRef}
       license-key="TU_CLAVE_DE_LICENCIA"
-      engine-location="https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0"
-      worker-location="https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0/BlinkIDWasmSDK.worker.min.js">
-    </document-detector>
+    />
   );
 }
-export default ComponenteEscánerDocumento;
+export default DocumentDetectorComponent;
 ```
-##### Vue.js
-```javascript
-// main.js
-import { defineCustomElements } from '@jaak.ai/stamps/loader';
-// Registrar los componentes web
-defineCustomElements();
-```
+### Vue.js
 ```vue
-<!-- EscánerDocumento.vue -->
 <template>
   <document-detector
     ref="detector"
     :license-key="licenseKey"
-    :engine-location="engineLocation"
-    :worker-location="workerLocation">
-  </document-detector>
+  />
 </template>
 <script>
+import '@jaak.ai/stamps';
 export default {
-  name: 'EscánerDocumento',
+  name: 'DocumentDetectorComponent',
   data() {
     return {
-      licenseKey: 'TU_CLAVE_DE_LICENCIA',
-      engineLocation: 'https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0',
-      workerLocation: 'https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0/BlinkIDWasmSDK.worker.min.js'
+      licenseKey: 'TU_CLAVE_DE_LICENCIA'
     };
   },
+  methods: {
+    // Métodos para manejar los eventos emitidos directamente por el componente
+    handleStatus(ev) {
+      console.log('Estado del detector:', ev.detail);
+    },
+    handleResults(ev) {
+      console.log('Resultados del escaneo:', ev.detail);
+    }
+  },
   mounted() {
     const detector = this.$refs.detector;
-    detector.addEventListener('ready', this.handleReady);
-    detector.addEventListener('scanSuccess', this.handleScanSuccess);
-    detector.addEventListener('scanError', this.handleScanError);
-    detector.addEventListener('fatalError', this.handleFatalError);
+    // Escuchar los eventos emitidos directamente por el componente
+    detector.addEventListener('status', this.handleStatus);
+    detector.addEventListener('results', this.handleResults);
+    // Iniciar el escaneo por cámara cuando el componente esté listo
+    setTimeout(() => {
+      detector.startCameraScan();
+    }, 1000);
   },
   beforeUnmount() {
     const detector = this.$refs.detector;
-    detector.removeEventListener('ready', this.handleReady);
-    detector.removeEventListener('scanSuccess', this.handleScanSuccess);
-    detector.removeEventListener('scanError', this.handleScanError);
-    detector.removeEventListener('fatalError', this.handleFatalError);
-  },
-  methods: {
-    handleReady(ev) {
-      console.log('El detector de documentos está listo');
-    },
-    handleScanSuccess(ev) {
-      console.log('Escaneo completado con éxito', ev.detail);
-      this.$emit('scan-success', ev.detail);
-    },
-    handleScanError(ev) {
-      console.error('Error de escaneo', ev.detail);
-      this.$emit('scan-error', ev.detail);
-    },
-    handleFatalError(ev) {
-      console.error('Error fatal', ev.detail);
-      this.$emit('fatal-error', ev.detail);
-    }
+    // Eliminar los event listeners
+    detector.removeEventListener('status', this.handleStatus);
+    detector.removeEventListener('results', this.handleResults);
   }
 };
 </script>
 ```
-##### Angular
-```typescript
-// app.module.ts
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent } from './app.component';
-// Importar el cargador
-import { defineCustomElements } from '@jaak.ai/stamps/loader';
-// Registrar los componentes web
-defineCustomElements();
-@NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule],
-  providers: [],
-  bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA] // Necesario para usar componentes web
-})
-export class AppModule {}
-```
+### Angular
 ```typescript
-// escaner-documento.component.ts
-import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+// Asegúrate de configurar el esquema CUSTOM_ELEMENTS_SCHEMA en tu módulo
+import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
+import '@jaak.ai/stamps';
 @Component({
-  selector: 'app-escaner-documento',
+  selector: 'app-document-detector',
   template: `
     <document-detector
       #detector
-      license-key="TU_CLAVE_DE_LICENCIA"
-      engine-location="https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0"
-      worker-location="https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0/BlinkIDWasmSDK.worker.min.js">
-    </document-detector>
+      [attr.license-key]="licenseKey"
+    ></document-detector>
   `
 })
-export class EscanerDocumentoComponent implements OnInit, OnDestroy {
+export class DocumentDetectorComponent implements AfterViewInit, OnDestroy {
   @ViewChild('detector') detectorRef: ElementRef;
-  @Output() ready = new EventEmitter<any>();
-  @Output() scanSuccess = new EventEmitter<any>();
-  @Output() scanError = new EventEmitter<any>();
-  @Output() fatalError = new EventEmitter<any>();
+  licenseKey = 'TU_CLAVE_DE_LICENCIA';
-  ngOnInit() {}
+  // Métodos para manejar los eventos emitidos directamente por el componente
+  handleStatus(ev) {
+    console.log('Estado del detector:', ev.detail);
+  }
+  handleResults(ev) {
+    console.log('Resultados del escaneo:', ev.detail);
+  }
   ngAfterViewInit() {
     const detector = this.detectorRef.nativeElement;
-    detector.addEventListener('ready', this.handleReady.bind(this));
-    detector.addEventListener('scanSuccess', this.handleScanSuccess.bind(this));
-    detector.addEventListener('scanError', this.handleScanError.bind(this));
-    detector.addEventListener('fatalError', this.handleFatalError.bind(this));
+    // Escuchar los eventos emitidos directamente por el componente
+    detector.addEventListener('status', this.handleStatus.bind(this));
+    detector.addEventListener('results', this.handleResults.bind(this));
+    // Iniciar el escaneo por cámara cuando el componente esté listo
+    setTimeout(() => {
+      detector.startCameraScan();
+    }, 1000);
   }
   ngOnDestroy() {
     const detector = this.detectorRef.nativeElement;
-    detector.removeEventListener('ready', this.handleReady.bind(this));
-    detector.removeEventListener('scanSuccess', this.handleScanSuccess.bind(this));
-    detector.removeEventListener('scanError', this.handleScanError.bind(this));
-    detector.removeEventListener('fatalError', this.handleFatalError.bind(this));
+    // Eliminar los event listeners
+    detector.removeEventListener('status', this.handleStatus.bind(this));
+    detector.removeEventListener('results', this.handleResults.bind(this));
   }
+}
+```
+### Stencil.js
-  handleReady(ev) {
-    console.log('El detector de documentos está listo');
-    this.ready.emit(ev.detail);
+```tsx
+import { Component, h, State, Listen, Element } from '@stencil/core';
+import '@jaak.ai/stamps';
+@Component({
+  tag: 'app-document-detector',
+  styleUrl: 'app-document-detector.css',
+  shadow: true
+})
+export class AppDocumentDetector {
+  @Element() el: HTMLElement;
+  @State() results: any = null;
+  @State() status: string = '';
+  // Escuchar los eventos emitidos directamente por el componente
+  @Listen('status')
+  handleStatus(ev: CustomEvent) {
+    this.status = ev.detail;
+    console.log('Estado del detector:', this.status);
   }
-  handleScanSuccess(ev) {
-    console.log('Escaneo completado con éxito', ev.detail);
-    this.scanSuccess.emit(ev.detail);
+  @Listen('results')
+  handleResults(ev: CustomEvent) {
+    this.results = ev.detail;
+    console.log('Resultados del escaneo:', this.results);
   }
-  handleScanError(ev) {
-    console.error('Error de escaneo', ev.detail);
-    this.scanError.emit(ev.detail);
+  componentDidLoad() {
+    // Iniciar el escaneo por cámara cuando el componente esté listo
+    const detector = this.el.shadowRoot.querySelector('document-detector');
+    setTimeout(() => {
+      detector.startCameraScan();
+    }, 1000);
   }
-  handleFatalError(ev) {
-    console.error('Error fatal', ev.detail);
-    this.fatalError.emit(ev.detail);
+  render() {
+    return (
+      <div>
+        <document-detector
+          license-key="TU_CLAVE_DE_LICENCIA"
+        />
+      </div>
+    );
   }
 }
 ```
-## Referencia de API
+## Componente Document-Detector
-### Propiedades
+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.
+### Descripción General
+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.
+### Características Principales
+- **Escaneo en tiempo real**: Captura documentos de identidad a través de la cámara del dispositivo.
+- **Procesamiento de imágenes**: Permite cargar imágenes de documentos para su análisis.
+- **Soporte para documentos de doble cara**: Puede procesar ambos lados de documentos como identificaciones o licencias de conducir.
+- **Extracción de datos**: Obtiene automáticamente información como nombre, fecha de nacimiento, número de documento, etc.
+- **Captura de imágenes**: Guarda imágenes del documento, rostro y firma cuando están disponibles.
+- **Interfaz personalizable**: Permite adaptar la apariencia y comportamiento a las necesidades de tu aplicación.
+- **Eventos detallados**: Proporciona eventos para cada etapa del proceso de escaneo.
+### Ciclo de Vida del Componente
+1. **Inicialización**: El componente carga el SDK y prepara los reconocedores.
+2. **Detección**: Busca un documento en el campo visual de la cámara o en la imagen proporcionada.
+3. **Análisis**: Procesa el documento detectado para extraer la información.
+4. **Resultados**: Emite los datos extraídos y las imágenes capturadas.
+### Casos de Uso Comunes
+- **Verificación de identidad**: Para procesos de onboarding digital o KYC (Know Your Customer).
+- **Registro de usuarios**: Automatización de la captura de datos personales.
+- **Check-in digital**: En hoteles, eventos o instalaciones que requieren identificación.
+- **Servicios financieros**: Para apertura de cuentas o solicitudes de crédito.
+- **Servicios de salud**: Registro de pacientes y verificación de seguros.
+### Ejemplo de Implementación Básica
+```html
+<document-detector
+  license-key="TU_CLAVE_DE_LICENCIA">
+</document-detector>
+<!-- O usando la propiedad config -->
+<document-detector
+  config='{"key": "TU_CLAVE_DE_LICENCIA"}'>
+</document-detector>
+```
+### Manejo de Eventos
-| Propiedad               | Tipo                     | Valor por defecto                               | Descripción                                        |
-|-------------------------|--------------------------|------------------------------------------------|---------------------------------------------------|
-| `license-key`           | string                   | -                                              | **Requerido** Clave de licencia                    |
-| `engine-location`       | string                   | "https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0" | Ruta a los archivos del motor WASM  |
-| `worker-location`       | string                   | "https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0/BlinkIDWasmSDK.worker.min.js" | Ruta al archivo worker |
-| `allow-hello-message`   | boolean                  | false                                          | Habilitar mensaje de Hello a la API                |
-| `wasm-type`             | string                   | "ADVANCE"                                      | Tipo de WASM a utilizar (ADVANCE, BASIC, etc.)     |
-| `blink-id-variant`      | string                   | "lightweight"                                  | Variante a utilizar                                |
-| `raw-recognizers`       | string                   | -                                              | String JSON de reconocedores                       |
-| `recognizers`           | array                    | ['BlinkIdMultiSideRecognizer']                 | Array de nombres de reconocedores a utilizar       |
-| `recognizer-options`    | object                   | *Ver abajo*                                    | Opciones de configuración para reconocedores       |
-| `recognition-timeout`   | number                   | -                                              | Tiempo límite para reconocimiento en milisegundos  |
-| `recognition-pause-timeout` | number               | 3800                                           | Tiempo de pausa entre reconocimientos              |
-| `enable-drag`           | boolean                  | false                                          | Permitir arrastrar y soltar imágenes               |
-| `hide-feedback`         | boolean                  | true                                           | Ocultar mensajes de retroalimentación              |
-| `hide-loading-and-error-ui` | boolean              | false                                          | Ocultar elementos UI de carga y error              |
-| `scan-from-camera`      | boolean                  | true                                           | Permitir escaneo desde cámara                      |
-| `scan-from-image`       | boolean                  | false                                          | Permitir escaneo desde carga de imagen             |
-| `thorough-scan-from-image` | boolean               | false                                          | Realizar escaneo exhaustivo para imágenes          |
-| `gallery-overlay-type`  | "FULLSCREEN" \| "INLINE" | "INLINE"                                       | Tipo de visualización del overlay de galería       |
-| `gallery-drop-type`     | "FULLSCREEN" \| "INLINE" | "INLINE"                                       | Tipo de visualización del área de drop de galería  |
-| `show-action-labels`    | boolean                  | false                                          | Mostrar etiquetas de texto para acciones           |
-| `show-modal-windows`    | boolean                  | false                                          | Mostrar ventanas modales para mensajes             |
-| `show-scanning-line`    | boolean                  | -                                              | Mostrar animación de línea de escaneo              |
-Opciones por defecto del reconocedor:
 ```javascript
-{
-  BlinkIdMultiSideRecognizer: {
-    returnEncodedFullDocumentImage: true,
-    returnEncodedFaceImage: true,
-    returnEncodedSignatureImage: true,
-    fullDocumentImageExtensionFactors: {
-      upFactor: 0.1,
-      downFactor: 0.1,
-      leftFactor: 0.1,
-      rightFactor: 0.1
-    },
-    fullDocumentImageDpi: 300
+const detector = document.querySelector('document-detector');
+// Escuchar el evento de cambio de estado
+detector.addEventListener('status', (event) => {
+  console.log('Estado del detector:', event.detail);
+  // Puedes reaccionar a diferentes estados
+  switch(event.detail) {
+    case 'INITIALIZING':
+      console.log('El detector se está inicializando');
+      break;
+    case 'READY':
+      console.log('El detector está listo para escanear');
+      break;
+    case 'RECORDING':
+      console.log('La cámara está activa y grabando');
+      break;
+    case 'RESULTS_SUCCESS':
+      console.log('Se han obtenido resultados exitosamente');
+      break;
+    case 'ERROR':
+      console.log('Ha ocurrido un error en el detector');
+      break;
   }
+});
+// Escuchar el evento de resultados
+detector.addEventListener('results', (event) => {
+  const resultados = event.detail;
+  console.log('Datos del documento:', resultados);
+  // Acceder a imágenes del documento (si están disponibles)
+  if (resultados.generalData && resultados.generalData.documentImage) {
+    const imagenFrente = resultados.generalData.documentImage.front;
+    const imagenReverso = resultados.generalData.documentImage.back;
+    const imagenRostro = resultados.generalData.documentImage.face;
+    // Hacer algo con las imágenes...
+  }
+});
+```
+### Control Programático
+```javascript
+const detector = document.querySelector('document-detector');
+// Iniciar escaneo por cámara
+function iniciarEscaneoCamara() {
+  detector.startCameraScan();
+}
+// Iniciar escaneo desde archivo de imagen
+function escanearDesdeImagen(archivo) {
+  detector.startImageScan(archivo);
+}
+// Reiniciar el componente (útil cuando se necesita resetear el estado)
+function reiniciarEscaneo() {
+  detector.restartComponent();
+}
+// Ejemplo de uso con un input de archivo
+document.getElementById('inputImagen').addEventListener('change', (event) => {
+  if (event.target.files && event.target.files[0]) {
+    escanearDesdeImagen(event.target.files[0]);
+  }
+});
+```
+### Personalización de la Apariencia
+El componente puede personalizarse mediante CSS utilizando las partes expuestas a través de Shadow DOM:
+```css
+document-detector::part(mb-camera-video) {
+  border-radius: 16px;
+  border: 2px solid #3498db;
 }
 ```
+### Consideraciones Importantes
+- **Permisos de cámara**: El navegador solicitará permiso para acceder a la cámara del dispositivo.
+- **HTTPS**: Para usar la funcionalidad de cámara, tu aplicación debe servirse a través de HTTPS.
+- **Compatibilidad**: Verifica la compatibilidad con navegadores móviles si tu aplicación está orientada a dispositivos móviles.
+- **Licencia**: Se requiere una clave de licencia válida para el funcionamiento del componente.
+## Referencia de API
+### Propiedades
+> **Nota**: Solo las siguientes propiedades pueden ser configuradas directamente en el componente.
+| Propiedad                | Tipo                                      | Descripción                                |
+|--------------------------|-------------------------------------------|--------------------------------------------|
+| `license-key`            | string                                    | Clave de licencia para el SDK              |
+| `config`                 | { key: string }                           | Configuración del componente (incluye la clave de licencia) |
 ### Eventos
-| Nombre del Evento    | Descripción                                      | Detalle del Evento                              |
-|----------------------|--------------------------------------------------|--------------------------------------------------|
-| `ready`              | Emitido cuando el componente está listo para escanear | Objeto `EventReady` con instancia del SDK       |
-| `scanSuccess`        | Emitido al escanear un documento con éxito       | Objeto `EventScanSuccess` con resultados del escaneo |
-| `scanError`          | Emitido cuando ocurre un error durante el escaneo | Objeto `EventScanError` con detalles del error   |
-| `fatalError`         | Emitido cuando ocurre un error fatal             | Objeto `SDKError` con detalles del error         |
-| `cameraScanStarted`  | Emitido cuando comienza el escaneo con cámara    | null                                             |
-| `imageScanStarted`   | Emitido cuando comienza el escaneo de imagen     | null                                             |
+> **Nota**: Solo los siguientes eventos son emitidos directamente por el componente.
+| Evento               | Detalle                                   | Descripción                                |
+|----------------------|-------------------------------------------|--------------------------------------------|
+| `status`             | StatusDocumentDetector                    | Cambio de estado del detector              |
+| `results`            | any                                       | Resultados del escaneo                     |
 ### Métodos
-| Método                  | Parámetros                                    | Tipo de Retorno      | Descripción                                |
-|-------------------------|-----------------------------------------------|----------------------|--------------------------------------------|
-| `setUiState`            | state: "ERROR" \| "LOADING" \| "NONE" \| "SUCCESS" | Promise<any>         | Establecer el estado UI del componente      |
-| `setUiMessage`          | state: "FEEDBACK_ERROR" \| "FEEDBACK_INFO" \| "FEEDBACK_OK", message: string | Promise<any> | Establecer un mensaje UI |
+> **Nota**: Solo los siguientes métodos pueden ser llamados directamente en el componente.
+| Método                  | Parámetros                                 | Retorno              | Descripción                               |
+|-------------------------|--------------------------------------------|--------------------- |-------------------------------------------|
+| `setUiState`            | state: "ERROR" \| "LOADING" \| "NONE" \| "SUCCESS" | Promise<void>         | Establecer el estado UI del componente      |
+| `startCameraScan`       | Ninguno                                       | Promise<void>        | Inicia el escaneo utilizando la cámara     |
+| `startImageScan`        | file: File                                    | Promise<void>        | Inicia el escaneo utilizando una imagen    |
+| `startMultiSideImageScan` | firstFile: File, secondFile: File           | Promise<void>        | Inicia el escaneo utilizando dos imágenes para documentos de doble cara |
+| `setUiMessage`          | state: "FEEDBACK_ERROR" \| "FEEDBACK_INFO" \| "FEEDBACK_OK", message: string | Promise<void> | Establecer un mensaje UI |
 | `getProductIntegrationInfo` | Ninguno                                   | Promise<ProductIntegrationInfo> | Obtener información de integración del producto |
+| `restartComponent`      | Ninguno                                       | Promise<void>        | Reinicia el componente y vuelve a iniciar el escaneo por cámara |
 ## Tipos de Objetos de Eventos
-### EventReady
+> **Nota**: A continuación se describen los tipos de datos para los eventos emitidos por el componente.
-```typescript
-{
-  sdk: WasmSDK; // Instancia del SDK
-}
-```
-### EventScanSuccess
+### StatusDocumentDetector
 ```typescript
-{
-  recognizer: string; // Nombre del reconocedor que produjo el resultado
-  recognizerResult: any; // El objeto resultado del reconocedor
-  resultDocument: any; // Datos del documento procesado
-  resultImages: any; // Imágenes resultantes (documento, cara, etc.)
+enum StatusDocumentDetector {
+  INITIALIZING = "INITIALIZING",
+  READY = "READY",
+  RECORDING = "RECORDING",
+  RUNNING = "RUNNING",
+  RESULTS_SUCCESS = "RESULTS_SUCCESS",
+  DETECTION_FAILED = "DETECTION_FAILED",
+  ERROR = "ERROR"
 }
 ```
-### EventScanError
+### Resultados (results)
+El evento `results` emite un objeto con los datos extraídos del documento escaneado, que incluye:
 ```typescript
-{
-  code: Code; // Código de error
-  fatal: boolean; // Si el error es fatal
-  message: string; // Mensaje de error
-  recognizerName: string; // Nombre del reconocedor que produjo el error
-  details?: any; // Detalles adicionales del error si están disponibles
+interface DocumentData {
+  generalData: {
+    type: string;
+    nationality: string;
+    name: string;
+    surname: string;
+    address: string;
+    birthDate: string;
+    gender: string;
+    documentImage: {
+      frontFull: string; // Imagen base64
+      backFull: string; // Imagen base64
+      front: string; // Imagen base64
+      back: string; // Imagen base64
+      signature: string; // Imagen base64
+      face: string; // Imagen base64
+    }
+  };
+  mechanicalReadingZone: string;
+  specificData: Array<{
+    label: string;
+    value: string;
+  }>;
 }
 ```
 ## Licencia
-MIT
+MIT