Integración del escaneo y la extracción de documentos de identidad 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 carné de conducir utilizando el SDK BlinkID de Microblink.

Si tienes prisa y quieres ver cómo funciona esto en la práctica de inmediato, echa un vistazo a las aplicaciones de demostración.

Mejor aún, pruébalo en menos de 5 minutos en tu ordenador (si tienes instalados Node y Git) siguiendo estos pasos:

• in your terminal, clone this repo  by running git clone https://github.com/BlinkID/blinkid-in-browser in your Terminal
• run cd blinkid-in-browser/examples/getting-started && npm install && npm run dev
• get the license at Microblink Developer Hub and add it to the LICENSE variable in the main.js file
• run cd BlinkID-InBrowserSDK-GettingStarted && npm install && npm run dev
• abrir http://localhost:5173/

Si prefieres ver un vídeo breve sobre cómo llevar a cabo este proyecto, no dudes en echarle un vistazo aquí.

Si quieres reproducir este proyecto desde cero, a continuación te ofrecemos una guía paso a paso.

El problema

Pongamos en contexto la 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 página web. Este proceso suele dar lugar a errores y, a menudo, lleva bastante tiempo, por lo que observas una elevada tasa de abandono en esta pantalla en concreto.

Profundizas en el tema con tus equipos de investigación de producto y de usuarios y descubres que los usuarios suelen cometer errores al introducir la información y que, en general, consideran que el proceso es engorroso.

Ahora, imagínate lo siguiente: implementas una biblioteca que te permite ofrecer a los clientes la posibilidad de simplemente escanear su documento de identidad con la cámara y, ¡listo!, se rellenan automáticamente todos los datos de su documento.

¡Sin complicaciones, sin errores y rápido!

¿Te interesa? Vale, veamos paso a paso cómo empezar con esto.

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

Requisitos previos

Asegúrate de tener instaladas las siguientes herramientas:

• Node.js: entra en la página web principal y descarga el ejecutable para tu ordenador
• Git: entra en la página web principal y descarga el ejecutable para tu ordenador

Iniciar un nuevo proyecto con Vite

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

Si te estás preguntando por qué es tan importante, aquí tienes una explicación muy extensa; y una respuesta muy breve, aunque un poco enrevesada, es la siguiente:

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

Para decirlo sin rodeos, no deberías usar Vite solo porque lo usan los más guays, sino porque realmente mejorará mucho tu experiencia de desarrollo.

OK, with theory out of the way, let’s run the following command in your terminal: npm create vite@latest. This will run the latest version of Vite.

When prompted, use blinkid-integration as the Project name, select Vanilla as a framework (meaning, no framework) and Javascript as the variant (meaning, the language; other option is TypeScript). The output you should see is similar to this:

✔ Nombre del proyecto: … blinkid-integration
✔ Selecciona un marco de trabajo: › Vanilla
✔ Selecciona una variante: › JavaScript

Generando el esqueleto del proyecto en /Users/nikola/DEV/test-vite/blinkid-integration...

Hecho. Ahora ejecuta:

  cd blinkid-integration
  npm install
  npm run dev

Ejecución de nuestro proyecto con estructura de andamiaje

Ejecutemos los comandos (en la terminal) que aparecen al final de la salida anterior:

cd blinkid-integration
npm install
npm run dev

Una vez que haya terminado, deberías obtener un resultado similar a este:

Se han añadido 10 paquetes y se han auditado 11 paquetes en 10 s

Hay 3 paquetes que buscan financiación
  Ejecuta `npm fund` para obtener más detalles

Se han encontrado 0 vulnerabilidades

> blinkid-integration@0.0.0 dev
> vite

El puerto 5173 está en uso, probando con otro...

  VITE v5.3.2  listo en 209 ms

  ➜  Local:   http://localhost:5174/
  ➜  Red: utiliza --host para exponerlo
  ➜  pulsa h + Intro para mostrar la ayuda

Si abres http://localhost:5174, deberías ver la siguiente página en tu navegador:

Como era de esperar, si haces clic en el botón «El recuento es 0», el número aumentará.

Incorporación del SDK de BlinkID

A continuación, instalemos el SDK de BlinkID ejecutando el siguiente código en la terminal:

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

Copiar la carpeta «resources»

This is a very important step, that often gets overlooked! So, please make sure to copy the resources folder (found in node_modules/@microblink/blinkid-in-browser-sdk/resources) into the public folder.

Creación de una estructura HTML básica

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

If you’re interested and haven’t used Vite before, I encourage you to check out the code. It showcases the ability to use the import command.

Now, let’s replace the current contents of the index.html file with the following:

<!doctype html><\n>
<html lang="en"><\n>
  <head><\n>
    <meta charset="UTF-8" /><\n>
    <link rel="icon" type="image/svg+xml" href="/vite.svg" /><\n>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Prueba de BlinkID</title>
  </head>
  <body>
    <video id="myCameraVideoElement"></video>
    <script type="module" src="/main.js"></script>
  </body>
</html>

You will notice that we only changed the title, and instead of <div id="app"></div> added <video id="myCameraVideoElement"></video>.

