Integrando o escaneamento e a extração de IDs em aplicativos da Web com o BlinkID SDK

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

Se você estiver com pouco tempo e quiser ver esse trabalho em ação imediatamente, confira os aplicativos de demonstração.

Melhor ainda, teste isso em menos de 5 minutos em seu computador (se você tiver o Node e o Git instalados) executando as etapas a seguir:

• Em seu terminal, clone este repositório com git clone https://github.com/Hitman666/BlinkID-InBrowserSDK-GettingStarted.git
• Obtenha a licença no Microblink Developer Hub e adicione-a à variável LICENSE no arquivo main.js.
• executar cd BlinkID-InBrowserSDK-GettingStarted && npm install && npm run dev
• Abra http://localhost:5173/

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

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

O problema

Vamos preparar o cenário: você está administrando uma empresa de aluguel de carros e seus clientes precisam inserir as informações da carteira de motorista em um formulário da Web no seu site. Esse processo geralmente é propenso a erros e, muitas vezes, demora um pouco, e você observa uma taxa de abandono acentuada nessa tela específica.

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

Agora, imagine o seguinte: você implementa uma biblioteca que permite que você ofereça aos clientes a possibilidade de apenas escanear a identidade com a câmera e pronto: você preenche automaticamente todos os detalhes da identidade.

Sem falhas, sem erros e rápido!

Você ficou intrigado? OK, vamos examinar o processo passo a passo para você começar a fazer isso.

Em geral, a integração de recursos avançados de digitalização de documentos e OCR ao seu aplicativo da Web pode melhorar significativamente a experiência do usuário e agilizar os processos, independentemente do setor. O SDK BlinkID da Microblink oferece soluções robustas e confiáveis para a digitalização não apenas de carteiras de motorista, mas também de identidades, passaportes e outros documentos. Nesta postagem do blog, vou orientar você nas etapas para integrar o BlinkID ao seu aplicativo da Web para extrair dados de uma carteira de motorista, e vamos nos aprofundar em outras soluções em outras postagens.

Pré-requisitos

Certifique-se de que você tenha as seguintes ferramentas instaladas:

• Node.js – acesse o site principal e faça o download do executável para sua máquina
• Git – acesse o site principal e faça o download do executável para sua máquina

Iniciando 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 adoradas, portanto, vamos usá-lo aqui.

Caso você esteja se perguntando por que isso é importante, uma longa explicação está aqui, e uma resposta muito rápida, mas de dar água na boca, é esta:

O Vite aproveita os módulos ES nativos para fornecer um servidor de desenvolvimento rápido com substituição instantânea de módulo quente (HMR), tornando o desenvolvimento mais suave e eficiente e produzindo compilações otimizadas e prontas para a produção.

Para ser franco, você não deve usar o Vite porque as pessoas descoladas o estão usando, mas porque ele realmente tornará sua experiência de desenvolvimento muito melhor.

OK, com a teoria fora do caminho, vamos executar o seguinte comando em seu terminal: npm create vite@latest. Isso executará a versão mais recente do Vite.

Quando solicitado, use blinkid-integration como o nome do projeto, selecione Vanilla como uma estrutura (ou seja, nenhuma estrutura) e Javascript como a variante (ou seja, a linguagem; a outra opção é TypeScript). A saída que você deve ver é semelhante a esta:

✔ Nome do projeto: ... blinkid-integration ✔ Selecione uma estrutura: ' Vanilla ✔ Selecione uma variante: ' JavaScript Scaffolding project in /Users/nikola/DEV/test-vite/blinkid-integration...
Pronto.
Agora execute: cd blinkid-integration npm install npm run dev  

Executando nosso projeto de andaime

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

cd blinkid-integration npm install npm run dev

Quando isso for concluído, você deverá obter um resultado semelhante a este:

adicionou 10 pacotes e auditou 11 pacotes em 10s 3 pacotes estão procurando por financiamento execute `npm fund` para obter detalhes encontrou 0 vulnerabilidades > blinkid-integration@0.0.0 dev > vite A porta 5173 está em uso, tente 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 

Se você abrir o site http://localhost:5174, deverá ver a seguinte página no navegador :

Como esperado, se você clicar no botão count is 0, o número aumentará.

Adicionando o SDK da BlinkID

Em seguida, vamos instalar o BlinkID SDK executando o seguinte código no terminal:

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

Copiar a pasta de recursos

