Integración del escaneado y extracción de DNI en aplicaciones web con el SDK de BlinkID

En este tutorial paso a paso, te mostraremos cómo empezar a escanear y extraer los datos de un permiso de conducir utilizando el SDK BlinkID de Microblink.

Si tienes poco tiempo y quieres ver este trabajo en acción de inmediato, echa un vistazo a las aplicaciones de demostración.

Mejor aún, prueba esto en menos de 5 minutos en tu máquina (si tienes Node y Git instalados) haciendo los siguientes pasos:

• en tu terminal, clona este repositorio con git clone https://github.com/Hitman666/BlinkID-InBrowserSDK-GettingStarted.git
• consigue la licencia en Microblink Developer Hub y añádela a la variable LICENSE en el archivo main.js
• ejecuta cd BlinkID-InBrowserSDK-GettingStarted && npm install && npm run dev
• abre http://localhost:5173/

Si prefieres un vídeo corto para ejecutar este proyecto, no dudes en verlo aquí.

Si quieres recrear este proyecto desde cero, aquí tienes la guía paso a paso.

El problema

Pongámonos en situación: tienes un negocio de alquiler de coches, y tus clientes tienen que introducir los datos de su carné de conducir en un formulario web de tu sitio web. Este proceso suele ser propenso a errores, y a menudo lleva un tiempo, y observas una tasa de abandono pronunciada en esta pantalla en particular.

Profundizas con tus equipos de investigación de productos y usuarios y descubres que la gente suele cometer errores al introducir la información y que, en general, el proceso les resulta engorroso.

Ahora, imagina esto: implementas una biblioteca que te permite ofrecer a los clientes la posibilidad de simplemente escanear su DNI con su cámara, y woila: rellenas automáticamente todos los datos de su DNI.

Sin fisuras, sin errores y ¡rápido!

¿Intrigado? Bien, vamos a ver paso a paso cómo empezar con esto.

En general, integrar funciones avanzadas de escaneado de documentos y OCR en tu aplicación web puede mejorar significativamente la experiencia del usuario y agilizar los procesos, sea cual sea el sector. El SDK BlinkID de Microblink ofrece soluciones sólidas y fiables para escanear no sólo permisos de conducir, sino también carnés de identidad, pasaportes y otros documentos. En esta entrada del blog, te guiaré por los pasos para integrar BlinkID en tu aplicación web para extraer datos de un permiso de conducir, y profundizaremos en otras soluciones en otras entradas.

Requisitos previos

Asegúrate de que tienes instaladas las siguientes herramientas:

• Node.js – ve al sitio web principal y descarga el ejecutable para tu máquina
• Git – ve al sitio web principal y descarga el ejecutable para tu máquina

Iniciar un nuevo proyecto con Vite

Como puedes ver en el último informe State of JS, Vite se ha convertido en una de las herramientas de compilación más queridas, así que la utilizaremos aquí.

En caso de que te preguntes por qué eso es importante, aquí tienes una explicación muy larga, y una respuesta muy rápida, pero que te dejará con la boca abierta:

Vite aprovecha los módulos ES nativos para proporcionar un servidor de desarrollo rápido con sustitución instantánea de módulos en caliente (HMR), haciendo que el desarrollo sea más fluido y eficiente, y produciendo compilaciones optimizadas y listas para la producción.

Para decirlo sin rodeos, no deberías usar Vite porque lo usen los chicos guays, sino porque hará que tu experiencia de desarrollo sea mucho mejor.

Bien, con la teoría fuera del camino, vamos a ejecutar el siguiente comando en tu terminal: npm create vite@latest. Esto ejecutará la última versión de Vite.

Cuando se te pida, utiliza blinkid-integration como nombre del proyecto, selecciona Vanilla como framework (es decir, sin framework) y Javascript como variante (es decir, el lenguaje; la otra opción es TypeScript). El resultado que deberías ver es similar a éste:

✔ Nombre del proyecto: ... blinkid-integration ✔ Selecciona un framework: ' Vanilla ✔ Selecciona una variante: ' Proyecto JavaScript Scaffolding en /Users/nikola/DEV/test-vite/blinkid-integration...
Listo.
Ahora ejecuta: cd blinkid-integration npm install npm run dev  

Ejecutar nuestro proyecto andamiaje

Vamos a ejecutar los comandos (en terminal) anotados al final de la salida anterior:

cd blinkid-integration npm install npm run dev

Una vez finalizado esto, deberías obtener una salida similar a ésta:

