Dokumentenaufnahme

Aufnahme von Ausweisdokumenten. Das SDK zeigt einen Rahmen an, der den Benutzer bei der Positionierung des Dokuments unterstützt. Nach der Positionierung klickt der Benutzer auf die Schaltfläche, um das Foto aufzunehmen.

Keine Inhaltsvalidierung

Das SDK führt keine Validierung des aufgenommenen Inhalts durch.

Verfügbare Dokumentrahmen

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

Generischer Rahmen

Wenn Sie ein Dokument aufnehmen müssen, für das kein spezifischer Rahmen vorhanden ist (z. B. RNE), verwenden Sie DocumentCameraTypes.OTHERS("description") — einen generischen, rechteckigen Rahmen, der für jede Aufnahme verwendet werden kann.

Die vollständige Liste der unterstützten Dokumenttypen finden Sie unter API-Referenz > Enums.

Rahmengröße

Es wird empfohlen, die Größe des Rahmens in Ihrer Anwendung so zu konfigurieren, dass der Aufnahmebereich optimiert wird.

CSS-Interferenz

Die Rahmenfunktionalität 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") an einer Stelle, an der er keine unerwünschten CSS-Regeln erbt.

Desktop
Mobil

Umschließen Sie den Rahmen mit einem übergeordneten Element, um seine Abmessungen einzuschränken:

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

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

Achten Sie auf ein geeignetes Höhen-Breiten-Verhältnis, damit der Benutzer sein Gesicht leichter einrahmen kann.

Größenänderung mit Entwicklertools

Tests, bei denen die Bildschirmgröße über den Entwicklermodus des Browsers geändert wird, funktionieren nicht wie erwartet. Ändern Sie stattdessen die Größe Ihres Browserfensters direkt.

Bei Web-Mobile-Ansichten sollte der Aufnahmerahmen 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 dabei, dies zu minimieren.

Auf physischen Geräten testen

Tests im Entwicklermodus des Browsers funktionieren nicht — die vom Browser verwendete Kamera ist dieselbe wie die Desktop-Kamera mit einer sehr anderen Auflösung als eine Mobilgerätekamera. Testen Sie direkt auf dem Gerät.

Dokumentenaufnahme starten

Schritt 1 — Das callback-Objekt implementieren

Das Web SDK verwendet ein callback-Objekt — das an open() übergeben wird — um Erfolgs- und Fehlerereignisse zu verarbeiten. Beide Handler sind obligatorisch:

Handler	Wann er aufgerufen wird
`on.success(obj)`	Aufnahme erfolgreich abgeschlossen — empfängt ein Objekt mit `base64` und `encrypted`
`on.error(error)`	Während der Sitzung ist ein Fehler aufgetreten — empfängt ein `ErrorBio`-Objekt

const callback = {
  on: {
    success: (obj) => {
      console.log(obj.base64);
      console.log(obj.encrypted);
    },
    error: (error) => {
      console.error(error);
    }
  }
};

Obligatorischer Callback

Das callback-Objekt ist obligatorisch. Wenn es nicht ordnungsgemäß implementiert ist (d. h. beide Ereignisse success und error abdeckt), löst das SDK eine Ausnahme aus, die, wenn sie nicht behandelt wird, in der Konsole des Benutzers angezeigt wird.

Schritt 2 — Kamera erstellen und Dokumentensitzung vorbereiten

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

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.