Integración de OCR

Integre la biblioteca fw-ocrid para habilitar la funcionalidad de OCR directamente en su aplicación. Esta guía proporciona una configuración básica para usar la biblioteca con JavaScript puro.

1. Instalación

Comience instalando la biblioteca fw-ocrid a través de NPM.

npm install fw-ocrid

2. Integración en JavaScript

Implementación Básica

Esta sección explica cómo configurar y utilizar la funcionalidad de OCR en una aplicación utilizando JavaScript puro. Incluye la inicialización de la biblioteca, el manejo de eventos de retroalimentación del usuario y resultados, así como la gestión de errores durante el proceso.

import { OcrId, Envs, EventType, EventTypeUserFeedback, ResultHelper } from 'fw-ocrid';

// Variable para almacenar el ID del proceso
let processId;

async function initOCR() {
  // Initialize OCRID with API Key, environment, optional config, and optional language
  const ocrid = new OcrId('YOUR_API_KEY', Envs.PRE3, undefined, 'en');

  // Handle user feedback events
  ocrid.events(EventType.USER_FEEDBACK).subscribe((feedback) => {
    switch (feedback) {
      case EventTypeUserFeedback.SHOW_DOCUMENT_FRONT_SIDE:
        console.log('Show the front side of the document.');
        break;
      case EventTypeUserFeedback.SHOW_DOCUMENT_REVERSE_SIDE:
        console.log('Show the reverse side of the document.');
        break;
      case EventTypeUserFeedback.DOCUMENT_FRONT_SIDE_COMPLETED:
        console.log('Front side scanned successfully.');
        break;
      case EventTypeUserFeedback.PROCESS_FAILED_DUE_ANALYSIS_ERROR:
        console.error('Process failed due to an analysis error.');
        break;
      case EventTypeUserFeedback.PROCESS_FINISHED:
        console.log('Scanning process completed.');
        break;
      default:
        console.log('Feedback:', feedback);
    }
  });

  // Handle result events
  ocrid.events(EventType.RESULT).subscribe((result) => {
    console.log('Scan completed:', result);
    // Recuperar resultados detallados usando processId
    getOcrResult(processId);
    ocrid.close(); // Close the process
  });

  // Handle error events
  ocrid.events(EventType.ERROR).subscribe((error) => {
    console.error('An error occurred:', error);
  });

  // Start the camera stream and scanning process
  processId = await ocrid.startStream(document.getElementById('video-container'));
  console.log('Camera stream started. Process ID:', processId);
}

// Función para obtener y procesar los resultados del OCR
async function getOcrResult(processId) {
  try {
    // Método 1: Usando ResultHelper (recomendado)
    const result = await ResultHelper.get(processId, Envs.PRE3);
    console.log('Resultado completo:', result);
    
    // Procesar los datos específicos del resultado
    if (result?.success) {
      // Tipos de documento identificados
      const documentTypes = result.value.types;
      
      // Campos extraídos del documento
      const fields = result.value.fields;
      
      // Imágenes capturadas
      const images = result.value.images;
      
      console.log('Tipo de documento:', documentTypes);
      console.log('Campos extraídos:', fields);
      console.log('Imágenes:', images);
    }
    
    // Método 2: Usando llamada HTTP directa al endpoint
    // const url = `${Endpoints[Envs.PRE3]}result/${processId}`;
    // fetch(url)
    //   .then(response => response.json())
    //   .then(data => {
    //     console.log('Resultado desde API:', data);
    //   })
    //   .catch(error => {
    //     console.error('Error al obtener el resultado:', error);
    //   });
    
  } catch (error) {
    console.error('Error al obtener el resultado OCR:', error);
  }
}

// Call the initialization function when the page is loaded
window.onload = () => {
  initOCR();
};

3. Estructura HTML

Asegúrese de que su archivo HTML incluya un contenedor de video para la transmisión de la cámara y un script para iniciar el proceso de OCR.

<!DOCTYPE html>
<html>
<head>
    <title>OCRID Example</title>
</head>
<body>
    <div id="video-container"></div>
    <script type="module" src="index.js"></script>
</body>
</html>

4. Estructura del Resultado

El resultado obtenido mediante ResultHelper.get() tiene la siguiente estructura:

{
  id: "process-123456",       // ID del proceso
  startTimestamp: 1647532091, // Timestamp de inicio
  endTimestamp: 1647532120,   // Timestamp de finalización
  success: true,              // Indicador de éxito
  value: {
    types: [                  // Tipos de documento identificados
      {
        name: "DNI",          // Nombre del tipo de documento
        year: 2020,           // Año del documento
        id: "DNI-2020",       // ID del tipo de documento
        probability: 0.98,    // Probabilidad de coincidencia
        country: "ES"         // País del documento
      }
    ],
    fields: [                 // Campos extraídos del documento
      {
        name: "fullName",     // Nombre del campo
        value: "Juan Pérez"   // Valor extraído
      },
      {
        name: "documentNumber",
        value: "12345678X"
      }
    ],
    authenticity: [           // Validaciones de autenticidad
      {
        name: "hologramCheck",
        value: true
      }
    ],
    images: [                 // Imágenes capturadas
      {
        name: "frontImage",
        value: "base64_encoded_image_data..."
      }
    ],
    validations: [            // Validaciones adicionales
      {
        name: "expiredCheck",
        value: false
      }
    ]
  }
}

Recursos Adicionales

Para guías de configuración adicionales, explore:

1. Instalación​

2. Integración en JavaScript​

Implementación Básica​

3. Estructura HTML​

4. Estructura del Resultado​

Recursos Adicionales​