añadidos 10 paquetes, y auditados 11 paquetes en 10s 3 paquetes están buscando financiación ejecuta `npm fund` para más detalles encontradas 0 vulnerabilidades > blinkid-integration@0.0.0 dev > vite El puerto 5173 está en uso, prueba con otro...
VITE v5.3.2 listo en 209 ms ➜ Local: http://localhost:5174/ ➜ Red: usa --host para exponer ➜ pulsa h + enter para mostrar ayuda 

Deberías ver la siguiente página en tu navegador si abres http://localhost:5174:

Como era de esperar, si haces clic en el botón La cuenta es 0, el número aumentará.

Añadir el SDK de BlinkID

A continuación, vamos a instalar el SDK de BlinkID ejecutando el siguiente código en el terminal:

npm install --save @microblink/blinkid-in-browser-sdk

Copiar la carpeta de recursos

Este es un paso muy importante, ¡que a menudo se pasa por alto! Así que, por favor, asegúrate de copiar la carpeta resources (que se encuentra en node_modules/@microblink/blinkid-in-browser-sdk/resources) en la carpeta public.

Crear una estructura HTML básica

Si abres el proyecto andamiaje en tu editor favorito (yo utilizo VSCode), verás esta estructura de carpetas:

Si te interesa y no has utilizado Vite antes, te animo a que eches un vistazo al código. Muestra la posibilidad de utilizar el comando import.

Ahora, sustituyamos el contenido actual del archivo index.html por lo siguiente:

<doctype html>
<html lang="es">
  <cabeza>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <título>Prueba BlinkID</title>
  </head>
  <cuerpo>
    <video id="miCámaraElementoVídeo"></video><script type="module" src="/main.js"></script></body></html>

Observarás que sólo hemos cambiado el title, y en lugar de <div id="app"></div> hemos añadido <video id="myCameraVideoElement"></video>.

Añadir JavaScript para escanear y extraer documentos

Sustituye todo el contenido del archivo main.js por el siguiente código:

const LICENSE = ''; import * as BlinkIDSDK from "@microblink/blinkid-in-browser-sdk"; if (BlinkIDSDK.isBrowserSupported()) { const loadSettings = new BlinkIDSDK.WasmSDKLoadSettings(LICENSE); loadSettings.engineLocation = window.location.origin + "/resources/"; BlinkIDSDK.loadWasmModule(loadSettings).then ( async (wasmSDK) => { const recognizer = await BlinkIDSDK.createBlinkIdSingleSideRecognizer(wasmSDK); const recognizerRunner = await BlinkIDSDK.createRecognizerRunner( wasmSDK,  [recognizer]); const cameraFeed = document.getElementById("myCameraVideoElement"); try { const videoRecognizer = await BlinkIDSDK.VideoRecognizer.createVideoRecognizerFromCameraStream( cameraFeed, recognizerRunner ); const processResult = await videoRecognizer.recognize(); console.log(processResult); if (processResult !== BlinkIDSDK.RecognizerResultState.Empty) { const recognitionResult = await recognizer.getResult(); console.log(recognitionResult); } else { console.log("¡El reconocimiento no se ha realizado correctamente!"); } } catch (error) { console.error(error); } }, (error) => { console.log("¡Error durante la inicialización del SDK!", error); } ) } else { console.log("¡Este navegador no es compatible con el SDK!"); }

Ahora, entendamos lo que hace este código…

