Integración con React

Aprenda cómo integrar la biblioteca fw-ocrid en su proyecto React creando un componente reutilizable para la funcionalidad de OCR, paso a paso.

---

Implementación Básica

import React, { useEffect, useRef } from 'react';
import { OcrId, Envs, EventType, EventTypeUserFeedback, FeedbackEvent, ResultEvent, ErrorEvent } from 'fw-ocrid';

const OcrComponent: React.FC = () => {
  const videoRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const ocrid = new OcrId('YOUR_API_KEY', Envs.PRE3, undefined, 'en');

    // Handle user feedback events
    ocrid.events(EventType.USER_FEEDBACK).subscribe((feedback: FeedbackEvent) => {
      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: ResultEvent) => {
      console.log('Scan completed:', result);
      ocrid.close(); // Close the process
    });

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

    // Start the camera stream
    const startStream = async () => {
      try {
        if (videoRef.current) {
          await ocrid.startStream(videoRef.current);
          console.log('Camera stream started.');
        } else {
          console.error('Video element reference is null.');
        }
      } catch (error) {
        console.error('Error starting camera stream:', error);
      }
    };

    startStream();

    return () => {
      ocrid.close();
    };
  }, []);

  return (
    <div style={{ width: '600px', height: '100%' }}>
      <div ref={videoRef} style={{ width: '100%', height: 'auto' }} />
    </div>
  );
};

export default OcrComponent;

---

Using the Component

Integre el OcrComponent en su aplicación React:

import React from 'react';
import ReactDOM from 'react-dom';
import OcrComponent from './OcrComponent';

const App: React.FC = () => (
  <div>
    <h1>OCR Integration Example</h1>
    <OcrComponent />
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

---

Claves de la Implementación

1. Inicialización del OCR: Cree una instancia de OcrId con su clave de API, el entorno (Envs.PRE3) y el idioma deseado.

2. Contenedor para la cámara: Utilice un elemento div con una referencia (ref) que se pasará al método startStream para renderizar la cámara. La biblioteca se encargará de crear y gestionar el elemento de vídeo dentro de este contenedor.

3. Manejo de Eventos:

   • Retroalimentación del Usuario: Guía al usuario para mostrar las caras del documento o notifica el progreso del escaneo.
   • Eventos de Resultados: Proporciona los datos escaneados al finalizar el proceso.
   • Eventos de Errores: Captura errores durante el proceso para manejarlos adecuadamente.

4. Gestión del Flujo de Cámara:

   • Use el método startStream pasando el elemento div referenciado para iniciar la transmisión de la cámara.
   • Asegúrese de cerrar la instancia de OCR utilizando close para liberar recursos una vez que el proceso haya finalizado.

5. Optimizaciones para entorno de desarrollo:

   • En React Strict Mode, los efectos se ejecutan dos veces en desarrollo.
   • Utilice un estado isInitialized para evitar inicializaciones múltiples de la cámara.
   • Almacene la instancia de OCR en una referencia para asegurar una limpieza correcta.

6. Gestión de Licencia:

   • Inicialmente solicite a Finwave el acceso a las URLs que desean utilizar con el componente, indicando lo siguiente:
     1. Cuáles son URLs para producción.
     2. Cuáles son URLs para pruebas ó desarrollo.
   • Tras recibir la licencia puede usar el producto de forma correcta.
   • Para pruebas locales se le proveerá una licencia temporal. Puede trabajar en tres tipos de ambientes: producción (PRO3), pruebas (PRE3) y desarrollo (DEV3).
   • Para usar la licecia temporal añada el siguiente código en el navegador antes de utilizar el componente: window.regulaLicense = { license: "..." };

7. Demo React

   Para probar el funcionamiento del programa OCR ID, se ha implementado una demo en React que proporciona una interfaz interactiva. Esto permite explorar las funcionalidades y el comportamiento de la biblioteca sin necesidad de integrarla previamente en su propia interfaz.

   • Puede acceder a la demo en el siguiente enlace: React-Demo.

---