Esta é uma etapa muito importante, que muitas vezes é esquecida! Portanto, certifique-se de copiar a pasta resources (encontrada em node_modules/@microblink/blinkid-in-browser-sdk/resources) para a pasta public.

Criação de uma estrutura HTML básica

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

Se você estiver interessado e não tiver usado o Vite antes, recomendo que dê uma olhada no código. Ele mostra a capacidade que você tem de usar o comando import.

Agora, vamos substituir o conteúdo atual do arquivo index.html pelo seguinte:

<!doctype html>
<html lang="en">
  <cabeça>
    <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>Teste do BlinkID</title>
  </head>
  <corpo>
    <vídeo id="myCameraVideoElement"></video><script type="module" src="/main.js"></script></body></html>

Você notará que alteramos apenas o title e, em vez de <div id="app"></div>, adicionamos <video id="myCameraVideoElement"></video>.

Adição de JavaScript para digitalização e extração de documentos

Substitua todo o conteúdo do arquivo main.js pelo seguinte 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], 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:

• Definimos uma constante chamada LICENSE (trataremos disso na próxima seção).
• Importou todos os membros exportados do pacote @microblink/blinkid-in-browser-sdk e os atribuiu ao objeto BlinkIDSDK.
• Verificou se o navegador atual é compatível com o SDK da BlinkID (você pode ver 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.
  • Esse objeto contém as definições de configuração para carregar o módulo WebAssembly (WASM) do SDK. Você pode ler mais sobre ele 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.
  • Se você copiasse/colasse o conteúdo real da pasta resources na pasta public, não precisaria definir isso especificamente.
• Called the loadWasmModule method to load the WASM module with the specified settings.
  • Esse método retorna uma promessa e, quando a resolução for bem-sucedida, a função de retorno de chamada assíncrona será executada, expondo a variável wasmSDK.

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

Linha por linha:

• Você criou uma instância do site 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 (leia mais sobre isso aqui).

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

Linha por linha:

• Selecionou o elemento de vídeo do DOM que será usado para exibir o feed da câmera.
• Em um bloco try/catch, criamos uma instância VideoRecognizer a partir do fluxo da câmera usando o elemento de vídeo selecionado (cameraFeed) e o reconhecedor (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!"); }

Linha por linha:

• Iniciou o processo de reconhecimento e registrou o resultado no console.
• Verificou se o resultado do processo não está vazio e, em seguida, aguardou os resultados do reconhecedor e os registrou no console.
• Se o resultado do processo estiver vazio, registraremos a mensagem apropriada.

Por fim, capturamos todos os erros do site try/catch e prometemos a você.

Testando a integração – etapa 1

Se você abrir o arquivo index.html em um navegador da Web, verá um erro, algo parecido com o seguinte:

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

Isso ocorre porque não definimos a licença na variável LICENSE.

Obtenção da licença

Para corrigir isso, precisamos acessar https://login.microblink.com/ para criar uma conta no Developer Hub. Você será solicitado a preencher o formulário de inscrição padrão:

Serão feitas algumas perguntas que você pode ignorar (se você for um desenvolvedor, PM, etc.).

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

Depois de fazer login, você verá um painel como este:

Aqui você deve clicar no botão Start New Trial e, na tela seguinte, selecionar BlinkID como o produto, InBrowser como a plataforma e localhost como o nome de domínio para o ambiente de teste. Antes de entrar em produção, você deve atualizar o nome do domínio para o seu domínio real.

Em seguida, você chegará a uma tela em que poderá copiar o código (será uma longa sequência de números e letras, chamada Base64). Cole esse código na variável LICENSE no arquivo main.js e você estará pronto.

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

Testando a integração – passo #2

Se você abrir o arquivo index.html no navegador novamente, verá um feed de câmera em que deverá mostrar alguma identificação. Pesquisei no Google um exemplo de carteira de motorista dos EUA, peguei a primeira imagem na página de resultados e a imprimi.

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

Conclusão

A integração do SDK da BlinkID ao seu aplicativo da Web é um processo simples que pode melhorar significativamente os recursos de integração/processamento do seu aplicativo.

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

Para aqueles que desejam saber mais

Este foi um exemplo básico apenas para que você comece a trabalhar rapidamente.

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

• Estilo
  • Aprimore o HTML com CSS para tornar a interface mais fácil de usar.
• Tratamento de erros e feedback
  • Adicione um melhor tratamento de erros e forneça um feedback melhor aos usuários.
• Ampliar a funcionalidade
  • Explore os recursos do BlinkID SDK e aprimore os recursos de seu aplicativo.