Integração da digitalização e extração de documentos de identidade em aplicativos da Web com o SDK do BlinkID

Neste tutorial passo a passo, vamos mostrar como começar a digitalizar e extrair os dados de uma carteira de motorista usando o SDK BlinkID da Microblink.

Se você estiver com pouco tempo e quiser ver esse trabalho em ação imediatamente, dê uma olhada nos aplicativos de demonstração.

Melhor ainda, experimente isso em menos de 5 minutos no seu computador (se você tiver o Node e o Git instalados), seguindo estas etapas:

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

Se você preferir um vídeo curto sobre como executar este projeto, fique à vontade para conferi-lo aqui.

Se você quiser recriar este projeto do zero, veja abaixo o guia passo a passo.

O problema

Vamos contextualizar: você administra uma empresa de aluguel de carros, e seus clientes precisam inserir as informações da carteira de habilitação em um formulário na sua página da web. Esse processo costuma ser propenso a erros e, muitas vezes, demora um pouco, e você observa uma alta taxa de abandono nessa tela específica.

Você aprofunda a análise com suas equipes de pesquisa de produto e de usuários e descobre que as pessoas costumam cometer erros ao inserir as informações e que, em geral, consideram o processo complicado.

Agora, imagine o seguinte: você implementa uma biblioteca que permite oferecer aos clientes a possibilidade de simplesmente escanear seu documento de identidade com a câmera, e pronto: todos os dados do documento são preenchidos automaticamente.

Sem complicações, sem erros e rápido!

Ficou curioso? OK, vamos percorrer passo a passo o processo para começar a usar isso.

De modo geral, integrar recursos avançados de digitalização de documentos e OCR à sua aplicação web pode melhorar significativamente a experiência do usuário e otimizar processos, independentemente do setor. O BlinkID SDK da Microblink oferece soluções robustas e confiáveis para digitalizar não apenas carteiras de motorista, mas também documentos de identidade, passaportes e outros documentos. Nesta postagem do blog, vou guiá-lo pelas etapas para integrar o BlinkID ao seu aplicativo web para extrair dados de uma carteira de motorista, e vamos nos aprofundar em outras soluções em postagens futuras.

Pré-requisitos

Certifique-se de que as seguintes ferramentas estejam instaladas:

• Node.js – acesse o site oficial e baixe o executável para o seu computador
• Git – acesse o site oficial e baixe o executável para o seu computador

Começando um novo projeto com o Vite

Como você pode ver no último relatório “State of JS”, o Vite se tornou uma das ferramentas de compilação mais apreciadas; por isso, vamos usá-lo aqui.

Caso você esteja se perguntando por que isso é importante, há uma explicação bem longa aqui; e uma resposta bem rápida, mas um pouco complicada, é a seguinte:

O Vite utiliza módulos ES nativos para oferecer um servidor de desenvolvimento rápido com substituição instantânea de módulos em tempo de execução (HMR), tornando o desenvolvimento mais ágil e eficiente e gerando compilações otimizadas e prontas para produção.

Para ser franco, você não deve usar o Vite só porque a galera descolada está usando, mas porque ele realmente vai melhorar muito a sua experiência de desenvolvimento.

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:

✔ Nome do projeto: … blinkid-integration
✔ Selecione uma estrutura: › Vanilla
✔ Selecione uma variante: › JavaScript

Criando a estrutura do projeto em /Users/nikola/DEV/test-vite/blinkid-integration...

Concluído. Agora execute:

  cd blinkid-integration
  npm install
  npm run dev

Executando nosso projeto com estrutura de apoio

Vamos executar os comandos (no terminal) indicados no final da saída anterior:

cd blinkid-integration
npm install
npm run dev

Quando isso terminar, você deverá obter um resultado semelhante a este:

adicionou 10 pacotes e auditou 11 pacotes em 10s

3 pacotes estão buscando financiamento
  execute `npm fund` para obter detalhes

encontrou 0 vulnerabilidades

> blinkid-integration@0.0.0 dev
> vite

A porta 5173 está em uso, tentando outra...

  VITE v5.3.2  pronto em 209 ms

  ➜  Local:   http://localhost:5174/
  ➜  Rede: use --host para expor
  ➜  pressione h + Enter para mostrar a ajuda

Você deverá ver a seguinte página no seu navegador ao acessar http://localhost:5174:

