Captura de documentos
Captura de documentos de identidad. El SDK presenta un marco para ayudar al usuario a posicionar el documento; una vez posicionado, el usuario hace clic en el botón para capturar la foto.
El SDK no realiza ningún tipo de validación sobre lo que se está capturando.
| Marco | Descripción |
|---|---|
DocumentCameraTypes.CPF | Captura el CPF |
DocumentCameraTypes.CNH | Captura la CNH abierta |
DocumentCameraTypes.CNH_FRENTE | Captura el frente de la CNH |
DocumentCameraTypes.CNH_VERSO | Captura el dorso de la CNH |
DocumentCameraTypes.RG_FRENTE | Captura el frente del RG |
DocumentCameraTypes.RG_VERSO | Captura el dorso del RG |
DocumentCameraTypes.RG_FRENTE_NOVO | Captura el frente del nuevo RG |
DocumentCameraTypes.RG_VERSO_NOVO | Captura el dorso del nuevo RG |
DocumentCameraTypes.OTHERS("descrição") | Marco genérico para cualquier otro documento |
Si necesita capturar un documento para el que no existe un marco específico (por ejemplo, RNE), use DocumentCameraTypes.OTHERS("description") — un marco genérico y rectangular que puede utilizarse para guiar cualquier captura.
Para la lista completa de tipos de documentos soportados, consulte Referencia de API > Enumeraciones.
Se recomienda configurar el tamaño del marco dentro de su aplicación para optimizar el área de captura.
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, posicione el marco (id="box-camera") donde no herede reglas CSS no deseadas.
- Desktop
- Mobile
Envuelva 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;
}
Mantenga una proporción adecuada de alto a ancho para facilitar el encuadre del rostro del usuario.
Las pruebas que impliquen redimensionar la pantalla a través del modo de desarrollador del navegador no funcionarán como se espera. Redimensione la ventana del navegador directamente.
Para vistas Web Mobile, el marco de captura debe ocupar el 100% de la pantalla del dispositivo (100vw/100vh) para evitar problemas con los algoritmos de visión computacional. Evite el desplazamiento horizontal o vertical — usar un modal ayuda a minimizar esto.
Las pruebas usando el modo de desarrollador del navegador no funcionan — la cámara utilizada por el navegador es la misma que la de escritorio, con una resolución muy diferente a la de la cámara de un dispositivo móvil. Pruebe directamente en el dispositivo.
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:
| Manejador | Cuá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);
}
}
};
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
Construya la instancia de la cámara y llame 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, consulte Recibir el resultado.