Passive

This component can be found under the Sybrin.Biometrics namespace and is called PassiveComponent.

Full name: Sybrin.Biometrics.PassiveComponent.

It is a component that wraps the passive liveness detection functionality provided by the Sybrin Biometrics JavaScript API and presents it in the form of a simple UI. It's recommended that you use this component if you do not wish to create your own UI and simply want to use the passive liveness functionality provided by the Sybrin Biometrics Web SDK.

With default styling, the passive component appears as follows:

Passive Component

Upon initializing, the user's camera will start and the component will display a video feed while waiting for the user to center their face inside the oval. This action can be cancelled, resulting in the onLivenessCancelled event firing.

If an error occurs, the onLivenessError event will fire.

If liveness detection completes, the onLivenessResult event will fire.

Initialization

The passive component can be initialized using the following code:

HTML

<div id='passive'></div>

JavaScript

var options = new Sybrin.Biometrics.Options({
    apiKey: 'your-api-key-here', 
    authorizationEndpoint: 'your-auth-endpoint-here',
    passiveLivenessEndpoint: 'your-liveness-endpoint-here',
    // modelPath: '/assets' // Use if your model is located elsewhere
});

// Option 1: Passing an id
var component = new Sybrin.Biometrics.PassiveComponent({ 
    id: 'passive',
    options: options
});

// Option 2: Passing a DOM element
var element = document.getElementById('passive');
var component = new Sybrin.Biometrics.PassiveComponent({ 
    element: element,
    options: options
});

component.initialize();

The Sybrin Web SDK provides the option to either pass down the ID of the element you wish to use for component initialization, or to pass the element directly.

Please note that 'passive' is just an example in this context and the ID may be changed as desired as long as it matches the value passed down during component initialization in JavaScript.

During initialization, the passive component allows for a number of configuration options that may be passed down using an object literal. The parameters that may be used on the object include the following:

Required:

• id (string): ID of the element you wish to use for component initialization. Not required if element is passed.

• element (HTMLElement): Element you wish to use for component initialization. Not required if id is passed.

• api (Sybrin.Biometrics.Api): Instance of a JavaScript API that may be pre-configured as desired. Not required if an instance of options is passed.

• options (Sybrin.Biometrics.Options): Configuration options to instantiate Sybrin.Biometrics.Api with. Not required if an instance of api is passed.

Optional:

• correlationId (string): Unique identifier for the case that will be passed down to the back-end if set.

• deviceId (string): ID of a specific device to use for passive liveness.

Warning: Initialization will fail if the intended host element does not exist yet.

Always ensure that the initialize function is only called after the DOM is loaded.

Destruction

The passive component may be removed from the UI by calling the destroy() function on it.

Example:

component.destroy();

Events

The passive component offers multiple events. To hook onto an event, simply assign a function to it.

The following options are available:

• onLivenessResult(result: PassiveLivenessResult)

• onLivenessError(error: string)

• onLivenessCancelled()

• onBeforeLiveness()

On Liveness Result

This function is called when liveness detection completes either successfully or unsuccessfully. If unsuccessful, the alive property value will be false. To hook onto the event, you may use the following code:

component.onLivenessResult = function(result) {
    console.log('Alive: ', result.alive);
    console.log('Confidence: ', result.confidence);
}

The result parameter is of type PassiveLivenessResult and includes the following properties:

• alive (boolean): Whether or not the liveness detection passed.

• confidence (float): Confidence in liveness. 0 is no confidence. 1 is full confidence.

• image (string): The image data in data URI format.

• video (Blob): The video data in Blob format. Only included if the includeVideo property is set to true in configuration options.

A false result may include a spoof, failure to detect a face due to poor image quality, or any other expected failed workflow outcomes. Only exceptions such as failure to gain access to the camera would trigger the liveness error function below.

On Liveness Error

This function is called when something goes wrong and an error occurs during liveness detection. To hook onto the event, you may use the following code:

component.onLivenessError = function(error) {
    console.log('An error occurred: ', error);
}

The error parameter is of type string.

On Liveness Cancelled

This function is called when liveness detection was started, but then cancelled before completion. To hook onto the event, you may use the following code:

component.onLivenessCancelled = function() {
    // Your code here
}

No parameter is passed to this function call.

On Before Liveness

This function is called before the camera is launched when passive liveness detection starts. It is recommended to use this function to set the correlationId of the component by calling setCorrelationId(). To hook onto the event, you may use the following code:

component.onBeforeLiveness = function() {
    // Your code here
    // component.setCorrelationId('your-id-here');
}

No parameter is passed to this function call.

Styling

The passive component is structured a follows:

<div class="sybrin-biometrics-container">
    <div class="sybrin-biometrics-component-section">
        <div class="sybrin-biometrics-video">
        </div>
    </div>
    <div class="sybrin-biometrics-button-section sybrin-biometrics-align-left">
        <button class="sybrin-biometrics-cancel sybrin-biometrics-flow-button sybrin-secondary">Cancel</button>
    </div>
</div>

The classes and elements specified above may be used to freely style the passive component as desired. To do so, simply create a stylesheet and include it in the project, then style according to the above classes and elements.

Styling implementation example:

HTML

index.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen"/>
</head>
<body>
    <div id='component'></div>
</body>
</html>

CSS

styles.css

.sybrin-biometrics-flow-button.sybrin-secondary {
    color: #963296;
    background-color: #f3e0f3;
    border: 2px solid #f3e0f3;
}

Before Styling

After Styling