SDK Detocated

This SDK He's deprecated. JAAK Visage SDK Web as a substitute.

facedetector@v.1.6.0 It's a web component that allows optimal face capture.

Introduction

The component FaceDetectorComponent That component forms part of an ecosystem with interoperable web components that are compatible with the main standards of the Web. Its architecture based on Shadow DOM, slots and style encapsulation allows for clear, secure and maintenance integration in any enabling environment.

Key functionality

Local file Loading: Users can select images from their device. The component valids the file and, if they meet the criteria of a legible document, emits the encoded result at Base64.
Camera capture: It activates the device's camera to automatically detect a face in real time. By detecting one under best conditions, capture and emits encoded data also at Base64.

Installation

Use the following command to install the package from NPM:

Requires:
- Node.js and npm installed.
- Download from: https://nodejs.org
- Check the installation:
```
node -v
npm -v
```
Start your project (if applicable):
```
npm init
```
Install package:

npm install @jaak.ai/face-detecto

Confirm the installation: Check that the package is listed at package.json.

Alternative installation option

Also you can install the component directly with a label <script> at the head head HTML:

<script
  type="module"
  src="https://unpkg.com/@jaak.ai/document-detector"></script>

Rapid Use

<face-detector
  config={{
    width: '640px',
    height: '480px',
    enableMicrophone: true,
    mode: 'video-camera',
    placeholder: 'Put your document up.',
    buttonText: 'Subir',
    documentAccept: 'image/*',
    description: 'Please put up a legible image.',
    size: 2048
  }}
  onStatus={(event) => handleStatusChange(event.detail)}
  onComponentError={(event) => handleComponentError(event.detail)}
  onFileResult={(event) => handleFileResult(event.detail)}
></face-detector>

Component properties

Component Setup `config: ConfigComponent` (optional)

Property	Type	Description
width	string	Width of the component (e.g. '640px'). Default: '500px'
height	string	Height of the component (e.g. '480px'). Default: '400px'
enableMicrophone	boolean	Turn on the bug. `false`
model	string	Operating mode: `'video-camera'` or `'upload-file'`
placeholder	string	Field text to upload file
buttonText	string	Loading button text
document	string	Required file types (e.g. `image/*`)
description	string	Description shown next to the input
size	number	Maximum permitted size (KB)
video	number	video duration in seconds
video	Medium	Video restrictions (resolution, fps). See class details here.
cameraSource	string	Camera to use: `'user'` or `'environment'`
video	string	Video format: '1920x1080\ @ 30', etc.
autoRecorder	boolean	Record automatically if you detect a face
HideFaceTracker	boolean	Hide facial detection figure
FaceDetection	boolean	Untiring facial detection
progress	boolean	Can record multiple consecutive videos without automatically stopping
muteFaceDetectionMessages	boolean	Silent messages from the detection system
HideTimer	boolean	Hide the recording indicator
timerStyles	TimerStyles	Timer Style
faceTrackerStyles	FaceTrackerStyles	Style of figure that sets face
offlinesModel	boolean	Load model without network requests (offline)
enableInstructions	boolean	It allows you to display instructions to guide the user in face detection.
delayInstructions	number	Time in milliseconds to show each instruction during first run. By default: 3000ms.
delayReplayInstructions	number	Time in milliseconds to show each instruction during repetitions. By default: 3000ms.
instructionsButton	string	Text that will be displayed in the button that allows users to play the instructions.

Interface `TimerStyles`

Define the collection indicator style at the configuration property timerStyles:

Property	Type	Description
color	string	Timer text color
circle	string	Color of the circle of progress
circle	string	Color of the circle bottom
circle	string	Color while successfully complete
width	number	Circle width
height	number	Circle stop
fondSize	number	text size
posX	number	Horizontal position (0 - 100)
posY	number	Vertical position (0 - 100)
strokeWidth	number	Track width
dashArray	string	Stretch pattern

Interface `FaceTrackerStyles`

Customize the detection colors at the configuration property faceTrackerStyles:

Property	Type	Description
validColor	string	valid detection color
InvalidColor	string	Invalid detection color

Show Instructions for Use

Enabling property enableInstructions within component configuration object config: ConfigComponent, using the following properties to customize the instructions.

