@biopassid/face-sdk
Version:
<h1 align="center"> <br> <a href="http://www.biopassid.com"><img src="https://uploads-ssl.webflow.com/5ec3d6d0293839cf102a656a/63a0d4cec83bbddea006d27a_biopassamarelo.svg" alt="BioPass ID" width="200"></a> <br>
416 lines (346 loc) • 11.7 kB
Markdown
<h1 align="center">
<br>
<a href="http://www.biopassid.com"><img src="https://uploads-ssl.webflow.com/5ec3d6d0293839cf102a656a/63a0d4cec83bbddea006d27a_biopassamarelo.svg" alt="BioPass ID" width="200"></a>
<br>
<br>
</h1>
<h4 align="center">BioPass ID Face SDK JavaScript.</h4>
<p align="center">
<a href="#">
<img src="https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black">
</a>
<a href="https://www.npmjs.com/package/@biopassid/face-sdk"><img src="https://badge.fury.io/js/@biopassid%2Fface-sdk.svg" alt="npm version" height="18"></a>
</a>
<a href="https://www.instagram.com/biopassid/"><img src="https://img.shields.io/badge/Instagram-E4405F?logo=instagram&logoColor=white"></a>
<a href="https://www.biopassid.com/">
<img src="https://img.shields.io/badge/BioPass%20ID-C59F64.svg?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAASCAYAAABrXO8xAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFASURBVHgBfVKBVcJQDEx5DFAnoBvYDVo3qBMgG7CBMAEygTKBOgHdgDqBOIHdoN7RC4Yvz7x37zfXXq7JTzYMw8HMcmChcw5s7TduyWdZtg6cTfSxRw+UCXcDNDAootBIAA8hr4mQP+tcXrxLheJWoUgs+jmMMZva/zFHb4uQv7NncF/ssQEqVIl9dcgf9WGMDrjnAx17kXEAFVADd4mwgFvvwpYPIF7sskcW8WF0wcBceC342zsUW6kQi+zdhDFJFZriW+LAQnEp/goRFZxaF8qtBPeEc+3XM7nitlNaSLT0/nEexedpj0UYEnd0Y+MOn52BGfvNRNT6uGVVcLzbVxun6Xd5VM537TRxcxGLcUBb9WvB1U6cdnWvvdz4EotvgijnDM5LosX9lqgIKPWuDM8HLxRX7iP06tFpIDE/xQ/gt+sCdAaM0AAAAABJRU5ErkJggg==">
</a>
</a>
<a href="https://www.biopassid.com/contacts">
<img src="https://img.shields.io/badge/Contact-us-1abc9c.svg">
</a>
</p>
<p align="center">
<a href="#key-features">Key Features</a> •
<a href="#customizations">Customizations</a> •
<a href="#demo">Demo</a> •
<a href="#firststeps">First Steps</a> •
<a href="#nstalling">Installing</a> •
<a href="#how-to-use">How To Use</a> •
<a href="#example">Example</a> •
<a href="https://www.biopassid.com/contacts">Support</a>
</p>
## 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
<p align="center">
<a href="https://www.biopassid.com/sdk/facesdk">
<img src="https://uploads-ssl.webflow.com/5ec3d6d0293839cf102a656a/63a0bca342c10af38e3e5bd1_62b9ac85b996b1dcb029dbce_tela-6.png">
</a>
<a href="https://www.biopassid.com/sdk/facesdk">
<img src="https://uploads-ssl.webflow.com/5ec3d6d0293839cf102a656a/63a0bca30c9cb42c9b39652d_62b9ac8549699712ef691028_tela-4.png">
</a>
<a href="https://www.biopassid.com/sdk/facesdk">
<img src="https://uploads-ssl.webflow.com/5ec3d6d0293839cf102a656a/63a0bca353ee8649d6524ba0_62b9ac858e98680c7f5c178f_tela-5.png">
</a>
</p>
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
<p align="center">
<a href="https://demo.biopassid.com/sdk">
<img src="https://uploads-ssl.webflow.com/5ec3d6d0293839cf102a656a/63a0b07c2afd7e6307462d8b_demo.biopassid.com_sdk_1.gif">
</a>
</p>
## 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 /face-sdk
```
Use in your project:
```bash
import { camera } from '/face-sdk'
```
> Through CDN
Add the script to the project and the modules will be injected inside an object called faceSdk:
```bash
<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
```bash
import { camera } from '/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
```bash
import { camera, faceDetectionAdapter, loadFaceDetectorModels } from '/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 '/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 '/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
<!-- 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>
```