Capture de document

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.

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

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.

Taille du cadre

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

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
Mobile

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

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

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

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

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.

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.

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 1 — Implémenter l'objet callback

Le Web SDK utilise un objet callback — passé à open() — pour gérer les événements de succès et d'erreur. Les deux gestionnaires sont obligatoires :

Gestionnaire	Quand il est appelé
`on.success(obj)`	Capture réussie — reçoit un objet avec `base64` et `encrypted`
`on.error(error)`	Une erreur s'est produite pendant la session — reçoit un `ErrorBio`

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

Callback obligatoire

L'objet callback est obligatoire. S'il n'est pas correctement implémenté (en couvrant les événements success et error), le SDK lève une exception qui, si elle n'est pas gérée, s'affiche dans la console de l'utilisateur.

É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é :

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.