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",
            moveFaceBack: "Mova o rosto para trás",
            moveFaceCloser:: "Mova o rosto para frente"
            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: 0.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",
  },
});

Options

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

Documentation

Changelog

1.3.46

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>