Skip to main content

Facia Interactive SDK (with UI)

This guide provides a step-by-step approach to integrating and using the face detection and liveness verification SDK in a web application. Below are detailed instructions on how to incorporate this SDK into your project, customize its behavior, and handle the results.

Prerequisites​

Ensure you have the following before getting started:

  1. Basic knowledge of JavaScript and DOM manipulation.
  2. A modern web browser that supports the MediaPipe library.

Installation​

SDK Integration​

To integrate the SDK into your project, include the following script in your HTML file:

<script src="https://demo.facia.ai/facia-liveness-sdk.js"></script>

After including the SDK file, you can access the SDK methods using the FaciaLivenessSDK global variable. For example, to perform a liveness check, use the following code:

FaciaLivenessSDK.initializeFaceDetection(clientSecret, token);

Make sure to replace clientSecret or token with your actual client secret or token, but do not use both at the same time.

Function​

initializeFaceDetection(clientSecret, token)​

This function initiates the liveness verification process. It accept two parameters, enabling you to configure the necessary API endpoints.

Parameters​

clientSecret (string):

  • Your API client secret used for authentication. This is required for requests made to the liveness verification system, but cannot be used at the same time as the token.

token (string):

  • Your API token used for authentication. This is required for requests made to the liveness verification system, but cannot be used at the same time as the client secret.

Custom Events​

The SDK triggers various events throughout the liveness verification process. You can listen for these events to receive updates and handle different outcomes.

Event: imageLogError​

This event is dispatched when there is an issue with the image or an API request. You can listen for this event to handle errors in your application.

When triggered:​

  • Invalid or missing parameter.
  • API request failure.

Example​

document.addEventListener('imageLogError', (event) => {
    console.error('Error:', event.detail.message);
});

Event: livenessProcessing​

This event is triggered when the liveness verification process has started successfully.

When triggered:​

  • Once the SDK initiates the liveness verification request and before polling for the result begins.

Example​

document.addEventListener('livenessProcessing', () => {
    console.log('Liveness verification process started.');
});

Event: livenessResultReceived​

This event is dispatched when the liveness verification result is received. You can listen for this event to check whether the liveness verification passed or failed.

When triggered:​

  • When the liveness verification is completed, either with a pass or fail result.

Details:​

  • The event’s detail object includes a message field that indicates whether the result is Liveness Passed or Liveness Failed.
  • The result data includes information such as the client_reference and additional proof if the verification failed.

Example​

document.addEventListener('livenessResultReceived', (event) => {
    if (event.detail.message === 'Liveness Passed') {
        console.log('Liveness verification passed. Accepted Proof: ' + event.detail.proof);
    } else {
        console.log('Liveness verification failed. Decline Proof: ' + event.detail.proof);
    }
});

Example: How to Use the SDK​

Here’s an example of an HTML page that uses the SDK for face detection. This code integrates the SDK's face detection modal, initializes the face detection process, and handles the interaction between the page and the SDK:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0" />
        <title>Facia Liveness</title>
        <script src="https://demo.facia.ai/facia-liveness-sdk.js"></script>
    </head>
    <body>
        <script>
            const clientSecret = 'your-client-secret'; // Replace with your actual client secret
            const token = 'your-access-token'; // Replace with your actual access token

            let getFaciaLivenessSDKMethod = FaciaLivenessSDK; // SDK Global variable to access the SDK Methods

            // Trigger liveness verification with the clientSecret and token
            getFaciaLivenessSDKMethod.initializeFaceDetection(clientSecret, null);
            // OR
            // Trigger liveness verification with the token and token
            getFaciaLivenessSDKMethod.initializeFaceDetection(null, token);

            // Listen for errors
            document.addEventListener('imageLogError', (event) => {
                console.error('Error:', event.detail.message);
            });

            // Listen for liveness processing
            document.addEventListener('livenessProcessing', () => {
                console.log('Liveness verification in progress...');
            });

            // Listen for the liveness result
            document.addEventListener('livenessResultReceived', (event) => {
                if (event.detail.message === 'Liveness Passed') {
                    console.log('Liveness verification passed. Accepted Proof: ' + event.detail.proof || 'unknown');
                } else {
                    console.log('Liveness verification failed. Decline Proof: ' + event.detail.proof || 'unknown');
                }
            });
        </script>
    </body>
</html>