Captura de Selfie

Nesta seção, você encontrará todas as informações necessárias para o uso e integração do SDK da plataforma Unico IDCloud em suas aplicações Web para a captura da selfie


Este guia foi elaborado para ajudá-lo a implementar o SDK Web de forma rápida e fácil. Abaixo veja o passo a passo de todo o processo de integração. Após isso, caso deseje personalizar a experiência, não deixe de ver a seção Personalização Web.

Inicializar o SDK


Para começar, você deve efetuar 3 passos simples em seu projeto:

Instancie um novo Builder:

const unicoCameraBuilder = new UnicoCheckBuilder();

Especifique o caminho dos arquivos adicionais (caso adicionados em seu projeto):

unicoCameraBuilder.setResourceDirectory("/resources");

Especifique o caminho dos arquivos dos modelos de IA, caso utilize a funcionalidade de Câmera Inteligente

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

A partir da versão 3.18.0, para que o SDK busque automaticamente os recursos adicionais basta que o método setResourceDirectory não seja implementado e as configurações de CSP para uso do SDK sejam aplicadas corretamente.

Configuração de ambientes


Caso não seja configurado, por padrão o SDK Web utiliza o ambiente de produção.

É possível configurar o ambiente que será utilizado na execução da SDK. Utilize o enumerado SDKEnvironmentTypes que contém os seguintes enumerados:

  • SDKEnvironmentTypes.PROD: para ambiente de Produção;

  • SDKEnvironmentTypes.UAT: para ambiente de Homologação.

Veja como implementar no exemplo abaixo:

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

unicoCameraBuilder.setEnvironment(SDKEnvironmentTypes.UAT);

Implementar as funções de callback


Um dos objetos que deve ser passado como parâmetro ao método responsável por renderizar o frame de captura é o de callback. Este objeto deverá conter funções de callback para casos de sucesso e erro, como exemplificados abaixo.

  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 é obrigatório e caso não seja corretamente implementado (contemplando todos os eventos de success ou error) gera uma exceção, que caso não tratada, é exibida no console do usuário.

Configurar e iniciar


Para iniciar a câmera com as configurações feitas até aqui, é preciso criar uma instância do builder através do método build().

const unicoCamera = unicoCameraBuilder.build();

Em seguida, com a câmera "montada", deve-se configurar o modo de captura da câmera.

A preparação da câmera será efetuada a partir do método prepareSelfieCamera(), disponibilizado a partir do builder. Este método recebe 2 parâmetros:

  • A classe UnicoConfig obtida neste passo;

  • Modo de câmera desejado, sendo eles:

    • SelfieCameraTypes.NORMAL para o modo de câmera normal;

    • SelfieCameraTypes.SMART para o modo de câmera inteligente.

Este método gera uma promise que ao ser resolvida, devolve um objeto que é utilizado para efetivamente abrir a câmera através do método open, que recebe como parâmetro as funções de callback configuradas no passo acima.

Para otimizar a abertura da câmera é possível separar as chamadas dos métodos prepareSelfieCamera() e open().

Caso deseje utilizar a captura automática, passe o parâmetro Unico.SelfieCameraTypes.SMART para o método prepareSelfieCamera.

Para a captura inteligente, os modelos de visão computacional também devem ser carregados através do método setModelsPath, conforme explicado no primeiro passo deste guia.

Usando a classe 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 modo de captura em iFrame's


É possível utilizar o SDK Web com Liveness Interativo embarcado em um iFrame, para isso é preciso realizar uma implementação semelhante a seção anterior na preparação da câmera.

A preparação da câmera será efetuada através do método prepareSelfieCameraForIFrame(), também disponibilizado a partir do builder. Este método recebe os mesmos parâmetros do 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
  });

Implementação do elemento iFrame


Para que a captura funcione corretamente é necessário implementar o elemento <iframe> como no exemplo abaixo:

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

Comportamento em tela cheia

Para executar a captura é necessário estar no modo tela cheia do browser para que o SDK possa se redimensionar automaticamente. Sendo assim, ao executar a captura, o SDK apresenta uma tela solicitando a abertura do frame em modo tela cheia. Veja no exemplo a seguir:

Após permitir o uso de tela cheia, o frame de captura abrirá normalmente:

Realize um requisição POST na API REST do by Client


A captura das imagens é apenas a primeira parte da jornada. Após capturar a imagem, é necessário enviar o encrypted gerado pelo SDK para as APIs REST do by Client. Saiba mais na seção CreateProcess do by Client.


Dúvidas?

Não encontrou algo ou ainda precisa de ajuda? Se já é um cliente ou parceiro, pode entrar em contato através da Central de Ajuda.

Atualizado

Isto foi útil?