Como era de se esperar, se você clicar no botão “contagem é 0”, o número aumentará.

Incorporando o SDK do BlinkID

A seguir, vamos instalar o SDK do BlinkID executando o código a seguir no terminal:

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

Copiando a pasta “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.

Criação de uma estrutura básica em HTML

Se você abrir o projeto com o modelo no seu editor preferido (estou usando o VSCode), verá esta estrutura de pastas:

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>Teste do 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>.

Incorporando JavaScript para digitalização e extração 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(processResult);

          if (processResult !== BlinkIDSDK.RecognizerResultState.Empty) {
            const recognitionResult = await recognizer.getResult();
            console.log(recognitionResult);
          }
          else {
            console.log("O reconhecimento não foi bem-sucedido!");
          }

        }
        catch (error) {
          console.error(error);
        }
      },
      (error) => {
        console.log("Erro durante a inicialização do SDK!", error);
      }
    )
}
else {
  console.log("Este navegador não é compatível com o SDK!");
}

Agora, vamos entender o que esse código está fazendo…

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

if (BlinkIDSDK.isBrowserSupported()) {

Linha por linha:

• 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.
• Verificou se o navegador atual é compatível com o SDK do BlinkID (você pode consultar a lista de navegadores compatíveis em nossa documentação).

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

Linha por linha:

• Created a new instance of WasmSDKLoadSettings, passing the LICENSE constant.
  • Este objeto contém as configurações para carregar o módulo WebAssembly (WASM) do SDK. Você pode ler mais sobre isso aqui.
• 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
);

Linha por linha:

• Created an instance of BlinkIdSingleSideRecognizer.
• Created a RecognizerRunner instance which manages the recognition process.
  • Ele recebe a instância do Wasm SDK, uma matriz de reconhecedores e um sinalizador booleano que indica se o reconhecedor deve permitir vários resultados ou não (saiba mais sobre isso aqui).

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

Linha por linha:

• Selecionei o elemento de vídeo do DOM que será usado para exibir a imagem da câmera.
• 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(resultadoDoReconhecimento);
}
else {
    console.log("O reconhecimento não foi bem-sucedido!");
}

Linha por linha:

• Iniciei o processo de reconhecimento e registrei o resultado no console.
• Verifiquei se o resultado do processo não estava vazio; em seguida, aguardei os resultados do reconhecedor e os registrei no console.
• Se o resultado do processo estiver vazio, registramos a mensagem correspondente.

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

Testando a integração – tentativa nº 1

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

Erro não capturado
    em new WasmSDKLoadSettings (@microblink_blinkid-in-browser-sdk.js?v=1a0eef98:1868:13)
    em main.js:5:24

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

Obter a licença

Para resolver isso, precisamos acessar https://login.microblink.com/ para criar uma conta no Developer Hub. Será exibido o formulário padrão de cadastro:

Serão feitas algumas perguntas que você pode pular (se for desenvolvedor, gerente de produto etc. 🙂).

E você receberá um e-mail de confirmação.

Depois de fazer login, você verá um painel 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.

A propósito, se você estiver curioso, o BlinkID está disponível para várias plataformas; confira a lista de plataformas neste link.

Testando a integração – tentativa 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.

Então, se você mostrar essa imagem para a câmera, ela exibirá todos os dados disponíveis no log do console:

Conclusão

Integrar o SDK do BlinkID à sua aplicação web é um processo simples que pode aprimorar significativamente os recursos de integração e processamento do seu aplicativo.

Seguindo essas etapas, você poderá configurar as funcionalidades de digitalização de documentos e OCR para extrair dados de carteiras de motorista, melhorando tanto a experiência do usuário quanto a eficiência em menos de 5 minutos.

Para quem quiser saber mais

Este foi um exemplo bem básico, apenas para você começar rapidamente.

Agora, se você quiser saber mais, pode conferir o repositório oficial no GitHub e também pode tentar fazer algumas modificações por conta própria, como:

• Styling
  • Aprimore o HTML com CSS para tornar a interface mais intuitiva.
• Error handling and feedback
  • Adicionar um tratamento de erros mais eficaz e oferecer um feedback melhor aos usuários.
• Extend functionality
  • Explore os recursos do SDK do BlinkID e aprimore as funcionalidades do seu aplicativo.