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](https://demo.biopassid.com/sdk) - 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](https://storage.googleapis.com/facecapturesdk/tiny_face_detector_model-shard1.shard)
[tiny_face_detector_model-weights_manifest](https://storage.googleapis.com/facecapturesdk/tiny_face_detector_model-weights_manifest.json)
Your folder structure will look like this:
```bash
/assets
/js
/css
/models
- tiny_face_detector_model-shard1
- tiny_face_detector_model-weights_manifest.json
/index.html
```
## Installing
> Through bundler
Install the dependency:
```bash
npm i --save @biopassid/face-sdk
```
Use in your project:
```bash
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:
```bash
```
## How To Use
> Basic usage
```bash
import { camera } from '@biopassid/face-sdk'
```
> 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
```bash
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.
```bash
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.
```bash
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
```js
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](https://docs.biopassid.com/#2ea0bce8-d144-4c8b-a44b-de3107ab9db1)
## Changelog
## 1.3.46
### Breaking Changes
- When using the plugin via CDN, the functions are stored in an object named faceSdk.
```html
```