Ng-naat-liveness NPM

Getting started

Installation

npm install ng-naat-liveness

Dependencies

Add the folder provided by the technical team within the project assets

Import

In the file app.module import the module:

import { NgNaatLivenessModule } from 'ng-naat-liveness';
.
.
.
... imports: [
       ...,
       NgNaatLivenessModule
    ]...

Usage

HTML

Add the selector inside some component and configure the input parameters:

  <ng-naat-liveness-workers
      [gestures]="['LEFT', 'RIGHT', 'LEFT']"
      [timer]="30"
      [videoMirror]="true"
      workerPath='./assets/liveness/worker/'
      modelPath="./assets/liveness/model/model.json"
      (detectionReady)="detectionReady()"
      (calibrationReady)="calibrationReady()"
      (calibrationPercentage)="calibrationPercentage($event)"
      (actionComplete)="actionComplete($event)"
      (processComplete)="processComplete($event)"
      (onerror)="onerror($event)">
    </ng-naat-liveness-workers>

Typescript

Listen to the events:

  detectionReady() {
    // detection ready
  }

  calibrationPercentage(progressPertentage: number) {
    // percentage of calibration
  }

  calibrationReady() {
    // calibration ready
  }

  actionComplete($event) {
    // action completed
  }

  processComplete(image) {
    // process complete 
  }

  onerror($event) {
    // some error
  }

Gestures allowed

Name	Actions	Description
LEFT	LEFT, FRONT	Turn left
RIGHT	RIGHT, FRONT	Turn right

Inputs

Name	Type	Required	Default	Description
gestures	string[]	true	null	Array of gestures to execute
modelPath	string	true	null	Path of the model.json, this file is included in the dependencies folder
workerPath	string	true	null	Path of the worker folder, this folder is included in the dependencies folder
timer	number	false	null	Time in seconds to completed all gestures
mask	boolean	false	true	View superimposed on the video (background transparent and ellipse)
videoMirror	boolean	false	true	Show the camera rotated 180 degrees

Outputs

Name	Return	Description
detectionReady	void	Fires when the browser has loaded dependencies needed to start the process
calibrationReady	void	Fires when face calibration is successfully completed
calibrationPercentage	number	Emit the percentage of calibration progress
actionComplete	ResponseAction	Fires when an action was completed
gestureComplete	ResponseAction	Fires when a gesture was completed
processComplete	string	Fires when all gestures was completed and return an image in base64 of the captured face
onerror	ResponseError	Is called when an error happens