IDLive Face web modules

This package contains the source code and an example of using two web modules:

• camera module - takes pictures from the camera;
• request module - sends requests to the IDLive Face server.

Installation

$ npm i fas-web-ui-components

Using

Request module

Input parameters:

• photos - array Blob files ( Blob [] )
• apiKey - special key to access IDLive Face Server. To get it, contact our sales.
• url (optional parameter) - url is the server URL that will be used for the request
• id (optional parameter) - id for sent files

import requestOnliveness from "fas-web-ui-components/requestModule/index"

requestOnliveness(photos, apiKey, url, id)
  .then(res => {
    console.log(res);
  });

Returned object format:

• If the photo is a real person - { probability: number, id: any }
• If the photo does not fit in any way - { livenessError: string }
• If an error occurs - { error: string }

Camera module

Simple use

This module creates a web component <camera-component> , which includes several parameters:

• url_logo (idrnd logo) - the picture that takes the place of the camera when it is off
• show_mask (false) - show mask for easy photography
• is_multiframe (false) - records 3 seconds and gives out 10 frames at the end
• is_stop_camera (false) - complete shutdown of the camera when it is closed
• timer (false) - enable 3 second delay for single shots and shooting time for multiframe
• background_color (white) - background control panel
• base64 (false) - enable output format in base64
• disable_control_panel (false) - disable control panel
• is_stop_camera (false) - turns off the camera completely
• face_detection (false) - enable facial recognition in the browser
• model_path - path of finding models for face detection (only when face_detection is enabled)
• probability_threshold (50) - face detection probability threshold (only when face_detection is enabled)

*.js

import { applyPolyfills, defineCustomElements } from "fas-web-ui-components/cameraModule/loader";

applyPolyfills().then(() => {
  defineCustomElements(window);
});

*.html

<camera-component
    url_logo="path/to/your/logo"
    show_mask=false
    is_multiframe=false
    is_stop_camera=false
    timer=false
    background_color="black"
    base64=false
    disable_control_panel=false
    is_stop_camera=false
    face_detection=true
    model_path="/path/to/models"
/>

This module returns the following events:

• If the recording is successful, the capture event is returned, which contains an array of blob files([Blob, ...]/["base64", ...])
• If problems occur during recording, an error event is raised containing a message about the problem
• If face detection is enabled, and the face does not pass the scan, then event detectionError is triggered containing an object with face detection errors

Note

if face detection is enabled, and it passes all checks, then event capture is triggered

All output is in event.detail

Extended use

The Camera-component inside itself has polyfills that are activated depending on the capabilities of the browser.

For greater development flexibility, the component can not only issue events, but also listen to them. Examples of events:

• openCamera
• closeCamera
• takePhoto
• loadModels

You may also need the event videoStarted which returns the module when the video stream starts. And detectorInitialized event, which is returned when the detector is ready to work. You can see an example of use in implementation on vue.

Face recognition

Using

1. Take from the folders node_modules/cameraModule/assets models and scripts
2. Add opencv to the global environment(<script src="/scripts/opencv.js"></script>)
3. Specify the location of the models in variable model_path
4. Install node-fetch in your project npm install --save node-fetch
5. Indicate in the component that you are going to use face recognition face_detection=true

Now, when the camera is turned on, the module will start to recognize faces. If the person does not pass the quality check, then an error is returned with a specified reason. If the face meets all the requirements, then a picture is taken and the camera is closed.

Note

For full support in ios, when you turn on full-screen mode, the block in which the component is stored should occupy 100% of the screen.

Examples

• html
• React
• Vue
• Angular