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.

• O atributo encrypted é destinado estritamente ao envio da imagem através das APIs do by Client. Não se deve abrir e serializar esse atributo, pois suas características podem ser alteradas sem aviso prévio. Seu uso deve ser exclusivo nas interações com as APIs para garantir a integridade e segurança dos dados. A Unico não se responsabiliza por quaisquer danos decorrentes dessa prática, uma vez que as modificações podem ocorrer de maneira imprevista.

• Os arquivos base64/encrypted podem sofrer variações de tamanho de acordo com diversas variáveis, dentre elas, a qualidade dos aparelhos e das fotos geradas pelos mesmos e regras de negócio da Unico. Para não encontrar problemas em sua aplicação, não limite em sua lógica de programação ou sua infraestrutura o tamanho da string gerada pela SDK para os arquivos.

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()
  .setProjectNumber("<YOUR_PROJECT_NUMBER>")
  .setProjectId("<YOUR_PROJECT_ID>")
  .setMobileSdkAppId("<YOUR_MOBILE_SDK_APP_ID>")
  .setHostname("<YOUR_HOSTNAME>")
  .setHostInfo("<YOUR_HOST_INFO>")
  .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()
  .setProjectNumber("<YOUR_PROJECT_NUMBER>")
  .setProjectId("<YOUR_PROJECT_ID>")
  .setMobileSdkAppId("<YOUR_MOBILE_SDK_APP_ID>")
  .setHostname("<YOUR_HOSTNAME>")
  .setHostInfo("<YOUR_HOST_INFO>")
  .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
  });

O método prepareSelfieCameraForIFrame() só funciona se a implementação estiver em um iFrame, o uso fora de um iFrame resulta no erro 73724. Assim como usar o método prepareSelfieCamera() dentro de um iFrame resulta no erro 73724

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:

A Apple impede o uso de APIs de tela cheia especificamente em iPhones (iPads são aceitáveis). Sendo assim, para capturas em iPhones, é necessário configurar o posicionamento do iFrame por conta própria.

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.

Por motivos de segurança, o intervalo entre a geração do encrypted e o envio via um dos fluxos disponíveis deve ser de até no máximo 10 minutos. Envios feitos além deste período serão rejeitados automaticamente pela API.

---

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.