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:

Nome	Tipo	Descrição
cnh	String	Captura de CNH física FRENTE e VERSO (fechada), em duas etapas
rg	String	Captura de RG físico FRENTE e VERSO (fechado), em duas etapas
cnh_full	String	Captura de CNH física ABERTA, em uma etapa
cnh_digital	String	Envio 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.

A função initialize()

Exemplo de Implementação​

Exemplo de Implementação