@biopassid/face-sdk

BiopassID Face SDK Web

Componente web de integração do Biopass ID

Getting started

Primeiramente crie uma pasta chamada models no diretório de arquivos estáticos da sua aplicação, e adicione os arquivos tiny_face_detector_model-shard1 e tiny_face_detector_model-weights_manifest.json. Sua estrutura de pastas ficará semelhante a isso:

/assets
/js
/css
/models
    - tiny_face_detector_model-shard1
    - tiny_face_detector_model-weights_manifest.json
/index.html

Após isso basta instalar o pacote.

Com um bundler

Intale a dependencia:

npm i --save @biopassid/face-sdk

Utilize no seu projeto

import { useCamera } from '@biopassid/face-sdk'

Através de CDN

Adicione o script ao projeto e serão injetados os quatro modulos globalmente ao projeto

<script src="https://cdn.jsdelivr.net/npm/@biopassid/face-sdk/unpkg/face-sdk.min.js"></script>
<script>
    const { takePicture } = useCamera();
</script>

Modulos

• useCamera
  

useCamera

O módulo useCamera oferece as seguintes funcionalidades.

takePicture()

import { useCamera } from '@biopassid/face-sdk'

const { takePicture } = useCamera();

async function handleTakePicture() {
    const resp = await takePicture({
        element: document.querySelector("#elementId"),
        options: {...} // Opcional
    })
}

Options

O método takePicture() pode receber um parametro opcional "options", que possui as seguintes propriedades:

Nome	Tipo	Descrição	Default
mask	MaskOptions	Define as propriedades da máscara	null
backButton	ButtonOptions	Define as propriedades do botão de voltar	null
captureButton	ButtonOptions	Define as propriedades do botão de capturar a foto	null
cancelButton	ButtonOptions	Define as propriedades do botão de cancelar foto	null
confirmButton	ButtonOptions	Define as propriedades do botão de confirmar foto	null
switchButton	ButtonOptions	Define as propriedades do botão de trocar câmera	null
loading	LoadingOptions	Define as propriedades do loading	null
legend	LegendOptions	Define as propriedades da legenda com as informações da captura	null
faceDetection	FaceDetectionOptions	Define as propriedades do detector facial	null
width	string	Largura do container	'100%'
height	string	Altura do container	'100%'
modelsDirectory	string	Diretório dos models de reconhecimento facial	'/models'
cameraPresets	CameraPresets	Define as propriedades da camera	null
fontFamily	string	Fonte padrão dos textos	'inherit'

Interfaces

MaskOptions

Propriedades	Tipo	Descrição	Default
enabled	boolean	Elemento ativo	true
type	'face' | 'square' | 'ellipsis'	Formato da máscara	"face"
backgroundColor	string	Cor da máscara	'black'
backgroundOpacity	number	Opacidade da mascara	.6
frameColor	string	Cor do frame	"white"
frameThickness	number	Espessura do frame	3

ButtonOptions

Propriedades	Tipo	Descrição
enabled	boolean	Elemento ativo
size	string	Tamanho do botão
backgroundColor	string	Cor do botão
label	TextOptions	Opções do Label do botão
icon	IconOptions	Opções do ícone do botão
padding	number	Espaçamento lateral do botão

TextOptions

Propriedades	Tipo	Descrição
enabled	boolean	Elemento ativo
content	string	Conteúdo do texto
fontSize	string	Tamanho da fonte
fontWeight	number	Peso da fonte
color	string	Cor da fonte

IconOptions

Propriedades	Tipo	Descrição
enabled	boolean	Elemento ativo
source	string	URL da imagem
color	string	Cor do ícone (Funciona apenas de source não estiver definidio)
size	string	Tamanho do ícone

LoadingOptions

Propriedades	Tipo	Descrição
enabled	boolean	Elemento ativo
dotsSize	string	Tamanho dos circulos
dotsSpacing	string	Espaçamento dos círculos
dotsColor	string	Cor dos círculos
backgroundColor	string	Cor do background
size	string	Tamanho do elemento

CameraPresets

Propriedades	Tipo	Descrição
aspectRatio	number	Aspecto da camera ideal
preferredResolution	number	Resolução da câmera ideal
deviceId	string	ID padrão do dispositivo

LegendOptions

Propriedades	Tipo	Descrição
enabled	boolean	Elemento ativo
title	boolean	Título da legenda
subtitle	number	Subtítulo da legenda

FaceRecoginizer

Propriedades	Tipo	Descrição
enabled	boolean	Elemento ativo
autoCapture	boolean	Ativa a captura automática

Exemplo com todas as propriedades

Lembrando que todos os elementos são opcionais

const resp = await takePicture({
    element: document.querySelector("#camera"),
    options: {
        mask: {
            enabled: true,
            type: 'face',
            backgroundColor: 'black',
            backgroundOpacity: .6,
            frameColor: 'white',
            frameThickness: 3,
        },
        backButton: {
            enabled: true,
            size: '30px',
            backgroundColor: 'transparent',
            label: {
                enabled: false,
                content: "",
                fontSize: '1rem',
                fontWeight: 'normal',
                color: 'white',
            },
            icon: {
                enabled: true,
                source: null,
                color: 'white',
                size: '30px',
            },
            padding: "0",
        },
        captureButton: {
            enabled: true,
            size: '30px',
            backgroundColor: 'white',
            label: {
                enabled: false,
                content: "",
                fontSize: '1rem',
                fontWeight: 'normal',
                color: 'black',
            },
            icon: {
                enabled: true,
                source: null,
                color: 'black',
                size: '30px',
            },
            padding: string,
        },
        cancelButton: {
            enabled: true,
            size: '30px',
            backgroundColor: 'red',
            label: {
                enabled: false,
                content: "",
                fontSize: '1rem',
                fontWeight: 'normal',
                color: 'white',
            },
            icon: {
                enabled: true,
                source: null,
                color: 'white',
                size: '30px',
            },
            padding: "0",
        },
        confirmButton: {
            enabled: true,
            size: '30px',
            backgroundColor: 'white',
            label: {
                enabled: false,
                content: "",
                fontSize: '1rem',
                fontWeight: 'normal',
                color: 'black',
            },
            icon: {
                enabled: true,
                source: null,
                color: 'black',
                size: '30px',
            },
            padding: string,
        },
        legend: {
            title: {
                enabled: true,
                content: "Captura Facial",
                fontSize: '1.5rem',
                fontWeight: '600',
                color: 'white',
            },
            subtitle: {
                enabled: true,
                content: "",
                fontSize: '1rem',
                fontWeight: 'normal',
                color: 'white',
            }
        },
        faceDetection: {
            enabled: true,
            autoCapture: false,
        },
        width: '100%',
        height: '100%',
        modelsDirectory: '/models',
        cameraPresets: {
            aspectRatio: 16/9,
            preferredResolution: 480,
            deviceId: null,
        },
        fontFamily: 'inherit',
    }
})