Skip to main content

Facia Non-Interactive SDK

This guide explains how to use the Liveness Verification SDK, focusing on the available functions, its parameters, and how to handle the various events triggered by the SDK during the verification process. The SDK works by verifying the liveness of a base64-encoded image.

Summary

To use the SDK:

  1. Call the performLiveness function, providing either your clientSecret or token, along with imageBase64.
  2. Add event listeners for imageLogError, livenessProcessing, and livenessResultReceived to handle different stages of the process.
  3. The SDK will trigger these events automatically, providing you with feedback about the success or failure of the liveness verification.

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-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.performLiveness(clientSecret, imageBase64, token);

Make sure to replace either clientSecret or token with your authentication credentials, and provide your base64-encoded image data for imageBase64.

Function

performLiveness(clientSecret, imageBase64, token)

This function initiates the liveness verification process. It accepts parameters that allow you to configure the necessary API endpoints and authentication.

Parameters

clientSecret (string):

  • Your API client secret used for authentication. This is mandatory if token is not provided.

token (string):

  • Your authentication token. This is mandatory if clientSecret is not provided.

imageBase64 (string):

  • The base64-encoded string of the image that need to be verified for liveness. This is the core input for the verification process.

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 parameters.
  • 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 how to integrate the SDK into the project. In this example, the SDK will perform liveness verification on a base64-encoded image and provide the result using custom events.

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

let videoStream;
let videoElement = null;
let canvasElement = null;
let isProcessing = false; // Prevent multiple API calls
let getFaciaLivenessSDKMethod = FaciaLivenessSDK; // SDK Global variable to access the SDK Methods

// Initialize the camera and start streaming
async function startCamera() {
if (videoStream) {
alert('Camera is already running!');
return;
}
videoElement = document.createElement('video');
videoElement.setAttribute('autoplay', '');
videoElement.setAttribute('playsinline', ''); // For iOS Safari
videoElement.style.display = 'block';
document.body.appendChild(videoElement);

try {
videoStream = await navigator.mediaDevices.getUserMedia({ video: true });
videoElement.srcObject = videoStream;
} catch (error) {
alert('Error accessing the camera: ' + error.message);
}
}

// Capture image, trigger liveness verification, and stop the camera
async function captureImageAndVerifyLiveness() {
if (isProcessing) {
alert('Liveness verification is already in progress. Please wait.');
return;
}
if (!videoStream) {
alert('Camera is not running. Please start the camera first.');
return;
}

isProcessing = true;

// Create a canvas to draw the video frame
canvasElement = document.createElement('canvas');
canvasElement.width = videoElement.videoWidth;
canvasElement.height = videoElement.videoHeight;
const context = canvasElement.getContext('2d');
context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);

// Convert the canvas image to base64
const imageBase64 = canvasElement.toDataURL('image/jpeg');

// Show verification status
const resultDiv = document.getElementById('result');
resultDiv.innerText = 'Processing...';

try {
// Trigger liveness verification with the captured base64 image
await getFaciaLivenessSDKMethod.performLiveness(clientSecret, imageBase64, null);
// OR
await getFaciaLivenessSDKMethod.performLiveness(null, imageBase64, token);
} catch (error) {
resultDiv.innerText = 'Error: ' + error.message;
} finally {
stopCamera();
isProcessing = false;
}
}

// Stop the camera stream
function stopCamera() {
if (videoStream) {
const tracks = videoStream.getTracks();
tracks.forEach((track) => track.stop());
videoStream = null;
}
if (videoElement) {
videoElement.remove();
videoElement = null;
}
}

// Listen for liveness result
document.addEventListener('livenessResultReceived', (event) => {
const resultDiv = document.getElementById('result');
if (event.detail.message === 'Liveness Passed') {
resultDiv.innerText = 'Liveness verification passed!';
} else {
resultDiv.innerText = 'Liveness verification failed.';
}
});

// Attach startCamera function to button click
window.onload = () => {
document.getElementById('start-camera-btn').addEventListener('click', startCamera);
document.getElementById('capture-image-btn').addEventListener('click', captureImageAndVerifyLiveness);
};
</script>
</head>
<body>
<h1>Liveness Verification SDK</h1>
<button id="start-camera-btn">Open Camera</button>
<button id="capture-image-btn">Capture Image and Verify Liveness</button>
<div
id="result"
style="margin-top: 20px; font-weight: bold;"></div>
</body>
</html>