Captura de Selfie

Esta guía ha sido elaborada para ayudarlo a implementar el SDK Web de manera rápida y fácil. A continuación, verá el paso a paso de todo el proceso de integración. Después de eso, si desea personalizar la experiencia, no olvide consultar la sección de Personalización Web.

Inicializar el SDK

Para comenzar, debe realizar 3 pasos simples en su proyecto:

Instancie un nuevo Builder:

const unicoCameraBuilder = new UnicoCheckBuilder();

Especifique la ruta de los archivos adicionales (en caso de que se hayan agregado a su proyecto):

unicoCameraBuilder.setResourceDirectory("/resources");

Especifique la ruta de los archivos de los modelos de IA, en caso de que utilice la funcionalidad de Cámara Inteligente.

unicoCameraBuilder.setModelsPath("https://meusite.com.br/models");

Configuración de entornos

Es posible configurar el entorno que se utilizará en la ejecución del SDK. Use el enumerado SDKEnvironmentTypes, que contiene los siguientes enumerados:

• SDKEnvironmentTypes.PROD: para el entorno de Producción;

• SDKEnvironmentTypes.UAT: para el entorno de Homologación.

Vea cómo implementarlo en el siguiente ejemplo:

import {
  ...
  UnicoCheckBuilder,
  SDKEnvironmentTypes
  ...
} from "unico-webframe"

unicoCameraBuilder.setEnvironment(SDKEnvironmentTypes.UAT);

Implementar las funciones de callback

Uno de los objetos que debe ser pasado como parámetro al método responsable de renderizar el frame de captura es el de callback. Este objeto deberá contener funciones de callback para los casos de éxito y error, como se ejemplifica a continuación.

  const callback = {
    on: {
      success: (obj) => {
        console.log(obj.base64);
        console.log(obj.encrypted);        
      },
      error: (error) => {
        console.error(error)
        //confira na aba "Referências" sobre os erros possíveis
      }
    }
  };

Este objeto es obligatorio y, si no se implementa correctamente (cubriendo todos los eventos de éxito o error), generará una excepción, que, si no se maneja, se mostrará en la consola del usuario.

Configurar e iniciar

Para iniciar la cámara con las configuraciones realizadas hasta ahora, es necesario crear una instancia del builder mediante el método build().

const unicoCamera = unicoCameraBuilder.build();

A continuación, con la cámara "montada", se debe configurar el modo de captura de la cámara.

La preparación de la cámara se realizará a partir del método prepareSelfieCamera(), disponible a partir del builder. Este método recibe 2 parámetros:

• La clase UnicoConfig obtenida en este paso;

• El modo de cámara deseado, siendo estos:

  • SelfieCameraTypes.NORMAL para el modo de cámara normal;

  • SelfieCameraTypes.SMART para el modo de cámara inteligente.

Este método genera una promise que, al resolverse, devuelve un objeto que se utiliza para abrir efectivamente la cámara mediante el método open, el cual recibe como parámetro las funciones de callback configuradas en el paso anterior.

Si desea utilizar la captura automática, pase el parámetro Unico.SelfieCameraTypes.SMART al método prepareSelfieCamera.

Para la captura inteligente, los modelos de visión computacional también deben ser cargados mediante el método setModelsPath, tal como se explicó en el primer paso de esta guía.

Usando la clase UnicoConfig:

const config = new UnicoConfig()
  .setHostname("<YOUR_HOSTNAME>")
  .setHostKey("<YOUR_HOST_KEY>");

  unicoCamera.prepareSelfieCamera(
    config, 
    SelfieCameraTypes.SMART
  ).then(cameraOpener => {
    cameraOpener.open(callback);
  }).catch(error => {
    console.error(error);
    // confira na aba "Referências" sobre os erros possíveis
  });

Configurar el modo de captura en iFrames

Es posible utilizar el SDK Web con Liveness Interactivo incrustado en un iFrame. Para ello, es necesario realizar una implementación similar a la sección anterior en la preparación de la cámara.

La preparación de la cámara se realizará mediante el método prepareSelfieCameraForIFrame(), también disponible a partir del builder. Este método recibe los mismos parámetros que prepareSelfieCamera():

const unicoCamera = unicoCameraBuilder.build();

const config = new UnicoConfig()
  .setHostname("<YOUR_HOSTNAME>")
  .setHostKey("<YOUR_HOST_KEY>");

  unicoCamera.prepareSelfieCameraForIFrame(
    config, 
    SelfieCameraTypes.SMART
  ).then(cameraOpener => {
    cameraOpener.open(callback);
  }).catch(error => {
    console.error(error);
    // confira na aba "Referências" sobre os erros possíveis
  });

Implementación del elemento iFrame

Para que la captura funcione correctamente, es necesario implementar el elemento <iframe> como en el siguiente ejemplo:

<iframe allow="fullscreen;camera;geolocation" allowFullScreen src="your_app_url"></iframe>

Comportamiento en pantalla completa

Para realizar la captura, es necesario estar en modo pantalla completa en el navegador para que el SDK pueda redimensionarse automáticamente. Por lo tanto, al realizar la captura, el SDK mostrará una pantalla solicitando la apertura del frame en modo pantalla completa. Vea el siguiente ejemplo:

Después de permitir el uso de pantalla completa, el frame de captura se abrirá normalmente:

Realizar una solicitud POST a la API REST

La captura de las imágenes es solo la primera parte del proceso. Después de capturar la imagen, es necesario enviar el encrypted generado por el SDK a las APIs REST. Obtenga más información en la sección Creación de proceso.

¿Dudas?

¿No encontraste algo o aún necesitas ayuda? Si ya eres cliente o socio, puedes ponerte en contacto a través del Centro de Ayuda.