@biopassid/face-sdk NPM

Key Features

Face Detection
- We ensure that there will be only one face in the capture
Face Positioning
- Ensure face position in your capture for better enroll and match.
Auto Capture
- When a face is detected the capture will be performed in how many seconds you configure.
Resolution Control
- Configure the image size thinking about the tradeoff between image quality and API's response time.
Aspect Ratio Control
Fully customizable interface

Customizations

Increase the security of your applications without harming your user experience.

All customization available:

Title Text
Help Text
Loading Text
Font Family
Face Frame
Overlay
Default Camera
Capture button

Enable or disable components:

Tittle text
Help Text
Capture button
Button icons
Flip Camera button
Flash button

Change all colors:

Overlay color and opacity
Capture button color
Capture button text color
Flip Camera color
Flash Button color
Text colors

Demo

Explore our features that make your apps do more.

Web Demo - of BioPass ID Face SDK JavaScript and API'S

First Steps

First create a folder called models in your application's static files directory. Donwload and add this two files

tiny_face_detector_model-shard1

tiny_face_detector_model-weights_manifest

Your folder structure will look like this:

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

Installing

Through bundler

Install the dependency:

npm i --save @biopassid/face-sdk

Use in your project:

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

Through CDN

Add the script to the project and the modules will be injected inside an object called faceSdk:

<script src="https://cdn.jsdelivr.net/npm/@biopassid/face-sdk/face-sdk.min.js"></script>
<script>
        const {takePicture} = faceSdk.camera();
        async function handleTakePicture() {
            const resp = await takePicture({
                element: document.querySelector("#elementId"),
            })
        }
        handleTakePicture();


</script>

How To Use

Basic usage

import { camera } from '@biopassid/face-sdk'
<script>
        const {takePicture} = camera();
        async function handleTakePicture() {
            const resp = await takePicture({
                element: document.querySelector("#elementId"),
            })
        }
        handleTakePicture();
</script>

Adding Face Validation

The takePicture function has an argument called "faceDetectionAdapter", which is a function responsible for performing the validation processing, the FaceSDK has a standard adapter for face detection. It is also necessary to run the function responsible for loading the models

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,
    })
}

Adding Auto Capture

To add automatic capture, simply activate the functionality within the options parameter.

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
            }
        },
    })
}

Internationalization

It is possible to define the texts displayed during face detection through parameter 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",
            keepStill: "Mantenha o rosto parado",
        },
        options: {
            faceDetection: {
                autoCapture: true
            }
        },
    })
}

Example

Example with all properties

All elements are optional

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",
            maxCameraCapacity: true
        },
        fontFamily: 'inherit',
        formatImage: 'image/jpeg'
    }
})

Options

To know more about all SDK options and methods you can visit our complete documentation

Documentation

Changelog

1.3.26

Breaking Changes

When using the plugin via CDN, the functions are stored in an object named faceSdk.

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

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