Incorporación de JavaScript para el escaneo y la extracción de documentos

Replace all the contents of main.js file with the following code:

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],
          true
        );

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

          const processResult = await videoRecognizer.recognize();
          console.log(resultadoDelProceso);

          if (resultadoDelProceso !== BlinkIDSDK.RecognizerResultState.Empty) {
            const resultadoDelReconocimiento = await reconocedor.getResult();
            console.log(resultadoDelReconocimiento);
          }
          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, veamos qué hace este código…

const LICENSE = '';
import * as BlinkIDSDK from "@microblink/blinkid-in-browser-sdk";

if (BlinkIDSDK.isBrowserSupported()) {

Línea por línea:

• We defined a constant called LICENSE (we’ll tackle this in the next section).
• Imported all the exported members from the @microblink/blinkid-in-browser-sdk package, and assigned them to the BlinkIDSDK object.
• Se ha comprobado 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(LICENSE);
loadSettings.engineLocation = window.location.origin + "/resources/";

Línea por línea:

• Created a new instance of WasmSDKLoadSettings, passing the LICENSE constant.
  • Este objeto contiene los parámetros de configuración para cargar el módulo WebAssembly (WASM) del SDK. Puedes obtener más información al respecto 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.
  • If you’d copy/paste the actual content of the resources folder into the public folder, then you wouldn’t need to set this specifically.
• Called the loadWasmModule method to load the WASM module with the specified settings.
  • This method returns a promise, and once it resolves succesfully, the asynchronous callback function is executed, exposing the wasmSDK variable.

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

Línea por línea:

• Created an instance of BlinkIdSingleSideRecognizer.
• Created a RecognizerRunner instance which manages the recognition process.
  • Toma como parámetros una instancia del SDK de Wasm, una matriz de reconocedores y un indicador booleano que señala si el reconocedor debe permitir múltiples resultados o no (más información al respecto aquí).

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

Línea por línea:

• He seleccionado el elemento de vídeo del DOM que se utilizará para mostrar la imagen de la cámara.
• In a try/catch block we created a VideoRecognizer instance from the camera stream using the selected video element (cameraFeed) and the recognizer runner (recognizerRunner).

const processResult = await videoRecognizer.recognize();
console.log(processResult);

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

Línea por línea:

• Se ha iniciado el proceso de reconocimiento y se ha registrado el resultado en la consola.
• Se comprobó si el resultado del proceso no estaba vacío; a continuación, se esperó a recibir los resultados del reconocedor y se registraron en la consola.
• Si el resultado del proceso está vacío, registramos el mensaje correspondiente.

Finally, we catch any errors from the try/catch and promise.

Prueba de la integración – intento n.º 1

If you open the index.html file in a web browser, you’ll see and error, something along the lines of:

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

This is because we haven’t defined the license in the LICENSE variable.

Cómo obtener la licencia

Para solucionar esto, tenemos que ir a https://login.microblink.com/ para crear una cuenta en Developer Hub. Aparecerá el formulario de registro habitual:

Te harán unas cuantas preguntas que puedes saltarte (si eres desarrollador, gestor de proyectos, etc. 🙂).

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

Una vez que hayas iniciado sesión, verás un panel de control como este:

Here you should click on the Start New Trial button, and in the following screen select BlinkID as the product, InBrowser as the platform, and localhost as the domain name for the testing environment. Before going into production, you should update the domain name to your actual domain.

Then you’ll get to a screen where you can copy the code (it’ll be a long, so-called Base64, string of numbers and letters). Paste this code into the LICENSE variable in the main.js file, and you’ll be all set.

Por cierto, si te interesa, BlinkID está disponible para muchas plataformas; puedes consultar la lista de plataformas en este enlace.

Prueba de la integración: intento n.º 2

If you open the index.html file in your browser again, you’ll be presented with a camera feed where you should show some ID. I Googled US driver’s license example, took the first image on the results page, and printed it out.

Entonces, si le enseñas esta imagen a la cámara, esta mostrará todos los datos disponibles en el registro de la consola:

Conclusión

La integración del SDK de BlinkID en tu aplicación web es un proceso sencillo que puede mejorar considerablemente las capacidades de registro y procesamiento de tu aplicación.

Siguiendo estos pasos, podrás configurar las funciones de escaneo de documentos y OCR para extraer datos de los permisos de conducir, mejorando así tanto la experiencia del usuario como la eficiencia en menos de 5 minutos.

Para quienes quieran saber más

Este era un ejemplo muy básico, solo para que pudieras empezar rápidamente.

Ahora bien, si quieres saber más, puedes echar un vistazo al repositorio oficial en GitHub, y también puedes intentar añadir algunas modificaciones por tu cuenta, como por ejemplo:

• Styling
  • Mejora el código HTML con CSS para que la interfaz resulte más intuitiva.
• Error handling and feedback
  • Mejorar la gestión de errores y ofrecer una mejor información a los usuarios.
• Extend functionality
  • Descubre las funciones del SDK de BlinkID y mejora las prestaciones de tu aplicación.