---
title: Captura de documentos
canonical: https://developer.unico.io/pt-BR/dual-api/developer/sdks-and-tools/web-sdk/document-capture/
locale: pt-BR
generated_by: markdown-export
---

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.

:::warning[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 |

:::tip[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](/dual-api/developers/sdks-and-tools/web/web-sdk/api-reference/enums).

## Tamanho do frame

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

:::info[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:

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

  ```css
  .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.

  :::warning[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.

  :::warning[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 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:

  ```javascript
  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](/dual-api/developers/sdks-and-tools/web/web-sdk/capture-flow/receiving-the-result).