@biopassid/face-sdk

BioPass ID Face SDK JavaScript.

Key Features • Customizations • Demo • First Steps • Installing • How To Use • Example • Support

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.30

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>