Property	Type	Description
`instructionsAnimation`	`string[]`	I fix routes to the animation archives used for instructions.
`instructionsText`	`string[]`	Settle text chains to display with every training animation.

You can customize the animated instructions and associated texts following the following example:

const faceDetector = document.querySelector('face-detector');

// Enabling instructions at config
faceDetector.config = {
  // ... other properties of ConfigCompact
  enableInstructions: true,
};

// Animated instructions (.lav format from an URL)
faceDetector.instructionsAnimation = [
  "https://raw.githubusercontent.com/jaak-ai/jaak-storage/main/animations/rive/glasses.riv",
  "https://raw.githubusercontent.com/jaak-ai/jaak-storage/main/animations/rive/hat.riv",
  "https://raw.githubusercontent.com/jaak-ai/jaak-storage/main/animations/rive/headphones.riv",
  "https://raw.githubusercontent.com/jaak-ai/jaak-storage/main/animations/rive/light.riv",
];

// A descriptive text associated with each animation
faceDetector.instructionsText = [
  "No lenses",
  "No hat",
  "No hearing aids",
  "Adjust light without contralux",
];

Events

Event	Name	Description
`status`	`StatusFaceDetector`	Current status of component
`componentError`	`webComponentError`	Errors occurring within component
`fileResult`	`FileResult`	Result of the captured file
`faceDetectionMessage`	`FaceDetectionMessage`	Results of face detection system

Methods

Method	Parameters	Reforms	Description
`turnOffFaceDetector`	none	`void`	Starts facial detection
`switchMode`	`'video-camera'` / `'upload-file'`	`void`	Switch
`stopComponent`	none	`void`	Stops all operations
`restartComponent`	none	`void`	Reboot component
`getMode`	none	`string`	Returns current mode
`recordVideo`	none	`string` (Base64)	Begins and returns video
`takeSnapshot`	none	`string` (Base64)	Capture an image
`getVideoElement`	none	`HTMLVideoElement`	Reforms video item
`getStream`	none	`MediaStream`	Reforms the stream of the camera
`toggleCamera`	none	`void`	Switch between cameras (front and back)
`stopVideoStream`	none	`void`	Stops video stream
`restartVideoStream`	none	`void`	Reboot video stream
`resetFaceDetector`	`resetHard: boolean`	`void`	Reboot internal configuration

Additional interfaces

`FileResult`

Reacts data from face detection result

Property	Type	Description
base64	string	File encoded at base64
Type	string	MIME type (optional)
name	string	Original name of file (optional)
size	number	File size in bytes (optional)

`FaceDetectionMessage`

Returns message data during face detection

Property	Type	Description
Label	string	General description of the result
details	string	Additional details
faceExist	boolean	indicates if a face was detected
receptPosition	boolean	indicates if his face's in the right place

`webComponentError`

Returns data from the resulting error

Property	Type	Description
Label	string	Message of error
code	string	Error code (optional)
details	any	Additional information about error (optional)

Example of Basic Implementation

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Face Detector Usage</title>
		<script type="module" src="https://unpkg.com/@jaak.ai/face-detector"></script>
	</head>
	<body>
		<div class="content">
			<face-detector id="faceDetector"></face-detector>
		</div>
	</body>
	<style>
		.content {
			height: 90vh;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10px;
			margin-top: 1rem;
		}
	</style>

	<script type="module">
		// Select the face-detector component
		const faceDetector = document.querySelector('face-detector');

		// Configure component with initial adjustments
		const config = {
			mode: 'video-camera',
			timerStyles: {
				width: 80,
				height: 80,
				fontSize: 40,
				posY: 70,
			},
			width: '100%',
			height: '100%',
			offlineModel: false,
			validateCamera: true,
			enableInstructions: true,
			delayInstructions: 1000,
			delayReplayInstructions: 3000,
			autoRecorder: true,
		};

		faceDetector.config = config;

		// Handling mistakes
		faceDetector.addEventListener('componentError', (event) => {
			console.error('Failed event:', event.detail);
			// Display error messages to user
		});

		// Handling file results
		faceDetector.addEventListener('fileResult', (event) => {
			console.log('Successful capture video:');
			// Procure the result of the file, for example, display the image or video
			console.log(event.detail.base64);
		});
	</script>
</html>

Additional

Example Repository

Can be supported with a functional example at the following repository: https://github.com/jaak-ai/face-detector-js-example