Implementação

Novidade na versão 4.0.0

A partir da versão 4.0.0, o construtor WebOCR não recebe mais o htmlComponent — o SDK cria e gerencia seu próprio nó DOM internamente.

A inicialização da Web OCR SDK é realizada através da chamada do método .initialize(), que pertence à classe WebOCR. O processo é dividido em duas etapas principais:

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

Exemplo completo

<script>
    var webOCR = new QiTechWebOCR.WebOCR(
        "<WEB_TOKEN>",
        "<SESSION_ID>"
    )
    .setThemeConfiguration({
        "companyLogo": "<PATH_OR_URL_TO_YOUR_COMPANY_LOGO>",
        "primaryColor": "<PRIMARY_COLOR_HEX>",
        "fontFamily": "<FONT_FAMILY>"
    })
    .setShowInstructionScreen(true)
    .setShowSuccessScreen(true)
    .setShowAllowedTemplatesScreen(false)
    .setSandboxEnvironment()
    .build()

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

    initOCR(['cnh', 'rg', 'rg_digital'])
</script>

Configuração e Instanciação

Para começar, crie uma nova instância da classe WebOCR. O construtor exige dois parâmetros obrigatórios, na ordem especificada abaixo:

• 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, utilize os seguintes métodos encadeados para personalizar a experiência:

• setThemeConfiguration (object): Personaliza a aparência do SDK. Campos aceitos:

  • primaryColor (String): Cor principal em formato hexadecimal — usada em botões, ícones e destaques (ex: '#0000FF').
  • companyLogo (String): URL ou path para o logo da sua empresa.
  • fontFamily (String): Família da fonte (ex: 'Arial').

• setShowInstructionScreen (boolean): Define se a tela inicial de instruções será exibida.

• setShowAllowedTemplatesScreen (boolean): Define se a tela que informa os documentos aceitos será exibida. Recomendamos ativá-la 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 o SDK para apontar para o ambiente de homologação (Sandbox).

Build

Por fim, você deve chamar a função build() para instanciar a classe WebOCR com as configurações passadas. Para mais 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.

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 CIN digital (pdf) emitida por um aplicativo oficial
rg_digital	String	Envio do RG digital (pdf) emitido por um aplicativo oficial
rne	String	Captura do RNE físico, em duas etapas, FRENTE e VERSO
crnm	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: A Promise é resolvida com um array de objetos, onde cada objeto representa um lado do documento capturado. Consulte a página Coletando os Retornos para detalhes sobre o formato.
• Erro: A Promise é rejeitada. Você pode capturar esses erros utilizando o método .catch().