Skip to main content

Integrating Liveness Detection

The tm-videoface-plus library enables facial challenge-based liveness detection. This guide provides a simple implementation for integrating the library with plain JavaScript.

1. Installation​

Install the library using NPM:

npm install tm-videoface-plus

2. JavaScript Integration​

Basic Implementation​

Below is an example of how to set up and use the library:

import { VideoFace, StatusCodes, Envs, ChallengeMoves, ChallengeType } from 'tm-videoface-plus';

async function initLivenessDetection() {
  // Configuration for challenges
  const config = [
    { type: ChallengeType.CH_SMILE, enabled: true },
    { type: ChallengeType.CH_BLINK, enabled: true },
    {
      type: ChallengeType.CH_HEAD_POSE,
      enabled: true,
      moves: [ChallengeMoves.MV_HEAD_TURN_LEFT, ChallengeMoves.MV_HEAD_TURN_RIGHT],
    },
  ];

  // Initialize VideoFace with API Key, environment, and challenges
  const vf = new VideoFace('YOUR_KEY', Envs.PRE3, config);

  // Open user camera
  const stream = await vf.openCamera();
  document.getElementById('video-container').srcObject = stream; // Display camera stream

  // Start the liveness detection process
  const id = await vf.startStream();
  console.log('Process ID:', id);

  // Listen for move events
  vf.events(StatusCodes.MOVE).subscribe((event) => {
    console.log('Move event:', event);
  });

  // Listen for result events
  vf.events(StatusCodes.RESULT).subscribe((result) => {
    console.log('Liveness detection result:', result);
    vf.close(); // Close the process
  });

  // Handle errors if needed
  vf.events(StatusCodes.ERROR).subscribe((error) => {
    console.error('Error occurred:', error);
  });
}

// Initialize the process when the page loads
window.onload = () => {
  initLivenessDetection();
};

3. HTML Structure​

Make sure your HTML file includes a video element to display the camera stream:

<!DOCTYPE html>
<html>
<head>
    <title>Liveness Detection</title>
</head>
<body>
    <video id="video-container" autoplay playsinline></video>
    <script type="module" src="index.js"></script>
</body>
</html>

Additional Resources​

For additional setup guides, explore:

Soportesoporte.onboarding@finwave.es