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

Captura de documentos de identidad. El SDK presenta un marco para ayudar al usuario a posicionar el documento; una vez posicionado, el usuario hace clic en el botón para capturar la foto.

:::warning[Sin validación de contenido]
El SDK no realiza ningún tipo de validación sobre lo que se está capturando.
:::

## Marcos de documento disponibles

| Marco | Descripción |
|---|---|
| `DocumentCameraTypes.CPF` | Captura el CPF |
| `DocumentCameraTypes.CNH` | Captura la CNH abierta |
| `DocumentCameraTypes.CNH_FRENTE` | Captura el frente de la CNH |
| `DocumentCameraTypes.CNH_VERSO` | Captura el dorso de la CNH |
| `DocumentCameraTypes.RG_FRENTE` | Captura el frente del RG |
| `DocumentCameraTypes.RG_VERSO` | Captura el dorso del RG |
| `DocumentCameraTypes.RG_FRENTE_NOVO` | Captura el frente del nuevo RG |
| `DocumentCameraTypes.RG_VERSO_NOVO` | Captura el dorso del nuevo RG |
| `DocumentCameraTypes.OTHERS("descrição")` | Marco genérico para cualquier otro documento |

:::tip[Marco genérico]
Si necesita capturar un documento para el que no existe un marco específico (por ejemplo, RNE), use `DocumentCameraTypes.OTHERS("description")` — un marco genérico y rectangular que puede utilizarse para guiar cualquier captura.
:::

Para la lista completa de tipos de documentos soportados, consulte [Referencia de API > Enumeraciones](/dual-api/developers/sdks-and-tools/web/web-sdk/api-reference/enums).

## Tamaño del marco

Se recomienda configurar el tamaño del marco dentro de su aplicación para optimizar el área de captura.

:::info[Interferencia de CSS]
La funcionalidad del marco puede verse afectada por sistemas de diseño con componentes de cuadrícula (Bootstrap, Material-UI, etc.). Para minimizar este riesgo, posicione el marco (`id="box-camera"`) donde no herede reglas CSS no deseadas.
:::

### Desktop

Envuelva el marco en un elemento padre para limitar sus dimensiones:

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

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

  Mantenga una proporción adecuada de alto a ancho para facilitar el encuadre del rostro del usuario.

  :::warning[Redimensionamiento con herramientas de desarrollador]
  Las pruebas que impliquen redimensionar la pantalla a través del modo de desarrollador del navegador no funcionarán como se espera. Redimensione la ventana del navegador directamente.
  :::

### Mobile

Para vistas Web Mobile, el marco de captura debe ocupar el 100% de la pantalla del dispositivo (`100vw`/`100vh`) para evitar problemas con los algoritmos de visión computacional. Evite el desplazamiento horizontal o vertical — usar un modal ayuda a minimizar esto.

  :::warning[Pruebe en dispositivos físicos]
  Las pruebas usando el modo de desarrollador del navegador no funcionan — la cámara utilizada por el navegador es la misma que la de escritorio, con una resolución muy diferente a la de la cámara de un dispositivo móvil. Pruebe directamente en el dispositivo.
  :::

## Iniciar una captura de documento

****Paso 2** — Construir la cámara y preparar la sesión de documento**

Construya la instancia de la cámara y llame a `prepareDocumentCamera` pasando el `UnicoConfig` y el `DocumentCameraTypes` deseado:

  ```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 el manejo completo del resultado, consulte [Recibir el resultado](/dual-api/developers/sdks-and-tools/web/web-sdk/capture-flow/receiving-the-result).