Captura de documento

Este guia foi elaborado para ajudá-lo a implementar o SDK Web de forma rápida e fácil. Abaixo veja o passo a passo de todo o processo de integração. Após isso, caso deseje personalizar a experiência, não deixe de ver a seção Personalização Web.

Frames de documentos disponíveis

Neste modo de câmera, existe um frame de captura para auxiliar o usuário a posicionar o documento corretamente. Após posicionar o documento corretamente, o usuário deve clicar no botão para realizar a captura da foto do documento.

Neste modo de câmera é possivel capturar os documentos:

• CPF: Captura da frente do CPF;

• CNH: Captura da CNH aberta;

• CNH frente: Captura da frente da CNH;

• CNH verso: Captura do verso da CNH;

• RG frente: Captura da frente do RG;

• RG verso: Captura do verso do RG;

• Outros: Captura de qualquer outro documento.

Inicializar o SDK

Para começar, você deve efetuar 2 passos simples em seu projeto:

Instancie um novo Builder:

const unicoCameraBuilder = new UnicoCheckBuilder();

Especifique o caminho dos arquivos adicionais (caso adicionados em seu projeto):

unicoCameraBuilder.setResourceDirectory("/resources");

Configurar tamanho do frame

É recomendado que você configure o tamanho do frame dentro de sua aplicação, a fim de otimizar a área de captura dentro de seu WebApp. Confira abaixo como fazer esta configuração para Web Desktop ou Mobile.

<div class="container">
  <div id="box-camera"></div>
</div>

.container {
  width: 800px;
  height: 600px;
  position: relative;
}

Implementar as funções de callback

Um dos objetos que é necessário passar como parâmetro ao método responsável por renderizar o frame de captura é o de callback. Este objeto deve conter funções de callback para casos de sucesso e erro, como exemplificados abaixo.

  const callback = {
    on: {
      success: (obj) => {
        console.log(obj.base64);
        console.log(obj.encrypted);
      },
      error: (error) => {
        console.error(error)
        //confira na aba "Referências" sobre os erros possíveis
      },
    }
  };

Este objeto é obrigatório e caso não seja corretamente implementado (contemplando todos os eventos de success ou error gera uma exceção, que caso não tratada, é exibida no console do usuário).

Configurar e iniciar câmera

Para iniciar a câmera com as configurações feitas até aqui, é preciso criar uma instância do builder através do método build().

const unicoCamera = unicoCameraBuilder.build();

Em seguida, com a câmera "montada", deve-se configurar o modo de captura da câmera.

A preparação da câmera é efetuada a partir do método prepareDocumentCamera(), disponibilizado a partir do builder. Este método recebe 2 parâmetros:

• A classe UnicoConfig obtida neste passo;

• Tipo de documento a ser capturado, sendo eles:

Este método gera uma promise que ao ser resolvida, devolve um objeto que é utilizado para efetivamente abrir a câmera através do método open, que recebe como parâmetro as funções de callback configuradas no passo acima.

Abaixo um exemplo utilizando a captura de CNH:

Usando a classe UnicoConfig:

  const config = new UnicoConfig()
    .setProjectNumber("<YOUR_PROJECT_NUMBER>")
    .setProjectId("<YOUR_PROJECT_ID>")
    .setMobileSdkAppId("<YOUR_MOBILE_SDK_APP_ID>")
    .setHostname("<YOUR_HOSTNAME>")
    .setHostInfo("<YOUR_HOST_INFO>")
    .setHostKey("<YOUR_HOST_KEY>");

  unicoCamera.prepareDocumentCamera(
    config, 
    DocumentCameraTypes.CNH
  ).then(cameraOpener => {
    cameraOpener.open(callback);
  }).catch(error => {
    console.error(error);
    // confira na aba "Referências" sobre os erros possíveis
  });

Realize um requisição POST na API REST do by Client

A captura das imagens é apenas a primeira parte da jornada. Após capturar a imagem, é necessário enviar o base64 gerado pelo SDK para as APIs REST do by Client. Saiba mais na seção CreateProcess do by Client.

Dúvidas?​

Não encontrou algo ou ainda precisa de ajuda? Se já é um cliente ou parceiro, pode entrar em contato através da Central de Ajuda.