Dokumentenerfassung

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.

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

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.

Rahmengröße

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

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
Mobile

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

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

.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.

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.

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.

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 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 Dokumentsitzung 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.