Captura de documento

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 documento disponíveis

Frame	Descrição
`DocumentCameraTypes.CPF`	Capturar o CPF
`DocumentCameraTypes.CNH`	Capturar a CNH aberta
`DocumentCameraTypes.CNH_FRENTE`	Capturar a frente da CNH
`DocumentCameraTypes.CNH_VERSO`	Capturar o verso da CNH
`DocumentCameraTypes.RG_FRENTE`	Capturar a frente do RG
`DocumentCameraTypes.RG_VERSO`	Capturar o verso do RG
`DocumentCameraTypes.RG_FRENTE_NOVO`	Capturar a frente do novo RG
`DocumentCameraTypes.RG_VERSO_NOVO`	Capturar 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 (ex.: RNE), use DocumentCameraTypes.OTHERS("descrição") — um frame genérico e retangular que pode ser usado para orientar qualquer captura.

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

Tamanho do frame

É recomendado configurar o tamanho do frame dentro da 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") onde ele não herde regras CSS indesejadas.

Desktop
Mobile

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 por largura para facilitar o enquadramento do rosto do usuário.

Redimensionamento via ferramentas do desenvolvedor

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

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

Testar usando o modo desenvolvedor do navegador não funciona — a câmera usada pelo navegador é a mesma da câmera do desktop, com resolução muito diferente de uma câmera de 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.