@biopassid/face-sdk

BioPass ID 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 { camera } from '@biopassid/face-sdk'

Através de CDN

Adicione o script ao projeto e os módulos serão injetados dentro de um objeto chamado faceSdk;

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

Modulos

• camera
  

camera

O módulo camera oferece as seguintes funcionalidades.

Uso básico

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

const { takePicture } = camera();

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

Para um funcionamento ideal da biblioteca, certifique-se de que a aceleração de hardware do seu navegador esteja ativada.

Adicionando validação facial

A função takePicture possui um argumento chamado "faceDetectionAdapter", que é uma função responsável por realizar o processamento da validação, o FaceSDK possui um adapter padrão para a detecção facial. Também é necessário executar a função responsável pelo carregamento dos modelos

import { camera, faceDetectionAdapter, loadFaceDetectorModels } from '@biopassid/face-sdk'

const { takePicture } = camera();

async function handleTakePicture() {
    await loadFaceDetectorModels(); // Carregamento dos modelos

    const resp = await takePicture({
        element: document.querySelector("#elementId"),
        faceDetectionAdapter: faceDetectionAdapter,
    })
}

Adicionando captura automática

Para adicionar a captura automática, basta ativar a funcionalidade dentro do parâmetro de opções.

import { camera, faceDetectionAdapter, loadFaceDetectorModels } from '@biopassid/face-sdk'

const { takePicture } = camera();

async function handleTakePicture() {
    await loadFaceDetectorModels();

    const resp = await takePicture({
        element: document.querySelector("#elementId"),
        faceDetectionAdapter: faceDetectionAdapter,
        options: {
            faceDetection: {
                autoCapture: true
            }
        },
    })
}

Internacionalização

É possível definir os textos apresentados durante a detecção facial através do parâmetro i18n.

import { camera, faceDetectionAdapter } from '@biopassid/face-sdk'

const { takePicture } = camera();

async function handleTakePicture() {
    const resp = await takePicture({
        element: document.querySelector("#elementId"),
        faceDetectionAdapter: faceDetectionAdapter,
        i18n: {
            noFacesDetected: "Nenhuma face detectada",
            multipleFacesDetected: "Multiplas faces detectadas",
            moveFaceLeft: "Mova o rosto para a esquerda",
            moveFaceRight: "Mova o rosto para a direita",
            moveFaceUp: "Mova o rosto para cima",
            moveFaceDown: "Mova o rosto para baixo",
            moveFaceCloser: "Aproxime o rosto para mais perto",
            keepStill: "Mantenha o rosto parado",
        },
        options: {
            faceDetection: {
                autoCapture: true
            }
        },
    })
}

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'
formatImage	'image/png' | 'image/jpeg' | 'image/webp'	Define o formato da foto capturada	'image/png'

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

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
facingMode	string	Modo da câmera default ("environment" para câmera traseira, se ouver)

LegendOptions

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

FaceDetectionOptions

Propriedades	Tipo	Descrição
enabled	boolean	Elemento ativo
autoCapture	boolean	Ativa a captura automática
timeToCapture	number	Tempo para realizar a captura automática em milisegundos
timeToCaptureFeedbackColor	string	Cor do feedback de deteção facial
multipleFacesEnabled	boolean	Permite a captura de foto com duas ou mais faces
scoreThreshold	number	Limite mínimo de confiança para uma detecção ser considerada válida. Deve ser um número entre 0 e 1, onde 0.1 apresente um nível de confiaça para detecção de rosto menor e 0.9 seria um maior nível de confiança. Default: 0.5

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,
            timeToCapture: 3000,
            timeToCaptureFeedbackColor: "#FF0000",
            multipleFacesEnabled: true,
            scoreThreshold: 0.1
        },
        width: '100%',
        height: '100%',
        modelsDirectory: '/models',
        cameraPresets: {
            aspectRatio: 16/9,
            preferredResolution: 480,
            deviceId: null,
            facingMode: "environment"
        },
        fontFamily: 'inherit',
        formatImage: 'image/jpeg'
    }
})

Changelog

1.3.24

Breaking Changes

• Ao utilizar o plugin via CDN as funções são armazenadas em um objeto de nome faceSdk.

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

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