Intégration de la numérisation et de l’extraction d’identité dans les applications Web avec le SDK BlinkID

Dans ce tutoriel étape par étape, nous vous montrons comment commencer à scanner 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 voulez voir ce travail en action immédiatement, consultez les applications de démonstration.

Mieux encore, testez ceci en moins de 5 minutes sur votre machine (si vous avez installé Node et Git) en suivant les étapes suivantes :

• dans votre terminal, clonez ce repo avec git clone https://github.com/Hitman666/BlinkID-InBrowserSDK-GettingStarted.git
• obtenez la licence sur Microblink Developer Hub et ajoutez-la à la variable LICENSE dans le fichier main.js
• courir cd BlinkID-InBrowserSDK-GettingStarted && npm install && npm run dev
• ouvrir http://localhost:5173/

Si vous préférez une courte vidéo sur l’exécution de ce projet, n’hésitez pas à la consulter ici.

Si vous souhaitez recréer ce projet à partir de zéro, voici le guide étape par étape.

Le problème

Plantons le décor : vous gérez une entreprise de location de voitures et vos clients doivent saisir les informations relatives à 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 du temps, et vous observez un taux d’abandon élevé sur cet écran particulier.

Vous approfondissez la question avec vos équipes de recherche sur les produits et les utilisateurs et vous découvrez que les gens font souvent des erreurs en saisissant les informations et qu’ils trouvent, en général, le processus fastidieux.

Maintenant, imaginez ceci : vous mettez en place une bibliothèque qui vous permet d’offrir aux clients la possibilité de scanner leur pièce d’identité avec leur appareil photo, et woila : vous remplissez automatiquement tous les détails de leur pièce d’identité.

Sans faille, sans erreur et rapide !

Intrigué ? D’accord, passons en revue les différentes étapes de ce processus.

En général, l’intégration de fonctions avancées de numérisation de documents et d’OCR dans votre application web peut considérablement améliorer l’expérience de l’utilisateur et rationaliser les processus, quel que soit le secteur d’activité. Le SDK BlinkID de Microblink offre des solutions robustes et fiables pour scanner non seulement les permis de conduire, mais aussi les cartes d’identité, les passeports et d’autres documents. Dans cet article de blog, je vous guiderai à travers les étapes de l’intégration de BlinkID dans votre application web pour extraire les données d’un permis de conduire, et nous approfondirons d’autres solutions dans d’autres articles.

Conditions préalables

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

• Node.js – allez sur le site principal et téléchargez l’exécutable pour votre machine.
• Git – allez sur le site web principal et téléchargez l’exécutable pour votre machine

Démarrer un nouveau projet avec Vite

Comme vous pouvez le voir dans le dernier rapport State of JS, Vite est devenu l’un des outils de construction les plus appréciés, c’est pourquoi nous l’utiliserons ici.

Si vous vous demandez pourquoi c’est important, vous trouverez ici une explication très longue, et une réponse très rapide, mais savoureuse, est la suivante :

Vite exploite les modules ES natifs pour fournir un serveur de développement rapide avec remplacement instantané des modules à chaud (HMR), 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.

En clair, vous ne devriez pas utiliser Vite parce que les jeunes branchés l’utilisent, mais parce qu’il améliorera votre expérience de développement.

OK, la théorie étant posée, lançons la commande suivante dans votre terminal : npm create vite@latest. Cette commande lancera la dernière version de Vite.

Lorsque vous y êtes invité, utilisez blinkid-integration comme nom de projet, sélectionnez Vanilla comme framework (c’est-à-dire aucun framework) et Javascript comme variante (c’est-à-dire le langage ; l’autre option est TypeScript). La sortie que vous devriez voir est similaire à celle-ci :

✔ Nom du projet : ... blinkid-integration ✔ Sélectionnez un framework : ' Vanilla ✔ Sélectionnez une variante : ' JavaScript Projet d'échafaudage dans /Users/nikola/DEV/test-vite/blinkid-integration...
C'est fait.
Exécutez maintenant : cd blinkid-integration npm install npm run dev  

Exécuter notre projet d’échafaudage

Exécutons les commandes (dans le terminal) notées à la fin de la sortie précédente :

cd blinkid-integration npm install npm run dev

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

ajout de 10 paquets, et audit de 11 paquets en 10s 3 paquets sont à la recherche de financement run `npm fund` for details found 0 vulnerabilities > blinkid-integration@0.0.0 dev > vite Le port 5173 est en cours d'utilisation, essayez-en un autre...
VITE v5.3.2 prêt en 209 ms ➜ Local : http://localhost:5174/ ➜ Réseau : utilisez --host pour exposer ➜ appuyez sur h + enter pour afficher l'aide 

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

Comme prévu, si vous cliquez sur le bouton « count is 0 », le nombre augmente.

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 des ressources

Il s’agit d’une étape très importante, qui est souvent négligée ! Veillez donc à copier le dossier resources (qui se trouve dans node_modules/@microblink/blinkid-in-browser-sdk/resources) dans le dossier public.

Création d’une structure HTML de base

Si vous ouvrez le projet échafaudé dans votre éditeur préféré (j’utilise VSCode), vous verrez cette structure de dossiers :

Si vous êtes intéressé et que vous n’avez jamais utilisé Vite, je vous encourage à consulter le code. Il illustre la possibilité d’utiliser la commande import.

