Saltar al contenido principal

Captura de documentos

Captura de documentos de identidad. El SDK presenta un marco para ayudar al usuario a posicionar el documento; después de posicionarlo, el usuario hace clic en el botón para capturar la foto.

Sin validación de contenido

El SDK no realiza ningún tipo de validación sobre lo que se está capturando.

Marcos de documento disponibles
MarcoDescripción
DocumentCameraTypes.CPFCaptura el CPF
DocumentCameraTypes.CNHCaptura la CNH abierta
DocumentCameraTypes.CNH_FRENTECaptura el frente de la CNH
DocumentCameraTypes.CNH_VERSOCaptura el reverso de la CNH
DocumentCameraTypes.RG_FRENTECaptura el frente del RG
DocumentCameraTypes.RG_VERSOCaptura el reverso del RG
DocumentCameraTypes.RG_FRENTE_NOVOCaptura el frente del nuevo RG
DocumentCameraTypes.RG_VERSO_NOVOCaptura el reverso del nuevo RG
DocumentCameraTypes.OTHERS("descrição")Marco genérico para cualquier otro documento
Marco genérico

Si necesitas capturar un documento para el que no existe un marco específico (p. ej., RNE), usa DocumentCameraTypes.OTHERS("description") — un marco genérico y rectangular que puede utilizarse para guiar cualquier captura.

Para la lista completa de tipos de documentos compatibles, consulta Referencia de API > Enums.

Tamaño del marco

Se recomienda configurar el tamaño del marco dentro de tu aplicación para optimizar el área de captura.

Interferencia de CSS

La funcionalidad del marco puede verse afectada por sistemas de diseño con componentes de cuadrícula (Bootstrap, Material-UI, etc.). Para minimizar este riesgo, posiciona el marco (id="box-camera") donde no herede reglas CSS no deseadas.

Envuelve el marco en un elemento padre para limitar sus dimensiones:

<div class="container">
  <div id="box-camera"></div>
</div>
.container {
  width: 800px;
  height: 600px;
  position: relative;
}

Mantén una relación adecuada entre altura y anchura para facilitar el encuadre del rostro del usuario.

Redimensionamiento con herramientas de desarrollo

Las pruebas que impliquen cambiar el tamaño de la pantalla mediante el modo de desarrollador del navegador no funcionarán como se espera. Redimensiona la ventana del navegador directamente.

Iniciar una captura de documento
Paso 1 — Implementar el objeto callback

El Web SDK utiliza un objeto callback — pasado a open() — para gestionar los eventos de éxito y error. Ambos manejadores son obligatorios:

ManejadorCuándo se llama
on.success(obj)La captura se completó correctamente — recibe un objeto con base64 y encrypted
on.error(error)Ocurrió un error durante la sesión — recibe un ErrorBio
const callback = {
  on: {
    success: (obj) => {
      console.log(obj.base64);
      console.log(obj.encrypted);
    },
    error: (error) => {
      console.error(error);
    }
  }
};
Callback obligatorio

El objeto callback es obligatorio. Si no se implementa correctamente (cubriendo tanto los eventos success como error), el SDK lanza una excepción que, si no se maneja, se muestra en la consola del usuario.

Paso 2 — Construir la cámara y preparar la sesión de documento

Construye la instancia de la cámara y llama a prepareDocumentCamera pasando el UnicoConfig y el DocumentCameraTypes deseado:

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

Para el manejo completo del resultado, consulta Recibir el resultado.

Última actualización el