npm - @jaak.ai/stamps - Versions diffs - 1.0.0 → 2.0.0-beta.1 - Mend

@jaak.ai/stamps 1.0.0 → 2.0.0-beta.1

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 (162) hide show

package/README.md CHANGED Viewed

@@ -1,533 +1,552 @@
-# @jaak.ai/stamps
+# Jaak Stamps - Document Detector Web Component
-![Versión NPM](https://img.shields.io/npm/v/@jaak.ai/stamps)
-![Licencia](https://img.shields.io/npm/l/@jaak.ai/stamps)
+[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
+Un componente web para la detección y captura automática de documentos de identificación usando visión artificial y redes neuronales.
+## Características
+- 📷 **Detección automática** de documentos de identificación en tiempo real
+- 🎯 **Guía visual** para posicionamiento óptimo del documento
+- 📋 **Captura doble cara** (frente y reverso) con opción de omitir reverso
+- 🖼 **Doble salida** para cada lado: imagen completa y recorte del documento
+- 🔧 **API programática** para control total del proceso
+- 📱 **Responsive** y compatible con dispositivos móviles
+- ⚡ **Optimización automática** usando ONNX Runtime Web
 ## Instalación
+### NPM
 ```bash
 npm install @jaak.ai/stamps
 ```
+### Yarn
+```bash
+yarn add @jaak.ai/stamps
+```
+### CDN
+```html
+<script type="module" src="https://unpkg.com/@jaak.ai/stamps/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js"></script>
+```
 ## Uso Básico
-### HTML
+### HTML Vanilla
 ```html
 <!DOCTYPE html>
 <html>
 <head>
-  <meta charset="utf-8">
-  <title>Ejemplo de Detector de Documentos</title>
-  <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>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script type="module" src="https://unpkg.com/@jaak.ai/stamps/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js"></script>
 </head>
 <body>
-  <document-detector
-    license-key="TU_CLAVE_DE_LICENCIA">
-  </document-detector>
-  <script>
-    const detector = document.querySelector('document-detector');
-    // Escuchar los eventos emitidos directamente por el componente
-    detector.addEventListener('status', (ev) => {
-      console.log('Estado del detector:', ev.detail);
-    });
-    detector.addEventListener('results', (ev) => {
-      console.log('Resultados del escaneo:', ev.detail);
-    });
-    // Iniciar el escaneo por cámara cuando el componente esté listo
-    setTimeout(() => {
-      detector.startCameraScan();
-    }, 1000);
-  </script>
+    <jaak-stamps id="detector" debug="false"></jaak-stamps>
+    <button onclick="startCapture()">Iniciar Captura</button>
+    <button onclick="stopCapture()">Detener</button>
+    <button onclick="resetCapture()">Reiniciar</button>
+    <script>
+        const detector = document.getElementById('detector');
+        // Escuchar evento de captura completada
+        detector.addEventListener('captureCompleted', (event) => {
+            console.log('Captura completada:', event.detail);
+            // event.detail contiene las imágenes capturadas
+        });
+        // Escuchar evento de componente listo
+        detector.addEventListener('isReady', (event) => {
+            console.log('Componente listo:', event.detail);
+            // event.detail indica si el componente está listo (true/false)
+        });
+        function startCapture() {
+            detector.startCapture();
+        }
+        function stopCapture() {
+            detector.stopCapture();
+        }
+        function resetCapture() {
+            detector.resetCapture();
+        }
+        // Precargar el modelo (opcional - mejora el rendimiento)
+        async function preloadModel() {
+            try {
+                const result = await detector.preloadModel();
+                console.log('Modelo precargado:', result);
+            } catch (error) {
+                console.error('Error al precargar:', error);
+            }
+        }
+        // Obtener imágenes después de la captura
+        async function getImages() {
+            try {
+                const images = await detector.getCapturedImages();
+                console.log('Imágenes capturadas:', images);
+            } catch (error) {
+                console.error('Error:', error.message);
+            }
+        }
+    </script>
 </body>
 </html>
 ```
-### React
-```jsx
-import React, { useEffect, useRef } from 'react';
-import '@jaak.ai/stamps';
-function DocumentDetectorComponent() {
-  const detectorRef = useRef(null);
-  useEffect(() => {
-    const detector = detectorRef.current;
-    // Escuchar los eventos emitidos directamente por el componente
-    const handleStatus = (ev) => {
-      console.log('Estado del detector:', ev.detail);
-    };
-    const handleResults = (ev) => {
-      console.log('Resultados del escaneo:', ev.detail);
-    };
-    detector.addEventListener('status', handleStatus);
-    detector.addEventListener('results', handleResults);
-    // Iniciar el escaneo por cámara cuando el componente esté listo
-    setTimeout(() => {
-      detector.startCameraScan();
-    }, 1000);
-    return () => {
-      detector.removeEventListener('status', handleStatus);
-      detector.removeEventListener('results', handleResults);
-    };
-  }, []);
-  return (
-    <document-detector
-      ref={detectorRef}
-      license-key="TU_CLAVE_DE_LICENCIA"
-    />
-  );
-}
+### Angular
-export default DocumentDetectorComponent;
+#### 1. Instalar el componente
+```bash
+npm install @jaak.ai/stamps
 ```
-### Vue.js
-```vue
-<template>
-  <document-detector
-    ref="detector"
-    :license-key="licenseKey"
-  />
-</template>
-<script>
-import '@jaak.ai/stamps';
-export default {
-  name: 'DocumentDetectorComponent',
-  data() {
-    return {
-      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;
-    // 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;
-    // Eliminar los event listeners
-    detector.removeEventListener('status', this.handleStatus);
-    detector.removeEventListener('results', this.handleResults);
-  }
-};
-</script>
+#### 2. Configurar el módulo (app.module.ts)
+```typescript
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+// Importar el componente web
+import '@jaak.ai/stamps/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js';
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  providers: [],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA] // Permitir elementos personalizados
+})
+export class AppModule { }
 ```
-### Angular
+#### 3. Usar en el componente
 ```typescript
-// 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';
+// app.component.ts
+import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
 @Component({
-  selector: 'app-document-detector',
+  selector: 'app-root',
   template: `
-    <document-detector
-      #detector
-      [attr.license-key]="licenseKey"
-    ></document-detector>
-  `
+    <div class="container">
+      <h1>Detector de Documentos</h1>
+      <jaak-stamps
+        #detector
+        [debug]="false"
+        (captureCompleted)="onCaptureCompleted($event)"
+        (isReady)="onComponentReady($event)">
+      </jaak-stamps>
+      <div class="controls">
+        <button (click)="preloadModel()">Precargar Modelo</button>
+        <button (click)="startCapture()">Iniciar Captura</button>
+        <button (click)="stopCapture()">Detener</button>
+        <button (click)="resetCapture()">Reiniciar</button>
+        <button (click)="getImages()" [disabled]="!isCompleted">Obtener Imágenes</button>
+      </div>
+      <div *ngIf="capturedData" class="results">
+        <h3>Imágenes Capturadas:</h3>
+        <p>Total de imágenes: {{ capturedData.metadata.totalImages }}</p>
+        <img *ngIf="capturedData.front.cropped" [src]="capturedData.front.cropped" alt="Frente">
+        <img *ngIf="capturedData.back.cropped" [src]="capturedData.back.cropped" alt="Reverso">
+      </div>
+    </div>
+  `,
+  styles: [`
+    .container { max-width: 800px; margin: 0 auto; padding: 20px; }
+    .controls { margin: 20px 0; }
+    .controls button { margin: 0 10px; padding: 10px 20px; }
+    .results img { max-width: 300px; margin: 10px; border: 1px solid #ccc; }
+  `]
 })
-export class DocumentDetectorComponent implements AfterViewInit, OnDestroy {
-  @ViewChild('detector') detectorRef: ElementRef;
-  licenseKey = 'TU_CLAVE_DE_LICENCIA';
-  // Métodos para manejar los eventos emitidos directamente por el componente
-  handleStatus(ev) {
-    console.log('Estado del detector:', ev.detail);
+export class AppComponent implements OnInit {
+  @ViewChild('detector', { static: true }) detectorRef!: ElementRef;
+  capturedData: any = null;
+  isCompleted = false;
+  ngOnInit() {
+    // El elemento ya está disponible después de la vista
   }
-  handleResults(ev) {
-    console.log('Resultados del escaneo:', ev.detail);
+  async preloadModel() {
+    try {
+      const result = await this.detectorRef.nativeElement.preloadModel();
+      console.log('Modelo precargado:', result);
+    } catch (error) {
+      console.error('Error al precargar modelo:', error);
+    }
   }
-  ngAfterViewInit() {
-    const detector = this.detectorRef.nativeElement;
-    // 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);
+  async startCapture() {
+    try {
+      await this.detectorRef.nativeElement.startCapture();
+    } catch (error) {
+      console.error('Error al iniciar captura:', error);
+    }
   }
-  ngOnDestroy() {
-    const detector = this.detectorRef.nativeElement;
-    // Eliminar los event listeners
-    detector.removeEventListener('status', this.handleStatus.bind(this));
-    detector.removeEventListener('results', this.handleResults.bind(this));
+  async stopCapture() {
+    await this.detectorRef.nativeElement.stopCapture();
   }
-}
-```
-### Stencil.js
-```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);
+  async resetCapture() {
+    await this.detectorRef.nativeElement.resetCapture();
+    this.capturedData = null;
+    this.isCompleted = false;
   }
-  @Listen('results')
-  handleResults(ev: CustomEvent) {
-    this.results = ev.detail;
-    console.log('Resultados del escaneo:', this.results);
+  async getImages() {
+    try {
+      const images = await this.detectorRef.nativeElement.getCapturedImages();
+      console.log('Imágenes obtenidas:', images);
+    } catch (error) {
+      console.error('Error al obtener imágenes:', error);
+    }
   }
-  componentDidLoad() {
-    // Iniciar el escaneo por cámara cuando el componente esté listo
-    const detector = this.el.shadowRoot.querySelector('document-detector');
-    setTimeout(() => {
-      detector.startCameraScan();
-    }, 1000);
+  onCaptureCompleted(event: any) {
+    console.log('Captura completada en Angular:', event.detail);
+    this.capturedData = event.detail;
+    this.isCompleted = true;
   }
-  render() {
-    return (
-      <div>
-        <document-detector
-          license-key="TU_CLAVE_DE_LICENCIA"
-        />
-      </div>
-    );
+  onComponentReady(event: any) {
+    console.log('Componente listo en Angular:', event.detail);
+    // El componente está listo para iniciar detección
   }
 }
 ```
-## Componente Document-Detector
-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.
-- **Modo dinámico**: Optimiza automáticamente el rendimiento según el dispositivo (escritorio o móvil).
-- **Filtros de calidad ajustables**: Controla la rigurosidad de los filtros de desenfoque y brillo.
-- **Traducciones personalizables**: Permite personalizar todos los mensajes mostrados al usuario.
-- **Capacidad de reinicio**: Facilita reiniciar el componente sin necesidad de recargarlo.
-### 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
+### React
-```html
-<document-detector
-  license-key="TU_CLAVE_DE_LICENCIA">
-</document-detector>
-<!-- O usando la propiedad config con opciones avanzadas -->
-<document-detector
-  config='{
-    "key": "TU_CLAVE_DE_LICENCIA",
-    "dynamicMode": true,
-    "strictMode": true,
-    "translation": {
-      "front": "Escanea el frente de tu documento",
-      "back": "Ahora escanea el reverso",
-      "changeSide": "Voltea el documento",
-      "cameraFeedbackBlur": "El documento está borroso",
-      "cameraFeedbackGlare": "Evita el reflejo en el documento"
-    }
-  }'>
-</document-detector>
+#### 1. Instalar el componente
+```bash
+npm install @jaak.ai/stamps
 ```
-### Manejo de Eventos
-```javascript
-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 'RECORDING':
-      console.log('La cámara está activa y grabando');
-      break;
-    case 'FRONT_SIDE_DETECTION':
-      console.log('Detectando el frente del documento');
-      break;
-    case 'BACK_SIDE_DETECTION':
-      console.log('Detectando el reverso del documento');
-      break;
-    case 'DOCUMENT_DETECTED':
-      console.log('Documento detectado correctamente');
-      break;
-    case 'CHANGE_SIDE':
-      console.log('Es necesario voltear el documento');
-      break;
-    case 'RESULTS_SUCCESS':
-      console.log('Se han obtenido resultados exitosamente');
-      break;
-    case 'RESULTS_EMPTY':
-      console.log('No se encontraron datos en el documento');
-      break;
-    case 'DETECTION_FAILED':
-      console.log('Falló la detección del documento');
-      break;
-    case 'ERROR':
-      console.log('Ha ocurrido un error en el detector');
-      break;
-  }
+#### 2. Crear componente wrapper (opcional pero recomendado)
+```jsx
+// JaakStampsWrapper.jsx
+import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
+// Importar el web component
+import '@jaak.ai/stamps/dist/jaak-stamps-webcomponent/jaak-stamps-webcomponent.esm.js';
+const JaakStampsWrapper = forwardRef(({ debug = false, onCaptureCompleted, onIsReady }, ref) => {
+  const elementRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    preloadModel: () => elementRef.current?.preloadModel(),
+    startCapture: () => elementRef.current?.startCapture(),
+    stopCapture: () => elementRef.current?.stopCapture(),
+    resetCapture: () => elementRef.current?.resetCapture(),
+    getCapturedImages: () => elementRef.current?.getCapturedImages(),
+    getStatus: () => elementRef.current?.getStatus(),
+    skipBackCapture: () => elementRef.current?.skipBackCapture(),
+    isProcessCompleted: () => elementRef.current?.isProcessCompleted()
+  }));
+  useEffect(() => {
+    const element = elementRef.current;
+    const handleCaptureCompleted = (event) => {
+      if (onCaptureCompleted) {
+        onCaptureCompleted(event.detail);
+      }
+    };
+    const handleIsReady = (event) => {
+      if (onIsReady) {
+        onIsReady(event.detail);
+      }
+    };
+    if (element) {
+      element.addEventListener('captureCompleted', handleCaptureCompleted);
+      element.addEventListener('isReady', handleIsReady);
+      return () => {
+        element.removeEventListener('captureCompleted', handleCaptureCompleted);
+        element.removeEventListener('isReady', handleIsReady);
+      };
+    }
+  }, [onCaptureCompleted, onIsReady]);
+  return (
+    <jaak-stamps
+      ref={elementRef}
+      debug={debug}
+    />
+  );
 });
-// 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...
-  }
-});
+export default JaakStampsWrapper;
 ```
-### 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);
-}
+#### 3. Usar en tu aplicación React
+```jsx
+// App.jsx
+import React, { useRef, useState } from 'react';
+import JaakStampsWrapper from './components/JaakStampsWrapper';
-// Reiniciar el componente (útil cuando se necesita resetear el estado)
-function reiniciarEscaneo() {
-  detector.restartComponent();
-  // El método restartComponent reinicia internamente el componente y vuelve a iniciar
-  // el escaneo por cámara automáticamente, sin necesidad de llamar a startCameraScan()
+function App() {
+  const detectorRef = useRef(null);
+  const [capturedData, setCapturedData] = useState(null);
+  const [isCompleted, setIsCompleted] = useState(false);
+  const [status, setStatus] = useState(null);
+  const handleCaptureCompleted = (data) => {
+    console.log('Captura completada:', data);
+    setCapturedData(data);
+    setIsCompleted(true);
+  };
+  const handleIsReady = (isReady) => {
+    console.log('Componente listo:', isReady);
+    // El componente está listo para iniciar detección
+  };
+  const preloadModel = async () => {
+    try {
+      const result = await detectorRef.current?.preloadModel();
+      console.log('Modelo precargado:', result);
+    } catch (error) {
+      console.error('Error al precargar modelo:', error);
+    }
+  };
+  const startCapture = async () => {
+    try {
+      await detectorRef.current?.startCapture();
+    } catch (error) {
+      console.error('Error al iniciar captura:', error);
+    }
+  };
+  const stopCapture = async () => {
+    await detectorRef.current?.stopCapture();
+  };
+  const resetCapture = async () => {
+    await detectorRef.current?.resetCapture();
+    setCapturedData(null);
+    setIsCompleted(false);
+  };
+  const getImages = async () => {
+    try {
+      const images = await detectorRef.current?.getCapturedImages();
+      console.log('Imágenes obtenidas:', images);
+    } catch (error) {
+      console.error('Error al obtener imágenes:', error);
+    }
+  };
+  const checkStatus = async () => {
+    const currentStatus = await detectorRef.current?.getStatus();
+    setStatus(currentStatus);
+  };
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1>Detector de Documentos - React</h1>
+        <JaakStampsWrapper
+          ref={detectorRef}
+          debug={false}
+          onCaptureCompleted={handleCaptureCompleted}
+          onIsReady={handleIsReady}
+        />
+        <div className="controls">
+          <button onClick={preloadModel}>Precargar Modelo</button>
+          <button onClick={startCapture}>Iniciar Captura</button>
+          <button onClick={stopCapture}>Detener</button>
+          <button onClick={resetCapture}>Reiniciar</button>
+          <button onClick={getImages} disabled={!isCompleted}>
+            Obtener Imágenes
+          </button>
+          <button onClick={checkStatus}>Verificar Estado</button>
+        </div>
+        {status && (
+          <div className="status">
+            <h3>Estado Actual:</h3>
+            <p>Video activo: {status.isVideoActive ? 'Sí' : 'No'}</p>
+            <p>Paso: {status.captureStep}</p>
+            <p>Mensaje: {status.statusMessage}</p>
+            <p>Proceso completado: {status.isProcessCompleted ? 'Sí' : 'No'}</p>
+            <p>Modelo precargado: {status.isModelPreloaded ? 'Sí' : 'No'}</p>
+          </div>
+        )}
+        {capturedData && (
+          <div className="results">
+            <h3>Resultados de la Captura:</h3>
+            <p>Total de imágenes: {capturedData.metadata.totalImages}</p>
+            <p>Timestamp: {capturedData.timestamp}</p>
+            {capturedData.front.cropped && (
+              <div>
+                <h4>Frente del Documento:</h4>
+                <img
+                  src={capturedData.front.cropped}
+                  alt="Frente del documento"
+                  style={{ maxWidth: '300px', border: '1px solid #ccc', margin: '10px' }}
+                />
+              </div>
+            )}
+            {capturedData.back.cropped && (
+              <div>
+                <h4>Reverso del Documento:</h4>
+                <img
+                  src={capturedData.back.cropped}
+                  alt="Reverso del documento"
+                  style={{ maxWidth: '300px', border: '1px solid #ccc', margin: '10px' }}
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </header>
+    </div>
+  );
 }
-// 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]);
-  }
-});
+export default App;
 ```
-### Personalización de la Apariencia
-El componente puede personalizarse mediante CSS utilizando las partes expuestas a través de Shadow DOM:
+## API Reference
-```css
-document-detector::part(mb-camera-video) {
-  border-radius: 16px;
-  border: 2px solid #3498db;
-}
-```
+### Props/Atributos
-### Consideraciones Importantes
+| Propiedad | Tipo | Predeterminado | Descripción |
+|-----------|------|---------------|-------------|
+| `debug` | `boolean` | `false` | Activa el modo debug para mostrar información de depuración |
+| `alignmentTolerance` | `number` | `10` | Tolerancia en píxeles para considerar un lado alineado |
-- **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.
+### Métodos Públicos
-## Referencia de API
+| Método | Retorna | Descripción |
+|--------|---------|-------------|
+| `startCapture()` | `Promise<void>` | Inicia el proceso de detección y captura |
+| `stopCapture()` | `Promise<void>` | Detiene el proceso y libera la cámara |
+| `resetCapture()` | `Promise<void>` | Reinicia el proceso de captura |
+| `preloadModel()` | `Promise<{success: boolean, message?: string, error?: string}>` | Precarga el modelo de detección |
+| `getCapturedImages()` | `Promise<CapturedImages>` | Obtiene las imágenes capturadas (solo después de completar) |
+| `isProcessCompleted()` | `Promise<boolean>` | Verifica si el proceso ha sido completado |
+| `getStatus()` | `Promise<Status>` | Obtiene el estado actual del detector |
+| `skipBackCapture()` | `Promise<void>` | Omite la captura del reverso (solo disponible en paso 'back') |
-### Propiedades
+### Eventos
-> **Nota**: Solo las siguientes propiedades pueden ser configuradas directamente en el componente.
+| Evento | Payload | Descripción |
+|--------|---------|-------------|
+| `captureCompleted` | `CapturedImages` | Se emite cuando se completa el proceso de captura |
+| `isReady` | `boolean` | Se emite cuando el componente está listo para comenzar la detección (modelo ONNX cargado) |
-| Propiedad                | Tipo                                      | Descripción                                |
-|--------------------------|-------------------------------------------|--------------------------------------------|
-| `license-key`            | string                                    | Clave de licencia para el SDK              |
-| `config`                 | object                                    | Configuración del componente (ver detalle abajo) |
+### Tipos de Datos
-#### Objeto de configuración (`config`)
+```typescript
+interface CapturedImages {
+  front: {
+    fullFrame: string | null;    // Base64 de la imagen completa del frente
+    cropped: string | null;      // Base64 del documento recortado del frente
+  };
+  back: {
+    fullFrame: string | null;    // Base64 de la imagen completa del reverso
+    cropped: string | null;      // Base64 del documento recortado del reverso
+  };
+  timestamp: string;             // ISO timestamp de la captura
+  metadata: {
+    totalImages: number;         // Número total de imágenes capturadas
+    processCompleted: boolean;   // Si el proceso fue completado
+    backCaptureSkipped?: boolean; // Si se omitió la captura del reverso
+  };
+}
-| Propiedad                | Tipo                                      | Descripción                                |
-|--------------------------|-------------------------------------------|--------------------------------------------|
-| `key`                    | string                                    | Clave de licencia para el SDK              |
-| `dynamicMode`            | boolean                                   | Cuando está activado, utiliza la variante completa del SDK en escritorio y la ligera en móviles |
-| `strictMode`             | boolean                                   | Controla los filtros de desenfoque y brillo. Cuando está activado, se aplican filtros más estrictos |
-| `translation`            | object                                    | Configuración de traducciones personalizadas (ver detalle abajo) |
+interface Status {
+  isVideoActive: boolean;        // Si la cámara está activa
+  captureStep: 'front' | 'back' | 'completed'; // Paso actual del proceso
+  statusMessage: string;         // Mensaje de estado actual
+  hasImages: boolean;           // Si hay imágenes capturadas
+  isProcessCompleted: boolean;  // Si el proceso está completado
+  isModelPreloaded: boolean;    // Si el modelo está precargado
+}
+```
-#### Objeto de traducción (`config.translation`)
+## Flujo de Trabajo
-| Propiedad                      | Tipo                                      | Descripción                                |
-|--------------------------------|-------------------------------------------|--------------------------------------------|
-| `front`                        | string                                    | Mensaje para escanear el frente del documento |
-| `back`                         | string                                    | Mensaje para escanear el reverso del documento |
-| `changeSide`                   | string                                    | Mensaje para voltear el documento |
-| `adjustAngle`                  | string                                    | Mensaje para ajustar el ángulo del documento |
-| `cameraFeedbackBlur`           | string                                    | Mensaje cuando el documento está borroso |
-| `cameraFeedbackFacePhotoCovered`| string                                   | Mensaje cuando la foto de la cara está cubierta |
-| `cameraFeedbackGlare`          | string                                    | Mensaje cuando hay deslumbramiento en el documento |
-| `cameraFeedbackWrongSide`      | string                                    | Mensaje cuando se muestra el lado incorrecto del documento |
-| `moveCloser`                   | string                                    | Mensaje para acercar el documento |
-| `moveFarther`                  | string                                    | Mensaje para alejar el documento |
+### Flujo Estándar
+1. **Inicialización**: El componente se prepara para la detección
+2. **Inicio de captura**: Se carga el modelo ONNX automáticamente al iniciar la detección
+3. **Captura del frente**: El usuario posiciona el documento y se captura automáticamente
+4. **Captura del reverso**: Se solicita voltear el documento para capturar el reverso
+5. **Completado**: Se emite el evento `captureCompleted` con todas las imágenes
-### Eventos
+### Flujo con Precarga (Recomendado)
+1. **Precarga del modelo**: Se llama a `preloadModel()` para cargar el modelo en memoria
+2. **Inicio optimizado**: Al iniciar la captura, se usa el modelo ya cargado
+3. **Captura del frente**: Detección más rápida con el modelo precargado
+4. **Captura del reverso**: Se solicita voltear el documento
+5. **Completado**: Se emite el evento `captureCompleted` con todas las imágenes
-> **Nota**: Solo los siguientes eventos son emitidos directamente por el componente.
+## Requisitos del Sistema
-| Evento               | Detalle                                   | Descripción                                |
-|----------------------|-------------------------------------------|--------------------------------------------|
-| `status`             | StatusDocumentDetector                    | Cambio de estado del detector              |
-| `results`            | any                                       | Resultados del escaneo                     |
+- **Navegadores**: Chrome/Edge 88+, Firefox 85+, Safari 14+
+- **Cámara**: Acceso a cámara trasera (móvil) o webcam (escritorio)
+- **Conexión**: Conexión a internet para cargar el modelo ONNX Runtime
-### Métodos
+## Consideraciones de Privacidad
-> **Nota**: Solo los siguientes métodos pueden ser llamados directamente en el componente.
+- Las imágenes se procesan localmente en el navegador
+- No se envían datos a servidores externos
+- El modelo de IA se ejecuta completamente en el cliente
+- Las imágenes capturadas solo están disponibles en el contexto de tu aplicación
-| 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 |
+## Desarrollo
-## Tipos de Objetos de Eventos
+### Clonar el repositorio
+```bash
+git clone [repository-url]
+cd jaak-stamps-webcomponent
+```
-> **Nota**: A continuación se describen los tipos de datos para los eventos emitidos por el componente.
+### Instalar dependencias
+```bash
+npm install
+```
-### StatusDocumentDetector
+### Desarrollo local
+```bash
+npm start
+```
-```typescript
-enum StatusDocumentDetector {
-  RECORDING = "RECORDING",
-  ERROR = "ERROR",
-  RUNNING = "RUNNING",
-  INITIALIZING = "INITIALIZING",
-  FRONT_SIDE_DETECTION = "FRONT_SIDE_DETECTION",
-  BACK_SIDE_DETECTION = "BACK_SIDE_DETECTION",
-  DOCUMENT_NOT_FOUND = "DOCUMENT_NOT_FOUND",
-  DOCUMENT_DETECTED = "DOCUMENT_DETECTED",
-  CHANGE_SIDE = "CHANGE_SIDE",
-  RESULTS_SUCCESS = "RESULTS_SUCCESS",
-  RESULTS_EMPTY = "RESULTS_EMPTY",
-  DETECTION_FAILED = "DETECTION_FAILED"
-}
+### Construir para producción
+```bash
+npm run build
 ```
-### Resultados (results)
+### Ejecutar tests
+```bash
+npm test
+```
-El evento `results` emite un objeto con los datos extraídos del documento escaneado, que incluye:
+## Soporte
-```typescript
-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;
-  }>;
-}
-```
+Para reportar bugs o solicitar características, por favor crea un issue en el repositorio del proyecto.
 ## Licencia
-MIT
+MIT License - ver archivo LICENSE para detalles.