---
title: Захват документов
canonical: https://developer.unico.io/ru/dual-api/developer/sdks-and-tools/web-sdk/document-capture/
locale: ru
generated_by: markdown-export
---

Захват документов, удостоверяющих личность. SDK отображает рамку, помогающую пользователю расположить документ; после позиционирования пользователь нажимает кнопку для съёмки фото.

:::warning[Без проверки содержимого]
SDK не выполняет никакой проверки того, что захватывается.
:::

## Доступные рамки для документов

| Рамка | Описание |
|---|---|
| `DocumentCameraTypes.CPF` | Захват CPF |
| `DocumentCameraTypes.CNH` | Захват открытого CNH |
| `DocumentCameraTypes.CNH_FRENTE` | Захват лицевой стороны CNH |
| `DocumentCameraTypes.CNH_VERSO` | Захват обратной стороны CNH |
| `DocumentCameraTypes.RG_FRENTE` | Захват лицевой стороны RG |
| `DocumentCameraTypes.RG_VERSO` | Захват обратной стороны RG |
| `DocumentCameraTypes.RG_FRENTE_NOVO` | Захват лицевой стороны нового RG |
| `DocumentCameraTypes.RG_VERSO_NOVO` | Захват обратной стороны нового RG |
| `DocumentCameraTypes.OTHERS("descrição")` | Универсальная рамка для любого другого документа |

:::tip[Универсальная рамка]
Если вам нужно захватить документ, для которого нет специальной рамки (например, RNE), используйте `DocumentCameraTypes.OTHERS("description")` — универсальная прямоугольная рамка, подходящая для любого захвата.
:::

Полный список поддерживаемых типов документов см. в разделе [Справочник API > Перечисления](/dual-api/developers/sdks-and-tools/web/web-sdk/api-reference/enums).

## Размер рамки

Рекомендуется настроить размер рамки в вашем приложении для оптимизации области захвата.

:::info[Влияние CSS]
Функциональность рамки может быть нарушена дизайн-системами с grid-компонентами (Bootstrap, Material-UI и т. д.). Чтобы минимизировать этот риск, разместите рамку (`id="box-camera"`) там, где она не наследует нежелательные правила CSS.
:::

### Desktop

Оберните рамку в родительский элемент для ограничения её размеров:

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

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

  Соблюдайте правильное соотношение высоты и ширины, чтобы пользователю было удобнее помещать лицо в рамку.

  :::warning[Изменение размера в инструментах разработчика]
  Тесты, связанные с изменением размера экрана через режим разработчика браузера, не будут работать корректно. Вместо этого изменяйте размер окна браузера напрямую.
  :::

### Mobile

В веб-представлениях для мобильных устройств рамка захвата должна занимать 100% экрана устройства (`100vw`/`100vh`), чтобы избежать проблем с алгоритмами компьютерного зрения. Избегайте горизонтальной или вертикальной прокрутки — использование модального окна помогает свести её к минимуму.

  :::warning[Тестирование на физических устройствах]
  Тестирование через режим разработчика браузера не работает — камера, используемая браузером, совпадает с камерой рабочего стола и имеет существенно отличающееся разрешение от камеры мобильного устройства. Проводите тестирование непосредственно на устройстве.
  :::

## Начало захвата документа

****Шаг 2** — Создайте камеру и подготовьте сессию документа**

Создайте экземпляр камеры и вызовите `prepareDocumentCamera`, передав `UnicoConfig` и желаемый `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);
  });
  ```

Полную информацию об обработке результата см. в разделе [Получение результата](/dual-api/developers/sdks-and-tools/web/web-sdk/capture-flow/receiving-the-result).