Captura de documento

Nesta seção, você encontrará todas as informações necessárias para o uso e integração do SDK da plataforma Unico IDCloud em suas aplicações Web para a captura do 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.

A SDK não realiza nenhum tipo de validação do que está sendo capturado.

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.

Muitas vezes o funcionamento do frame pode ser afetado por alguns design-systems que possuam algum tipo de grid-system como, por exemplo, bootstrap ou material-ui. Para minimizar este risco, certifique-se de posicionar o frame (id="box-camera") em algum lugar do código que não herde regras indesejadas de css.

Desktop

Nas versões Web Desktop, é possível restringir o tamanho do frame para que o mesmo não utilize toda a dimensão de seu WebApp. Para isto, basta envolver o frame (id="box-camera") em outra tag html, como no exemplo abaixo:

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

Idealmente, você deve tentar manter uma proporção adequada entre altura e largura, o que irá facilitar o enquadramento da face do usuário. A seguir um exemplo:

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

Seguindo o exemplo acima, o frame respeita o tamanho do elemento "pai", neste caso representado pelo container. Desta forma, você tem a flexibilidade para implementar o frame da forma mais conveniente para sua aplicação (como em um modal, por exemplo).

Testes alterando o tamanho da tela através do modo desenvolvedor de seu browser não funcionam. É recomendado que este tipo de teste seja feito alterando o tamanho da janela de seu browser.

Mobile

Para uma view Web Mobile é recomendado que o frame de captura ocupe 100% da tela para evitar problemas com os algorítimos de visão computacional. Caso a área de captura esteja distorcida, a funcionalidade de captura automática (Câmera Inteligente) pode apresentar problemas de calculo no tracking da face dos usuários.

Sendo assim, é recomendado que na view Web Mobile:

• O frame de captura ocupe 100% da tela do dispositivo (100vw/vh);

• Evitar o scroll horizontal ou vertical (isso pode ser minimizado com um modal);

Você pode conferir um exemplo de implementação através de um projeto nesta página (Angular).

Testes de devices utilizando o modo desenvolvedor de seu browser não funcionam, dado que, a camera utilizada pelo seu browser é a mesma de seu desktop, que possui uma resolução totalmente diferente da camera de um dispositivo móvel. Recomendamos que este tipo de teste seja feito diretamente no dispositivo.

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:

Parâmetro	Descrição
DocumentCameraTypes.CPF	Frame para captura da frente do CPF
DocumentCameraTypes.CNH	Frame para captura da CNH aberta
DocumentCameraTypes.CNH_FRENTE	Frame para captura da frente da CNH
DocumentCameraTypes.CNH_VERSO	Frame para captura do verso da CNH
DocumentCameraTypes.RG_FRENTE	Frame para captura da frente do RG
DocumentCameraTypes.RG_VERSO	Frame para captura do verso do RG
DocumentCameraTypes.RG_FRENTE_NOVO	Frame para captura da frente do novo RG
DocumentCameraTypes.RG_VERSO_NOVO	frame para captura da parte traseira do novo RG
DocumentCameraTypes.OTHERS("descrição")	Frame para captura de qualquer outro documento

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
  });

Caso precise capturar um documento que não possuímos um frame específico (ex: RNE, entre outros), utilize o frame DocumentCameraType.None, que irá te possibilitar um frame genérico, retangular, que pode ser utilizado para orientar qualquer captura.

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.