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

Erfassung von Ausweisdokumenten. Das SDK zeigt einen Rahmen, der dem Benutzer beim Positionieren des Dokuments hilft. Nach dem Positionieren klickt der Benutzer auf die Schaltfläche, um das Foto aufzunehmen.

:::warning[Keine Inhaltsvalidierung]
Das SDK führt keine Validierung des erfassten Inhalts durch.
:::

## Verfügbare Dokumentenrahmen

| Rahmen | Beschreibung |
|---|---|
| `DocumentCameraTypes.CPF` | CPF erfassen |
| `DocumentCameraTypes.CNH` | Offene CNH erfassen |
| `DocumentCameraTypes.CNH_FRENTE` | Vorderseite der CNH erfassen |
| `DocumentCameraTypes.CNH_VERSO` | Rückseite der CNH erfassen |
| `DocumentCameraTypes.RG_FRENTE` | Vorderseite des RG erfassen |
| `DocumentCameraTypes.RG_VERSO` | Rückseite des RG erfassen |
| `DocumentCameraTypes.RG_FRENTE_NOVO` | Vorderseite des neuen RG erfassen |
| `DocumentCameraTypes.RG_VERSO_NOVO` | Rückseite des neuen RG erfassen |
| `DocumentCameraTypes.OTHERS("descrição")` | Generischer Rahmen für beliebige andere Dokumente |

:::tip[Generischer Rahmen]
Wenn Sie ein Dokument erfassen müssen, für das kein spezifischer Rahmen vorhanden ist (z. B. RNE), verwenden Sie `DocumentCameraTypes.OTHERS("description")` — ein generischer, rechteckiger Rahmen, der für jede Erfassung verwendet werden kann.
:::

Die vollständige Liste der unterstützten Dokumenttypen finden Sie unter [API-Referenz > Enums](/dual-api/developers/sdks-and-tools/web/web-sdk/api-reference/enums).

## Rahmengröße

Es wird empfohlen, die Größe des Rahmens in Ihrer Anwendung zu konfigurieren, um den Erfassungsbereich zu optimieren.

:::info[CSS-Interferenz]
Die Rahmenfunktion kann durch Design-Systeme mit Grid-Komponenten (Bootstrap, Material-UI usw.) beeinträchtigt werden. Um dieses Risiko zu minimieren, positionieren Sie den Rahmen (`id="box-camera"`) so, dass er keine unerwünschten CSS-Regeln erbt.
:::

### Desktop

Umschließen Sie den Rahmen mit einem übergeordneten Element, um seine Abmessungen zu begrenzen:

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

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

  Behalten Sie ein angemessenes Höhen-zu-Breiten-Verhältnis bei, um das Einrahmen des Gesichts des Benutzers zu erleichtern.

  :::warning[Größenänderung mit Entwicklertools]
  Tests mit Bildschirmgrößenänderungen über den Entwicklermodus des Browsers funktionieren nicht wie erwartet. Ändern Sie die Größe Ihres Browserfensters direkt.
  :::

### Mobile

Bei Web-Mobile-Ansichten sollte der Erfassungsrahmen 100 % des Gerätebildschirms (`100vw`/`100vh`) einnehmen, um Probleme mit den Computer-Vision-Algorithmen zu vermeiden. Vermeiden Sie horizontales oder vertikales Scrollen — die Verwendung eines Modals hilft, dies zu minimieren.

  :::warning[Auf physischen Geräten testen]
  Tests mit dem Entwicklermodus des Browsers funktionieren nicht — die vom Browser verwendete Kamera ist dieselbe wie die Desktop-Kamera, mit einer sehr anderen Auflösung als die Kamera eines Mobilgeräts. Testen Sie direkt auf dem Gerät.
  :::

## Dokumentenerfassung starten

****Schritt 2** — Kamera erstellen und Dokumentsitzung vorbereiten**

Erstellen Sie die Kamerainstanz und rufen Sie `prepareDocumentCamera` auf, indem Sie die `UnicoConfig` und den gewünschten `DocumentCameraTypes` übergeben:

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

Die vollständige Ergebnisverarbeitung finden Sie unter [Ergebnis empfangen](/dual-api/developers/sdks-and-tools/web/web-sdk/capture-flow/receiving-the-result).