Remplaçons maintenant le contenu actuel du fichier index.html par ce qui suit :

<!doctype html>
<html lang="en">
  <tête>
    <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" />
    <titre>Test BlinkID</title>
  </head>
  <corps>
    <video id= "myCameraVideoElement"></video><script type="module" src="/main.js"></script></body></html>

Vous remarquerez que nous n’avons changé que le title, et qu’au lieu du <div id="app"></div> nous avons ajouté le <video id="myCameraVideoElement"></video>.

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

Remplacez tout le contenu du fichier main.js par le code suivant :

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("Recognition was not successful !") ; }. } catch (error) { console.error(error) ; } }, (error) => { console.log("Erreur lors de l'initialisation du SDK !", error) ; } } ) } else { console.log("Ce navigateur n'est pas supporté par le SDK !") ; }

Comprenons maintenant ce que fait ce code…

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

Ligne par ligne :

• Nous avons défini une constante appelée LICENSE (nous aborderons ce point dans la section suivante).
• Importation de tous les membres exportés du paquet @microblink/blinkid-in-browser-sdk et affectation à l’objet BlinkIDSDK.
• Vérifie si le navigateur actuel est pris en charge 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 pour le chargement du 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.
  • Si vous copiez/collez le contenu du dossier resources dans le dossier public, vous n’aurez pas besoin de définir ce paramètre.
• Called the loadWasmModule method to load the WASM module with the specified settings.
  • Cette méthode renvoie une promesse, et une fois qu’elle est résolue avec succès, la fonction de rappel asynchrone est exécutée, exposant la variable wasmSDK.

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

Ligne par ligne :

• Création d’une instance de BlinkIdSingleSideRecognizer.
• Created a RecognizerRunner instance which manages the recognition process.
  • Il prend l’instance Wasm SDK, un tableau d’outils de reconnaissance et un indicateur booléen indiquant si l’outil de reconnaissance doit permettre des résultats multiples ou non (pour en savoir plus, cliquez ici).

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

Ligne par ligne :

• Sélectionnez l’élément vidéo du DOM qui sera utilisé pour afficher le flux de la caméra.
• Dans un bloc try/catch, nous avons créé une instance VideoRecognizer à partir du flux de la caméra en utilisant l’élément vidéo sélectionné (cameraFeed) et le moteur de reconnaissance (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("Recognition was not successful !") ; }.

Ligne par ligne :

• Lance le processus de reconnaissance et enregistre le résultat dans la console.
• Vérifie si le résultat du processus n’est pas vide, puis attend les résultats de l’outil de reconnaissance et les enregistre dans la console.
• Si le résultat du processus est vide, nous enregistrons le message approprié.

Enfin, nous rattrapons toutes les erreurs provenant de try/catch et de la promesse.

Test de l’intégration – étape 1

Si vous ouvrez le fichier index.html dans un navigateur web, vous verrez une erreur, quelque chose du genre :

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

C’est parce que nous n’avons pas défini la licence dans la variable LICENSE.

Obtenir la licence

Pour résoudre ce problème, nous devons aller sur https://login.microblink.com/ pour créer un compte dans Developer Hub. Vous serez invité à remplir le formulaire d’inscription standard :

On vous posera quelques questions que vous pouvez ignorer (si vous êtes un développeur, un PM, etc 🙂 ).

Vous recevrez un courriel de confirmation.

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

Cliquez sur le bouton Start New Trial et, dans l’écran suivant, sélectionnez BlinkID comme produit, InBrowser comme plateforme et localhost comme nom de domaine pour l’environnement de test. Avant de passer à la production, vous devez mettre à jour le nom de domaine avec votre domaine réel.

Vous arriverez alors à un écran où vous pourrez copier le code (il s’agira d’une longue chaîne de chiffres et de lettres, appelée Base64). Collez ce code dans la variable LICENSE du fichier main.js, et vous serez prêt.

BTW, si vous êtes curieux, BlinkID est disponible pour de nombreuses plates-formes, vous trouverez la liste des plates-formes sur ce lien.

Test de l’intégration – étape 2

Si vous ouvrez à nouveau le fichier index.html dans votre navigateur, vous verrez apparaître une caméra qui vous demandera de présenter une pièce d’identité. J’ai cherché sur Google un exemple de permis de conduire américain, j’ai pris la première image de la page de résultats et je l’ai imprimée.

Si vous montrez cette image à la caméra, elle 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 améliorer de manière significative les capacités d’embarquement et de traitement de votre application.

En suivant ces étapes, vous pouvez configurer les fonctionnalités de numérisation de documents et d’OCR pour extraire les données des permis de conduire, améliorant ainsi l’expérience de l’utilisateur et l’efficacité en moins de 5 minutes.

Pour ceux qui veulent en savoir plus

Il s’agit d’un exemple très simple pour vous permettre de démarrer rapidement.

Maintenant, si vous souhaitez en savoir plus, vous pouvez consulter le repo officiel sur Github, et vous pouvez également essayer d’ajouter quelques modifications vous-même, comme par exemple :

• Stylisme
  • Améliorez le code HTML à l’aide de CSS pour rendre l’interface plus conviviale.
• Traitement des erreurs et retour d’information
  • Améliorez la gestion des erreurs et fournissez un meilleur retour d’information aux utilisateurs.
• Étendre les fonctionnalités
  • Découvrez les fonctionnalités du SDK BlinkID et améliorez les capacités de votre application.