Pular para o conteúdo principal

A função initialize()

Para iniciar a Web OCR SDK, após ter instanciado a classe WebOCR, simplesmente chame a função initialize() passando o tipo do documento desejado como parâmetro.

Abaixo temos o detalhamento de cada um dos possíveis tipos de documento a serem escolhidos:

NomeTipoDescrição
cnhStringCaptura de CNH física FRENTE e VERSO (fechada), em duas etapas
rgStringCaptura de RG físico FRENTE e VERSO (fechado), em duas etapas
cnh_fullStringCaptura de CNH física ABERTA, em uma etapa
cnh_digitalStringEnvio de CNH digital (pdf)

Exemplo de Implementação

Um exemplo de implementação da Web OCR SDK pode ser visto abaixo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="/public/favicon.ico">
<link rel="stylesheet" href="./demo-styles.css">
<title>Web OCR</title>
<script src="https://ocr.caas.qitech.app/1-0-5/ocr.js"></script>
</head>

<body>
<div id="webOCR"></div>
<div class="demo-app-container">
<p>
Agora vamos coletar imagens do seu documento. Escolha entre os tipos abaixo:
</p>
<div class="personalDocumentTypesContainer">
<div class="personalDocumentTypes" onclick="initOCR('cnh');">
<p>Carteira Nacional de Habilitação Frente e Verso (CNH)</p>
<img src="./images/cnh-icon.png" style="width: 100px;" alt="CNH"></img>
</div>

<div class="personalDocumentTypes" onclick="initOCR('rg');">
<p>Cédula de Identidade (RG)</p>
<img src="./images/rg-icon.png" style="width: 100px;" alt="RG"></img>
</div>

<div class="personalDocumentTypes" onclick="initOCR('cnh_full');">
<p>Carteira Nacional de Habilitação Completa (CNH Full)</p>
<img src="./images/cnh-icon.png" style="width: 100px;" alt="CNH FULL"></img>
</div>

<div class="personalDocumentTypes" onclick="initOCR('cnh_digital');">
<p>Carteira Nacional de Habilitação Digital (CNH Digital)</p>
<img src="./images/cnh-icon.png" style="width: 100px;" alt="CNH DIGITAL"></img>
</div>
</div>
</div>
</body>

<script>
var htmlComponent = document.getElementById('webOCR')
var webOCR = new QiTechWebOCR.WebOCR(
htmlComponent,
"<WEB_TOKEN>",
"<SESSION_ID>"
)
.setThemeConfiguration(
{
"companyLogo": "https://my_company/logo.png",
"backgroundColor": "#FF9900",
"fontColor": "#FFFFFF",
"buttonColor": "#146EB4",
"fontFamily": "Verdana"
}
)
.setShowInstructionScreen(true)
.setShowSuccessScreen(true)
.setSandboxEnvironment()
.build()

function initOCR(document_type) {
webOCR.initialize(document_type)
.then((ocr_key) => {
console.log(ocr_key)
})
.catch((error) => {
console.log(error)
})
}
</script>
</html>

No exemplo acima, temos inicialmente a instanciação da classe WebOCR, onde são passados todos os parâmetros obrigatórios e opcionais para customizar a aparência da SDK. Com a SDK instânciada, foi criada uma função de suporte chamada initOCR(), que faz a inicialização da SDK com a função initialize() e ao final do fluxo de captura do documento, o log das ocr_keys retornadas ou do erro, caso ocorra. Essa função é atribuída ao callback do onClick de diversos botões que representam diferentes documentos, permitindo a inicialização da SDK para o documento desejado a partir do clique de um botão.