Implementação

A inicialização da Web OCR SDK é realizada através da chamada da função .initialize(), que pertence a classe WebOCR e que está contida em nossa biblioteca QiTechWebOCR. O processo é dividido em duas etapas principais:

Configuração e Instanciação: Preparar e configurar a instância da SDK.
Inicialização da Captura: Iniciar o fluxo de captura de documentos para o usuário final.

Abaixo, tem-se um exemplo completo de como instanciar e inicializar a SDK, seguido da explicação detalhada de cada etapa.

Exemplo completo:

<script>
    var htmlComponent = document.getElementById('webOCR')
    var webOCR = new QiTechWebOCR.WebOCR(
        htmlComponent,
        "<WEB_TOKEN>",
        "<SESSION_ID>"
    )
    .setThemeConfiguration(
        {
            "companyLogo": "<PATH_OR_URL_TO_YOUR_COMPANY_LOGO>",
            "backgroundColor": "<BACKGROUND_COLOR_HEX>",
            "fontColor": "<FONT_COLOR_HEX>",
            "buttonColor": "<BUTTON_COLOR_HEX>",
            "fontFamily": "<FONT_FAMILY>"
        }
    )
    .setShowInstructionScreen(true)
    .setShowSuccessScreen(true)
    .setShowAllowedTemplatesScreen(false)
    .setSandboxEnvironment()
    .build()

    function initOCR(document_types) {
        webOCR.initialize(document_types)
        .then((ocr_key) => {
            console.log(ocr_key)
        })
        .catch((error) => {
            console.log(error)
        })
    }

    initOCR(['cnh', 'rg', 'cnh_digital'])

</script>

Configuração e Instanciação:

Para começar, crie uma nova instância da classe WebOCR. O construtor exige três parâmetros obrigatórios, que devem ser passados na ordem exata especificada abaixo:

htmlComponent (String): O id do elemento HTML no seu DOM onde a SDK será renderizada.
webToken (String): Seu token de autenticação para uso da API.
sessionId (String): Um identificador único para a sessão do usuário.

Personalização (Opcional)

Após criar a instância, você pode utilizar os seguintes métodos encadeados para personalizar a experiência do usuário e fazer com que a aparência da SDK fique compatível com seu aplicativo. Os métodos setShow... permitem que você decida entre usar as telas padrão da nossa SDK ou implementar suas próprias interfaces e fluxos de instrução.

setThemeConfiguration (object): Permite customizar a aparência da SDK. Este método recebe um objeto com as seguintes chaves:
- companyLogo (String): URL ou path para o logo da sua empresa.
- backgroundColor (String): Cor de fundo em formato hexadecimal (ex: '#FFFFFF').
- fontColor (String): Cor da fonte em formato hexadecimal (ex: '#000000').
- buttonColor (String): Cor dos botões em formato hexadecimal (ex: '#0000FF').
- fontFamily (String): Família da fonte a ser utilizada (ex: 'Arial').
setShowInstructionScreen (boolean): Define se a tela inicial de instruções será exibida.
setShowAllowedTemplateScreen (boolean): Define se a tela que informa os documentos aceitos será exibida. Recomendamos ativá-la ou implementar uma versão dessa tela para que o usuário saiba quais documentos pode enviar.
setShowSuccessScreen (boolean): Define se a tela de sucesso, ao final da captura, será exibida.
setSandboxEnvironment: Configura a SDK para apontar para o ambiente de homologação (Sandbox). Utilize este método durante seus testes.

Build

Por fim, você deve chamar a função build() para instânciar a classe WebOCR com as configurações passadas. Para mais informações e detalhes sobre o construtor, veja a página sobre o construtor.

Inicializando a Captura de Documentos

Com a instância da WebOCR devidamente configurada, chame o método initialize() para iniciar o fluxo de captura. Este método recebe como parâmetro uma lista (array) de strings, onde cada string representa um tipo de documento que o usuário poderá enviar. Se o usuário tentar enviar um documento que não consta na lista, uma mensagem de erro será exibida, instruindo-o a tentar novamente com um documento válido. Para permitir o envio de outros documentos não listados, inclua a string 'others' na sua lista.

Tabela com templates aceitos:

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.

Tratamento do Retorno

O método initialize() retorna uma Promise:

Sucesso: Ao final do fluxo, a Promise será resolvida, retornando um objeto que contém a propriedade ocr_keys. Esta propriedade é uma lista com as chaves (ocr_key) das imagens capturadas.
Erro: Caso ocorra qualquer erro durante o processo a Promise será rejeitada. Você pode capturar esses erros utilizando o método .catch().

Para mais detalhes, consulte a página sobre a Função initialize().

função.

Implementação

Exemplo completo:​

Configuração e Instanciação:​

Personalização (Opcional)​

Build​

Inicializando a Captura de Documentos​

Tabela com templates aceitos:​

Tratamento do Retorno​