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
-
Inicialización del OCR: Cree una instancia de
OcrId
con su clave de API, el entorno (Envs.PRO3
) y el idioma deseado. -
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.
-
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.
- Utilice el método
-
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.
- Utilice
-
Ejecución en el Navegador:
- Instale las dependencias y construya el proyecto con los comandos
npm install
ynpm run build
. - Abra el archivo
index.html
en el navegador para probar la funcionalidad de OCR.
- Instale las dependencias y construya el proyecto con los comandos
-
Gestión de Licencia:
- Inicialmente solicite a Finwave el acceso a las URLs que desean utilizar con el componente, indicando lo siguiente:
- Cuáles son URLs para producción.
- 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: "..." };
- Inicialmente solicite a Finwave el acceso a las URLs que desean utilizar con el componente, indicando lo siguiente:
-
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.
- Puede acceder a la demo en el siguiente enlace: Demo-Javascript.