A função initialize()

Para iniciar a Web OCR SDK, após ter instanciado a classe WebOCR, simplesmente chame a função initialize() passando uma lista de documentos permitidos 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 (fechada), em duas etapas, FRENTE e VERSO
rg	String	Captura de RG físico (fechado), em duas etapas, FRENTE e VERSO
cin_digital	String	Envio da Cédula de Identidade Nacional (CIN) digital (pdf) emitida por um aplicativo oficial
rg_digital	String	Envio do RG digital (pdf) emitido por um aplicativo oficial
national_registry_of_foreigners	String	Captura do RNE físico, em duas etapas, FRENTE e VERSO
national_migration_registry	String	Captura da CRNM física, em duas etapas, FRENTE e VERSO
others	String	Deve ser usado para permitir o envio de outros documentos além dos listados acima

Atenção

Adicionar o tipo others nos templates permitidos faz com que todo documento enviado seja aceito. Assim, mesmo documentos não oficiais serão aceitos.

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/3-0-4/ocr.js"></script>
</head>
<body>
    <div id="webOCR"></div>
    <div class="demo-app-container">
        <p>
        Agora vamos coletar imagens do seu documento.
        </p>
        <div class="personalDocumentTypesContainer">
            <div class="personalDocumentTypes" onclick="initOCR(['rg', 'cnh', 'rg_digital', 'cnh_digital']);">
                <p>Iniciar coleta do documento</p>
                <img src="./images/personal-document-icon.png" style="width: 100px;">
            </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)
    .setShowAllowedTemplatesScreen(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 um botão, permitindo a inicialização da SDK para os documentos desejados a partir de um clique do botão.

A função initialize()

Exemplo de Implementação​

Exemplo de Implementação