Intégration de la numérisation et de l'extraction des données d'identité dans les applications Web grâce au SDK BlinkID

Dans ce tutoriel étape par étape, nous allons vous montrer comment numériser et extraire les données d'un permis de conduire à l'aide du SDK BlinkID de Microblink.

Si vous êtes pressé par le temps et que vous souhaitez voir immédiatement ce fonctionnement en pratique, jetez un œil aux applications de démonstration.

Mieux encore, testez cela en moins de 5 minutes sur votre ordinateur (si Node et Git sont installés) en suivant les étapes suivantes :

• 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
• ouvrir http://localhost:5173/

Si vous préférez regarder une courte vidéo expliquant comment réaliser ce projet, n'hésitez pas à la visionner ici.

Si vous souhaitez reproduire ce projet en partant de zéro, voici le guide étape par étape.

Le problème

Mettons les choses en contexte : vous gérez une agence de location de voitures, et vos clients doivent saisir les informations de leur permis de conduire dans un formulaire en ligne sur votre site web. Ce processus est généralement source d'erreurs et prend souvent un certain temps, et vous constatez un taux d'abandon très élevé sur cet écran en particulier.

En creusant davantage avec vos équipes chargées de la recherche produit et de l'expérience utilisateur, vous constatez que les utilisateurs commettent souvent des erreurs lors de la saisie des informations et qu'ils trouvent, de manière générale, ce processus fastidieux.

Maintenant, imaginez ceci : vous mettez en place une bibliothèque qui vous permet d'offrir à vos clients la possibilité de simplement scanner leur pièce d'identité avec leur appareil photo, et hop : toutes les informations figurant sur leur pièce d'identité sont automatiquement renseignées.

Fluide, sans erreur et rapide !

Ça vous intéresse ? Très bien, voyons ensemble, étape par étape, comment vous lancer.

De manière générale, l'intégration de fonctionnalités avancées de numérisation de documents et de reconnaissance optique de caractères (OCR) dans votre application web peut considérablement améliorer l'expérience utilisateur et rationaliser les processus, quel que soit le secteur d'activité. Le SDK BlinkID de Microblink offre des solutions robustes et fiables pour numériser non seulement les permis de conduire, mais aussi les cartes d'identité, les passeports et d'autres documents. Dans cet article de blog, je vais vous guider à travers les étapes nécessaires à l'intégration de BlinkID dans votre application web afin d'extraire les données d'un permis de conduire ; nous approfondirons d'autres solutions dans de prochains articles.

Conditions préalables

Assurez-vous que les outils suivants sont installés :

• Node.js – rendez-vous sur le site officiel et téléchargez le fichier exécutable adapté à votre ordinateur
• Git – rendez-vous sur le site officiel et téléchargez le fichier exécutable adapté à votre ordinateur

Lancer un nouveau projet avec Vite

Comme vous pouvez le constater dans le dernier rapport « State of JS », Vite est devenu l'un des outils de build les plus appréciés ; c'est donc celui que nous utiliserons ici.

Si vous vous demandez pourquoi c'est important, vous trouverez ici une explication très détaillée ; quant à une réponse très succincte, mais un peu compliquée, la voici :

Vite s'appuie sur les modules ES natifs pour offrir un serveur de développement rapide doté de la fonctionnalité HMR (Hot Module Replacement) instantanée, ce qui rend le développement plus fluide et plus efficace, et permet de produire des versions optimisées et prêtes pour la production.

Pour parler franchement, vous ne devriez pas utiliser Vite simplement parce que les gens branchés s'en servent, mais parce que cela améliorera réellement votre expérience de développement.

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:

✔ Nom du projet : … blinkid-integration
✔ Sélectionnez un framework : › Vanilla
✔ Sélectionnez une variante : › JavaScript

Création du projet dans /Users/nikola/DEV/test-vite/blinkid-integration...

C'est fait. Exécutez maintenant :

  cd blinkid-integration
  npm install
  npm run dev

Exécution de notre projet structuré

Exécutons les commandes (dans le terminal) indiquées à la fin du résultat précédent :

cd blinkid-integration
npm install
npm run dev

Une fois cette opération terminée, vous devriez obtenir un résultat similaire à celui-ci :

10 paquets ajoutés et 11 paquets vérifiés en 10 s

3 paquets sont à la recherche de financement
  exécutez `npm fund` pour plus de détails

0 vulnérabilité détectée

> Développement blinkid-integration@0.0.0
> vite

Le port 5173 est utilisé, je tente un autre port...

  VITE v5.3.2  prêt en 209 ms

  ➜  Local :   http://localhost:5174/
  ➜  Réseau : utilisez --host pour l'exposer
  ➜  Appuyez sur h + Entrée pour afficher l'aide

Si vous ouvrez l'adresse http://localhost:5174, la page suivante devrait s'afficher dans votre navigateur :

