Saltar al contenido principal

Integración con JavaScript

Aprenda cómo integrar la biblioteca fw-ocrid en su proyecto utilizando JavaScript puro, con instrucciones paso a paso para construir una implementación simple y reutilizable de OCR.


Implementación Básica

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

const ocrid = new OcrId('YOUR_API_KEY', Envs.PRE3, undefined, 'en'); // Add environment, optional config, and language

// Start the scanning process
const id = await ocrid.startStream(document.getElementById('video-container'));

// Close the stream and release resources
ocrid.close();

Ejemplo con browserify

index.js

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

async function init() {
// Initialize OCRID with API Key, environment, 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 the result event
ocrid.events(EventType.RESULT).subscribe((result) => {
console.log('Scan completed:', result);
ocrid.close(); // Close the process
});

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

// Start the camera and stream
const stream = await ocrid.startStream(document.getElementById('video-tag'));

console.log('Camera stream started:', stream);
}

window.onload = () => {
init();
};

index.html

<!DOCTYPE html>
<html>
<head>
<script src="dist/bundle.js"></script>
</head>
<body>
<div id="video-tag"></div>
</body>
</html>

package.json

{
"name": "test",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "browserify index.js -o dist/bundle.js"
},
"dependencies": {
"browserify": "^17.0.0",
"fw-ocrid": "*"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.24.1",
"babelify": "^8.0.0"
},
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015"
]
}
]
]
}
}
npm install
npm run build

Run the above commands and then open in the browser the file index.html


Puntos Claves de la Implementación

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

  2. Manejo de Eventos:

    • Eventos de Retroalimentación del Usuario: Ayudan a guiar al usuario en el proceso, como mostrar el frente o reverso del documento.
    • Eventos de Resultados: Indican que el proceso se ha completado con éxito y proporcionan los datos escaneados.
    • Eventos de Errores: Capturan y manejan errores que puedan ocurrir durante el proceso.
  3. Gestión del Flujo de Cámara:

    • Utilice el método startStream para abrir la cámara y mostrar la transmisión en tiempo real.
    • Asegúrese de liberar recursos cerrando la instancia de OCR con close una vez que el proceso haya terminado.
  4. Configuración con Browserify:

    • Utilice browserify para empaquetar el código JavaScript y generar un archivo ejecutable en el navegador.
    • Configure un archivo package.json con las dependencias necesarias y cree un script para construir el proyecto.
  5. Ejecución en el Navegador:

    • Instale las dependencias y construya el proyecto con los comandos npm install y npm run build.
    • Abra el archivo index.html en el navegador para probar la funcionalidad de OCR.
  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 JavaScript

    Para probar el funcionamiento del programa OCR ID, se ha implementado una demo en JavaScript 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.


Soportesoporte.onboarding@finwave.es