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

Capture de documents d'identité. Le SDK présente un cadre pour aider l'utilisateur à positionner le document ; après le positionnement, l'utilisateur clique sur le bouton pour capturer la photo.

:::warning[Aucune validation du contenu]
Le SDK n'effectue aucune validation sur ce qui est capturé.
:::

## Cadres de document disponibles

| Cadre | Description |
|---|---|
| `DocumentCameraTypes.CPF` | Capture du CPF |
| `DocumentCameraTypes.CNH` | Capture du CNH ouvert |
| `DocumentCameraTypes.CNH_FRENTE` | Capture du recto du CNH |
| `DocumentCameraTypes.CNH_VERSO` | Capture du verso du CNH |
| `DocumentCameraTypes.RG_FRENTE` | Capture du recto du RG |
| `DocumentCameraTypes.RG_VERSO` | Capture du verso du RG |
| `DocumentCameraTypes.RG_FRENTE_NOVO` | Capture du recto du nouveau RG |
| `DocumentCameraTypes.RG_VERSO_NOVO` | Capture du verso du nouveau RG |
| `DocumentCameraTypes.OTHERS("descrição")` | Cadre générique pour tout autre document |

:::tip[Cadre générique]
Si vous devez capturer un document pour lequel il n'existe pas de cadre spécifique (par exemple, RNE), utilisez `DocumentCameraTypes.OTHERS("description")` — un cadre générique rectangulaire pouvant être utilisé pour guider n'importe quelle capture.
:::

Pour la liste complète des types de documents pris en charge, consultez [Référence API > Enums](/dual-api/developers/sdks-and-tools/web/web-sdk/api-reference/enums).

## Taille du cadre

Il est recommandé de configurer la taille du cadre dans votre application pour optimiser la zone de capture.

:::info[Interférence CSS]
Le fonctionnement du cadre peut être affecté par des design systems avec des composants de grille (Bootstrap, Material-UI, etc.). Pour minimiser ce risque, positionnez le cadre (`id="box-camera"`) là où il n'hérite pas de règles CSS indésirables.
:::

### Desktop

Enveloppez le cadre dans un élément parent pour contraindre ses dimensions :

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

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

  Maintenez un rapport hauteur/largeur approprié pour faciliter le cadrage du visage de l'utilisateur.

  :::warning[Redimensionnement via les outils de développement]
  Les tests impliquant le redimensionnement de l'écran via le mode développeur du navigateur ne fonctionneront pas comme prévu. Redimensionnez directement la fenêtre du navigateur.
  :::

### Mobile

Pour les vues Web Mobile, le cadre de capture doit occuper 100 % de l'écran de l'appareil (`100vw`/`100vh`) pour éviter des problèmes avec les algorithmes de vision par ordinateur. Évitez le défilement horizontal ou vertical — l'utilisation d'une modale permet de minimiser ce problème.

  :::warning[Testez sur des appareils physiques]
  Les tests via le mode développeur du navigateur ne fonctionnent pas — la caméra utilisée par le navigateur est la même que la caméra de bureau, avec une résolution très différente de celle d'un appareil mobile. Testez directement sur l'appareil.
  :::

## Démarrer une capture de document

****Étape 2** — Construire la caméra et préparer la session de document**

Construisez l'instance de caméra et appelez `prepareDocumentCamera` en passant la `UnicoConfig` et le `DocumentCameraTypes` souhaité :

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

Pour la gestion complète du résultat, consultez [Réception du résultat](/dual-api/developers/sdks-and-tools/web/web-sdk/capture-flow/receiving-the-result).