Research
Recent Trends in Malicious Packages Targeting Discord
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
@biopassid/face-sdk
Advanced tools
Readme
Key Features • Customizations • Demo • First Steps • Installing • How To Use • Example • Support
Increase the security of your applications without harming your user experience.
All customization available:
Enable or disable components:
Change all colors:
Explore our features that make your apps do more.
Web Demo - of BioPass ID Face SDK JavaScript and API'S
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
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>
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 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'
}
})
To know more about all SDK options and methods you can visit our complete documentation
<!-- 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>
FAQs
Unknown package
We found that @biopassid/face-sdk demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
Security News
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.