---
title: Document capture
canonical: https://developer.unico.io/dual-api/developers/sdks-and-tools/web/web-sdk/capture-flow/capture-types/document-capture
locale: en
generated_by: markdown-export
---

Capture of identity documents. The SDK presents a frame to assist the user in positioning the document; after positioning, the user clicks the button to capture the photo.

:::warning[No content validation]
The SDK does not perform any type of validation on what is being captured.
:::

## Available document frames

| Frame | Description |
|---|---|
| `DocumentCameraTypes.CPF` | Capture the CPF |
| `DocumentCameraTypes.CNH` | Capture the open CNH |
| `DocumentCameraTypes.CNH_FRENTE` | Capture the front of the CNH |
| `DocumentCameraTypes.CNH_VERSO` | Capture the back of the CNH |
| `DocumentCameraTypes.RG_FRENTE` | Capture the front of the RG |
| `DocumentCameraTypes.RG_VERSO` | Capture the back of the RG |
| `DocumentCameraTypes.RG_FRENTE_NOVO` | Capture the front of the new RG |
| `DocumentCameraTypes.RG_VERSO_NOVO` | Capture the back of the new RG |
| `DocumentCameraTypes.OTHERS("description")` | Generic frame for any other document |

:::tip[Generic frame]
If you need to capture a document for which there is no specific frame (e.g., RNE), use `DocumentCameraTypes.OTHERS("description")` — a generic, rectangular frame that can be used to guide any capture.
:::

For the full list of supported document types, see [API Reference > Enums](/dual-api/developers/sdks-and-tools/web/web-sdk/api-reference/enums).

## Frame size

It is recommended to configure the size of the frame within your application to optimize the capture area.

:::info[CSS interference]
Frame functionality can be affected by design systems with grid components (Bootstrap, Material-UI, etc.). To minimize this risk, position the frame (`id="box-camera"`) where it does not inherit unwanted CSS rules.
:::

### Desktop

Wrap the frame in a parent element to constrain its dimensions:

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

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

  Maintain a proper height-to-width ratio to make framing the user's face easier.

  :::warning[Dev tools resizing]
  Tests involving resizing the screen through the browser's developer mode will not work as expected. Resize your browser window directly instead.
  :::

### Mobile

For Web Mobile views, the capture frame should occupy 100% of the device screen (`100vw`/`100vh`) to avoid issues with the computer vision algorithms. Avoid horizontal or vertical scrolling — using a modal helps minimize this.

  :::warning[Test on physical devices]
  Testing using browser developer mode does not work — the camera used by the browser is the same as the desktop camera, with very different resolution from a mobile device camera. Test directly on the device.
  :::

## Starting a document capture

****Step 2** — Build the camera and prepare the document session**

Build the camera instance and call `prepareDocumentCamera` passing the `UnicoConfig` and the desired `DocumentCameraTypes`:

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

For the full result handling, see [Receiving the result](/dual-api/developers/sdks-and-tools/web/web-sdk/capture-flow/receiving-the-result).