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");Configuração de ambientes
É 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/encryptedpodem 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.NORMALpara o modo de câmera normal;SelfieCameraTypes.SMARTpara 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.
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
});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.
Atualizado