Captura de documentos

Captura de documentos de identidade. O SDK apresenta um frame para auxiliar o usuário no posicionamento do documento; após o posicionamento, o usuário clica no botão para capturar a foto.

Sem validação de conteúdo

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

Frames de documentos disponíveis

Frame	Descrição
DocumentCameraTypes.CPF	Captura o CPF
DocumentCameraTypes.CNH	Captura a CNH aberta
DocumentCameraTypes.CNH_FRENTE	Captura a frente da CNH
DocumentCameraTypes.CNH_VERSO	Captura o verso da CNH
DocumentCameraTypes.RG_FRENTE	Captura a frente do RG
DocumentCameraTypes.RG_VERSO	Captura o verso do RG
DocumentCameraTypes.RG_FRENTE_NOVO	Captura a frente do novo RG
DocumentCameraTypes.RG_VERSO_NOVO	Captura o verso do novo RG
DocumentCameraTypes.OTHERS("descrição")	Frame genérico para qualquer outro documento

Frame genérico

Se você precisar capturar um documento para o qual não há um frame específico (por exemplo, RNE), use DocumentCameraTypes.OTHERS("description") — um frame genérico e retangular que pode ser utilizado para guiar qualquer captura.

Para a lista completa de tipos de documentos suportados, consulte Referência de API > Enums.

Tamanho do frame

Recomenda-se configurar o tamanho do frame na sua aplicação para otimizar a área de captura.

Interferência de CSS

O funcionamento do frame pode ser afetado por design systems com componentes de grid (Bootstrap, Material-UI, etc.). Para minimizar esse risco, posicione o frame (id="box-camera") em um lugar onde ele não herde regras de CSS indesejadas.

Desktop

Envolva o frame em um elemento pai para restringir suas dimensões:

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

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

Mantenha uma proporção adequada de altura para largura para facilitar o enquadramento do rosto do usuário.

Redimensionamento via ferramentas de desenvolvedor

Testes que envolvam redimensionamento da tela pelo modo de desenvolvedor do navegador não funcionarão como esperado. Redimensione a janela do seu navegador diretamente.

Mobile

Para visualizações Web Mobile, o frame de captura deve ocupar 100% da tela do dispositivo (100vw/100vh) para evitar problemas com os algoritmos de visão computacional. Evite rolagem horizontal ou vertical — o uso de um modal ajuda a minimizar isso.

Teste em dispositivos físicos

Testes usando o modo de desenvolvedor do navegador não funcionam — a câmera utilizada pelo navegador é a mesma da versão desktop, com resolução muito diferente da câmera de um dispositivo móvel. Teste diretamente no dispositivo.

Iniciando uma captura de documento

Passo 1 — Implementar o objeto callback

O Web SDK utiliza um objeto callback — passado para open() — para tratar eventos de sucesso e erro. Ambos os handlers são obrigatórios:

Handler	Quando é chamado
on.success(obj)	Captura concluída com sucesso — recebe um objeto com base64 e encrypted
on.error(error)	Ocorreu um erro durante a sessão — recebe um ErrorBio

const callback = {
  on: {
    success: (obj) => {
      console.log(obj.base64);
      console.log(obj.encrypted);
    },
    error: (error) => {
      console.error(error);
    }
  }
};

callback obrigatório

O objeto callback é obrigatório. Se não for implementado corretamente (cobrindo os eventos success e error), o SDK lança uma exceção que, se não tratada, é exibida no console do usuário.

Passo 2 — Construir a câmera e preparar a sessão de documento

Construa a instância da câmera e chame prepareDocumentCamera passando o UnicoConfig e o DocumentCameraTypes desejado:

const unicoCamera = unicoCameraBuilder.build();

const config = new UnicoConfig()
  .setHostname("<YOUR_HOSTNAME>")
  .setHostKey("<YOUR_HOST_KEY>");

unicoCamera.prepareDocumentCamera(
  config,
  DocumentCameraTypes.CNH
).then(cameraOpener => {
  cameraOpener.open(callback);
}).catch(error => {
  console.error(error);
});

Para o tratamento completo do resultado, consulte Recebendo o resultado.