Comme prévu, si vous cliquez sur le bouton « Le compteur est à 0 », le nombre augmentera.

Ajout du SDK BlinkID

Ensuite, installons le SDK BlinkID en exécutant le code suivant dans le terminal :

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

Copier le dossier « 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.

Création d'une structure HTML de base

Si vous ouvrez le projet « scaffoldé » dans votre éditeur préféré (j'utilise VSCode), vous verrez la structure de dossiers suivante :

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>
<html lang="en">
  <head>
    <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" />
    <title>Test 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>.

Ajout de code JavaScript pour la numérisation et l'extraction de documents

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(processResult);

          if (processResult !== BlinkIDSDK.RecognizerResultState.Empty) {
            const recognitionResult = await recognizer.getResult();
            console.log(recognitionResult);
          }
          else {
            console.log("La reconnaissance a échoué !");
          }

        }
        catch (error) {
          console.error(error);
        }
      },
      (error) => {
        console.log("Erreur lors de l’initialisation du SDK !", error);
      }
    )
}
else {
  console.log("Ce navigateur n’est pas pris en charge par le SDK !");
}

Voyons maintenant ce que fait ce code…

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

if (BlinkIDSDK.isBrowserSupported()) {

Ligne par ligne :

• 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.
• Vérification de la prise en charge du navigateur actuel par le SDK BlinkID (vous pouvez consulter la liste des navigateurs pris en charge dans notre documentation).

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

Ligne par ligne :

• Created a new instance of WasmSDKLoadSettings, passing the LICENSE constant.
  • Cet objet contient les paramètres de configuration permettant de charger le module WebAssembly (WASM) du SDK. Pour en savoir plus, cliquez ici.
• 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
);

Ligne par ligne :

• Created an instance of BlinkIdSingleSideRecognizer.
• Created a RecognizerRunner instance which manages the recognition process.
  • Elle prend en paramètre une instance du SDK Wasm, un tableau de modules de reconnaissance et un indicateur booléen précisant si le module de reconnaissance doit autoriser ou non plusieurs résultats (pour en savoir plus, cliquez ici).

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

Ligne par ligne :

• Sélection de l'élément vidéo dans le DOM qui servira à afficher le flux de la caméra.
• 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(recognitionResult);
}
else {
    console.log("La reconnaissance a échoué !");
}

Ligne par ligne :

• Le processus de reconnaissance a été lancé et le résultat a été enregistré dans la console.
• J'ai vérifié si le résultat du processus n'était pas vide, puis j'ai attendu les résultats du système de reconnaissance et je les ai enregistrés dans la console.
• Si le résultat du traitement est vide, nous enregistrons le message correspondant.

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

Test de l'intégration – essai n° 1

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

Erreur non gérée
    dans new WasmSDKLoadSettings (@microblink_blinkid-in-browser-sdk.js?v=1a0eef98:1868:13)
    dans main.js : 5:24

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

Obtenir le permis

Pour résoudre ce problème, il faut se rendre sur https://login.microblink.com/ afin de créer un compte sur Developer Hub. Le formulaire d'inscription standard s'affichera alors :

On vous posera quelques questions que vous pourrez ignorer (si vous êtes développeur, chef de projet, etc. 🙂).

Vous recevrez ensuite un e-mail de confirmation.

Une fois connecté, vous verrez un tableau de bord comme celui-ci :

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.

Au fait, si ça vous intéresse, BlinkID est disponible sur de nombreuses plateformes ; vous trouverez la liste complète en cliquant sur ce lien.

Test de l'intégration – 2e tentative

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.

Ensuite, si vous montrez cette image à la caméra, celle-ci affichera toutes les données disponibles dans le journal de la console :

Conclusion

L'intégration du SDK BlinkID dans votre application web est un processus simple qui peut considérablement améliorer les capacités d'intégration et de traitement de votre application.

En suivant ces étapes, vous pouvez configurer les fonctionnalités de numérisation et de reconnaissance optique de caractères (OCR) pour extraire les données des permis de conduire, ce qui permet d'améliorer à la fois l'expérience utilisateur et l'efficacité en moins de 5 minutes.

Pour ceux qui souhaitent en savoir plus

Il s'agissait d'un exemple très simple destiné à vous permettre de vous lancer rapidement.

Si vous souhaitez en savoir plus, vous pouvez consulter le dépôt officiel sur GitHub, et vous pouvez également essayer d'y apporter vous-même quelques modifications, par exemple :

• Styling
  • Améliorez le code HTML à l'aide du CSS afin de rendre l'interface plus conviviale.
• Error handling and feedback
  • Améliorer la gestion des erreurs et fournir un meilleur retour d'information aux utilisateurs.
• Extend functionality
  • Découvrez les fonctionnalités du SDK BlinkID et enrichissez les capacités de votre application.