const LICENSE = ''; import * as BlinkIDSDK from "@microblink/blinkid-in-browser-sdk"; if (BlinkIDSDK.isBrowserSupported()) {

Línea por línea:

• Definimos una constante llamada LICENSE (la abordaremos en el siguiente apartado).
• Importa todos los miembros exportados del paquete @microblink/blinkid-in-browser-sdk y asígnalos al objeto BlinkIDSDK.
• Comprueba si el navegador actual es compatible con el SDK de BlinkID (puedes consultar la lista de navegadores compatibles en nuestra documentación).

const loadSettings = new BlinkIDSDK.WasmSDKLoadSettings(LICENCIA); loadSettings.engineLocation = window.location.origin + "/recursos/";

Línea por línea:

• Created a new instance of WasmSDKLoadSettings, passing the LICENSE constant.
  • Este objeto contiene los ajustes de configuración para cargar el módulo WebAssembly (WASM) del SDK. Puedes leer más sobre él aquí.
• Set the location where the WASM engine files are hosted. As you may remember from the Copying the resources folder step, we copied the resources folder to the public folder, and we need to indicate that specifically.
  • Si copiaras/pegaras el contenido real de la carpeta resources en la carpeta public, entonces no necesitarías configurar esto específicamente.
• Called the loadWasmModule method to load the WASM module with the specified settings.
  • Este método devuelve una promesa, y una vez que se resuelve correctamente, se ejecuta la función asíncrona de devolución de llamada, exponiendo la variable wasmSDK.

const recognizer = await BlinkIDSDK.createBlinkIdSingleSideRecognizer(wasmSDK); const recognizerRunner = await BlinkIDSDK.createRecognizerRunner( wasmSDK, [recognizer], true );

Línea por línea:

• Creada una instancia de BlinkIdSingleSideRecognizer.
• Created a RecognizerRunner instance which manages the recognition process.
  • Toma la instancia del SDK Wasm, una matriz de reconocedores y una bandera booleana que indica si el reconocedor debe permitir resultados múltiples o no (lee más sobre esto aquí).

const cameraFeed = document.getElementById("myCameraVideoElement"); const videoRecognizer = await BlinkIDSDK.VideoRecognizer.createVideoRecognizerFromCameraStream( cameraFeed, recognizerRunner );

Línea por línea:

• Selecciona el elemento de vídeo del DOM que se utilizará para mostrar la alimentación de la cámara.
• En un bloque try/catch creamos una instancia VideoRecognizer a partir del flujo de la cámara utilizando el elemento de vídeo seleccionado (cameraFeed) y el corredor reconocedor (recognizerRunner).

const processResult = await videoRecognizer.recognize(); console.log(processResult); if (processResult !== BlinkIDSDK.RecognizerResultState.Empty) { const recognitionResult = await recognizer.getResult(); console.log(recognitionResult); } else { console.log("¡El reconocimiento no se ha realizado correctamente!"); }

Línea por línea:

• Inicia el proceso de reconocimiento y registra el resultado en la consola.
• Comprueba si el resultado del proceso no está vacío, luego espera los resultados del reconocedor y regístralos en la consola.
• Si el resultado del proceso está vacío, registramos el mensaje correspondiente.

Por último, detectamos los errores de try/catch y de la promesa.

Probar la integración – toma nº 1

Si abres el archivo index.html en un navegador web, verás un error, algo parecido a:

Uncaught Error at new WasmSDKLoadSettings (@microblink_blinkid-in-browser-sdk.js?v=1a0eef98:1868:13) at main.js:5:24

Esto se debe a que no hemos definido la licencia en la variable LICENSE.

Obtener la licencia

Para solucionarlo, tenemos que ir a https://login.microblink.com/ para crear una cuenta en Developer Hub. Te aparecerá el formulario de registro estándar:

Se te harán algunas preguntas que puedes saltarte (si eres un dev, PM, etc 🙂 ).

Y recibirás un correo electrónico de confirmación.

Una vez que te registres, verás un panel como éste:

Aquí debes hacer clic en el botón Start New Trial, y en la siguiente pantalla seleccionar BlinkID como producto, InBrowser como plataforma y localhost como nombre de dominio para el entorno de pruebas. Antes de pasar a producción, debes actualizar el nombre de dominio a tu dominio real.

Entonces llegarás a una pantalla en la que podrás copiar el código (será una larga cadena de números y letras llamada Base64). Pega este código en la variable LICENSE del archivo main.js, y ya estará todo listo.

Por cierto, si tienes curiosidad, BlinkID está disponible para muchas plataformas, consulta la lista de plataformas en este enlace.

Probar la integración – toma nº 2

Si vuelves a abrir el archivo index.html en tu navegador, se te presentará una imagen de cámara en la que deberás mostrar algún documento de identidad. Busqué en Google un ejemplo de carné de conducir estadounidense, cogí la primera imagen de la página de resultados y la imprimí.

Entonces, si muestras esta imagen a la cámara, volcará todos los datos disponibles en el registro de la consola:

Conclusión

Integrar el SDK de BlinkID en tu aplicación web es un proceso sencillo que puede mejorar significativamente las capacidades de embarque/procesamiento de tu aplicación.

Siguiendo estos pasos, puedes configurar las funcionalidades de escaneado de documentos y OCR para extraer datos de los permisos de conducir, mejorando tanto la experiencia de usuario como la eficacia en menos de 5 minutos.

Para los que quieran saber más

Se trata de un ejemplo básico para que empieces rápidamente.

Ahora, si quieres saber más, puedes consultar el repositorio oficial en Github, y también puedes intentar añadir tú mismo algunas modificaciones, como:

• Estilismo
  • Mejora el HTML con CSS para que la interfaz sea más fácil de usar.
• Tratamiento de errores y respuesta
  • Añade un mejor tratamiento de los errores y proporciona una mejor información a los usuarios.
• Ampliar la funcionalidad
  • Explora las funciones del SDK de BlinkID y mejora las capacidades de tu aplicación.