Vanilla JavaScript Integration

Overview

This guide demonstrates how to integrate the FAD SDK into your web application using vanilla JavaScript without any build tools or bundlers. This approach is ideal for simple HTML pages or when you prefer to avoid npm-based workflows.

This integration method uses ES6 modules. Your HTML file must specify type="module" in the script tag.

Prerequisites

Before you begin, ensure you have:

Browser: Modern browser with ES6 module support
SDK Files: The fad-sdk.min.js file from the FAD SDK distribution
Server: A local or remote server (required for ES6 modules - file:// protocol won’t work)

ES6 modules require a server environment. You cannot simply open the HTML file directly. Use a local development server like Live Server, http-server, or Python’s SimpleHTTPServer.

Installation

Download the SDK

Obtain the fad-sdk.min.js file and place it in your project directory:

your-project/
├── web-sdk/
│   └── fad-sdk.min.js
├── index.html
└── app.js

Keep SDK files in a dedicated directory like web-sdk/ or lib/ for better organization.

Create your HTML file

Create an HTML file with the script tag marked as type="module":

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>FAD SDK - Liveness Demo</title>
</head>
<body>
  <h1>Liveness-3D Example</h1>
  
  <div id="container-result" style="display: none;">
    <div>
      <p><strong>Face Image:</strong></p>
      <img id="image-id" width="300px" alt="Face scan" />
    </div>
    <div>
      <p><strong>Low Quality Image:</strong></p>
      <img id="image-face" width="100px" alt="Low quality face" />
    </div>
  </div>

  <!-- IMPORTANT: type="module" is required -->
  <script src="app.js" type="module"></script>
</body>
</html>

The type="module" attribute is mandatory for the script tag when using vanilla JS integration.

Import and use the SDK

Create your JavaScript file and import the SDK:

app.js

import FadSDK from './web-sdk/fad-sdk.min.js';

// Your SDK initialization code here

Basic Implementation

Here’s a complete example implementing the Liveness-3D module:

JavaScript File

app.js

import FadSDK from './web-sdk/fad-sdk.min.js';
import { CREDENTIALS, CONFIGURATION, TOKEN } from './constants.js';

async function initProcess() {
  const options = {
    environment: FadSDK.getFadEnvironments().UATHA,
  };

  const FAD_SDK = new FadSDK(TOKEN, options);
  
  try {
    const moduleResponse = await FAD_SDK.startFacetec(
      CREDENTIALS, 
      CONFIGURATION
    );

    // Process completed
    console.log('Process completed');
    console.log(moduleResponse);

    // Extract response data
    const img = moduleResponse.data.auditTrail[0];
    const imgLowQuality = moduleResponse.data.lowQualityAuditTrail[0];
    const faceScan = moduleResponse.data.faceScan;

    // Display results in the UI
    const containerResult = document.getElementById('container-result');
    const imageId = document.getElementById('image-id');
    const imageFace = document.getElementById('image-face');

    containerResult.style.display = 'flex';
    imageId.src = 'data:image/png;base64, ' + img;
    imageFace.src = 'data:image/png;base64, ' + imgLowQuality;
    
  } catch (ex) {
    // Handle errors
    console.error('Process error:', ex);
    
    if (ex.code === FadSDK.Errors.Facetec.Session.CAMERA_NOT_RUNNING) {
      alert('Camera not supported, try another device');
    } else if (ex.code === FadSDK.Errors.Facetec.Session.INITIALIZATION_NOT_COMPLETED) {
      alert('Initialization failed. Please refresh and try again.');
    } else if (ex.code === FadSDK.Errors.Facetec.Status.TIMEOUT) {
      alert('Process timed out. Please try again.');
    } else {
      alert(JSON.stringify(ex));
    }
    
  } finally {
    FAD_SDK.end();
  }
}

// Initialize when DOM is ready
initProcess();

Constants File

constants.js

// Store your configuration in a separate file
export const TOKEN = 'your-authentication-token';

export const CREDENTIALS = {
  // Your module credentials
};

export const CONFIGURATION = {
  // Your module configuration
};

Document Capture Example

Capture identification documents with OCR extraction:

capture-document.js

import FadSDK from './web-sdk/fad-sdk.min.js';
import { TOKEN, CREDENTIALS, CONFIGURATION } from './constants.js';

async function captureDocument() {
  const options = {
    environment: FadSDK.getFadEnvironments().UATHA
  };

  const FAD_SDK = new FadSDK(TOKEN, options);
  
  try {
    const idData = true;  // Enable OCR
    const idPhoto = true; // Extract face from ID

    const regulaResponse = await FAD_SDK.startRegula(
      CREDENTIALS,
      FadSDK.Constants.Regula.CaptureType.CAMERA_SNAPSHOT,
      idData,
      idPhoto,
      CONFIGURATION
    );

    // Check if user closed the module
    if (regulaResponse.event === FadSDK.Constants.EventModule.MODULE_CLOSED) {
      alert('Module closed by the user');
      return;
    }

    console.log('Document captured:', regulaResponse);

    // Display the captured images
    const containerResult = document.getElementById('container-result');
    const imageIdFront = document.getElementById('image-id-front');
    const imageIdBack = document.getElementById('image-id-back');
    const imageFace = document.getElementById('image-face');
    const ocr = document.getElementById('ocr');

    containerResult.style.display = 'flex';
    imageIdFront.src = regulaResponse.data.id.front;

    if (regulaResponse.data.id?.back) {
      imageIdBack.src = regulaResponse.data.id.back;
    } else {
      imageIdBack.style.display = 'none';
    }
    
    imageFace.src = regulaResponse.data.idPhoto;
    ocr.innerHTML = JSON.stringify(regulaResponse.data.idData.ocr, null, 2);
    
  } catch (ex) {
    console.error('Capture error:', ex);
    
    if (ex.code === FadSDK.Errors.Regula.CAMERA_PERMISSION_DENIED) {
      alert('Camera permission denied. Please enable camera access.');
    } else if (ex.code === FadSDK.Errors.Regula.ID_PHOTO_NOT_FOUND) {
      alert('ID photo not found. Please retry.');
    } else if (ex.code === FadSDK.Errors.Regula.OCR_NOT_FOUND) {
      alert('OCR not found. Please retry with better lighting.');
    } else {
      alert(JSON.stringify(ex));
    }
    
  } finally {
    FAD_SDK.end();
  }
}

// Start capture on button click
document.getElementById('capture-btn')?.addEventListener('click', captureDocument);

HTML for Document Capture

capture.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>FAD SDK - Document Capture</title>
  <style>
    #container-result {
      display: none;
      gap: 20px;
      flex-wrap: wrap;
    }
    #container-result > div {
      flex: 1;
      min-width: 250px;
    }
    img {
      max-width: 100%;
      height: auto;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h1>Document Capture Example</h1>
  <button id="capture-btn">Start Capture</button>
  
  <div id="container-result">
    <div>
      <p><strong>ID Front:</strong></p>
      <img id="image-id-front" alt="ID Front" />
    </div>
    <div>
      <p><strong>ID Back:</strong></p>
      <img id="image-id-back" alt="ID Back" />
    </div>
    <div>
      <p><strong>Face from ID:</strong></p>
      <img id="image-face" alt="Face" />
    </div>
    <div>
      <p><strong>OCR Data:</strong></p>
      <pre id="ocr"></pre>
    </div>
  </div>

  <script src="capture-document.js" type="module"></script>
</body>
</html>

Signature Capture Example

signature.js

import FadSDK from './web-sdk/fad-sdk.min.js';
import { CONFIGURATION, TOKEN } from './constants.js';

async function captureSignature() {
  const options = {
    environment: FadSDK.getFadEnvironments().UATHA
  };

  const FAD_SDK = new FadSDK(TOKEN, options);
  
  try {
    const signatureResponse = await FAD_SDK.startSignature(CONFIGURATION);

    if (signatureResponse.event === FadSDK.Constants.EventModule.MODULE_CLOSED) {
      alert('Module closed by the user');
      return;
    }

    console.log('Signature captured:', signatureResponse);

    // Create object URLs for video blobs
    const faceVideoUrl = URL.createObjectURL(signatureResponse.data.videoFace);
    const signatureVideoUrl = URL.createObjectURL(signatureResponse.data.videoSignature);

    // Update UI elements
    const containerResult = document.getElementById('container-result');
    const faceVideo = document.getElementById('face-video');
    const signatureVideo = document.getElementById('signature-video');
    const signatureImage = document.getElementById('signature-img');
    const downloadFaceVideo = document.getElementById('download-face-video');
    const downloadSignatureVideo = document.getElementById('download-signature-video');

    containerResult.style.display = 'flex';
    faceVideo.src = faceVideoUrl;
    signatureVideo.src = signatureVideoUrl;
    downloadFaceVideo.href = faceVideoUrl;
    downloadSignatureVideo.href = signatureVideoUrl;
    signatureImage.src = signatureResponse.data.imageSignature;
    
  } catch (ex) {
    console.error('Signature error:', ex);
    
    if (ex.code === FadSDK.Errors.Signature.NOT_ACCEPT_CAMERA_PERMISSION) {
      alert('Camera not supported, try another device');
    } else {
      alert(JSON.stringify(ex));
    }
    
  } finally {
    FAD_SDK.end();
  }
}

document.getElementById('signature-btn')?.addEventListener('click', captureSignature);

Local Development Server

To test your vanilla JS integration, you need a local server. Here are several options:

# Install the Live Server extension in VS Code
# Right-click on your HTML file and select "Open with Live Server"

For VS Code users, the “Live Server” extension provides automatic reload on file changes, making development faster.

Common Patterns

Button-Triggered Initialization

import FadSDK from './web-sdk/fad-sdk.min.js';

const startButton = document.getElementById('start-btn');

startButton.addEventListener('click', async () => {
  const FAD_SDK = new FadSDK(TOKEN, options);
  
  try {
    startButton.disabled = true;
    startButton.textContent = 'Processing...';
    
    const response = await FAD_SDK.startFacetec(CREDENTIALS, CONFIGURATION);
    // Handle response
    
  } catch (ex) {
    console.error(ex);
  } finally {
    FAD_SDK.end();
    startButton.disabled = false;
    startButton.textContent = 'Start Process';
  }
});

Multiple Modules in One Page

import FadSDK from './web-sdk/fad-sdk.min.js';

let currentSDKInstance = null;

async function startModule(moduleType) {
  // Clean up any existing instance
  if (currentSDKInstance) {
    currentSDKInstance.end();
  }
  
  currentSDKInstance = new FadSDK(TOKEN, options);
  
  try {
    switch (moduleType) {
      case 'liveness':
        return await currentSDKInstance.startFacetec(CREDENTIALS, CONFIG);
      case 'document':
        return await currentSDKInstance.startRegula(CREDENTIALS, TYPE, true, true, CONFIG);
      case 'signature':
        return await currentSDKInstance.startSignature(CONFIG);
    }
  } finally {
    currentSDKInstance = null;
  }
}

document.getElementById('btn-liveness').addEventListener('click', () => startModule('liveness'));
document.getElementById('btn-document').addEventListener('click', () => startModule('document'));
document.getElementById('btn-signature').addEventListener('click', () => startModule('signature'));

File Structure Best Practices

your-project/
├── web-sdk/
│   └── fad-sdk.min.js          # SDK library
├── js/
│   ├── constants.js             # Configuration constants
│   ├── liveness.js              # Liveness module logic
│   ├── document.js              # Document capture logic
│   └── signature.js             # Signature module logic
├── css/
│   └── styles.css               # Your styles
├── index.html                   # Main page
└── README.md

Never commit sensitive credentials to version control. Use environment-specific configuration files or server-side token generation.

Next Steps

NPM Integration

Integrate with build tools and bundlers

Best Practices

Learn SDK best practices

Troubleshooting

Solve common integration issues

API Reference

Explore all SDK methods

Getting Started

Core Concepts

Modules

Integration Guides

Vanilla JavaScript Integration

Overview

Prerequisites

Installation

Basic Implementation

JavaScript File

Constants File

Document Capture Example

HTML for Document Capture

Signature Capture Example

Local Development Server

Common Patterns

Button-Triggered Initialization

Multiple Modules in One Page

File Structure Best Practices

Next Steps

NPM Integration

Best Practices

Troubleshooting

API Reference

Build docs developers (and LLMs) love

Getting Started

Core Concepts

Modules

Integration Guides

​Overview

​Prerequisites

​Installation

​Basic Implementation

​JavaScript File

​Constants File

​Document Capture Example

​HTML for Document Capture

​Signature Capture Example

​Local Development Server

​Common Patterns

​Button-Triggered Initialization

​Multiple Modules in One Page

​File Structure Best Practices

​Next Steps

NPM Integration

Best Practices

Troubleshooting

API Reference

Build docs developers (and LLMs) love

Overview

Prerequisites

Installation

Basic Implementation

JavaScript File

Constants File

Document Capture Example

HTML for Document Capture

Signature Capture Example

Local Development Server

Common Patterns

Button-Triggered Initialization

Multiple Modules in One Page

File Structure Best Practices

Next Steps