Videoagreement Module

Overview

The Videoagreement module allows users to record video statements confirming their agreement to terms and conditions. The module displays a legend (text) that users must read aloud while being recorded, ensuring verifiable consent with face detection.

Key Features

Text-to-Speech Confirmation: Users read displayed text on camera
Real-time Face Detection: Ensures user presence during recording
Adjustable Text Speed: Control legend scrolling speed
Customizable Timer: Configure minimum and maximum recording duration
Preview Mode: Review video before confirmation
Video Export: Get video as Blob for storage or streaming
Customizable UI: Full customization of colors, fonts, and legends

Hardware Requirements

Modern web browser with camera and microphone access
Device camera (webcam or mobile camera)
Device microphone for audio recording
Stable internet connection
HTTPS protocol (required for camera/microphone access)

Installation

npm install @fad-producto/fad-sdk

Implementation

Import SDK and Define Legend Text

Import the FAD SDK and prepare the text users will read:

import FadSDK from '@fad-producto/fad-sdk';

const TOKEN = 'YOUR_FAD_TOKEN';

// Text that will be displayed and read by user
const LEGEND = 'I, [Full Name], with date of birth [DOB], ' +
  'identification number [ID], declare that I am [Status], ' +
  'with monthly income of [Amount], and acknowledge that ' +
  'the information I have provided is true and accurate.';

Configure Module Options

Set up the configuration with timer and UI settings:

const CONFIGURATION = {
  allowClose: true,
  views: {
    instructions: true,
    preview: true,
  },
  selfie: {
    captureSelfie: false,
    imageType: 'image/png',
    imageQuality: 1,
  },
  timer: {
    recording: { min: 5, max: 40 },  // Duration in seconds
    faceUndetected: 5,                // Timeout if face not detected
  },
  legend: {
    speed: FadSDK.Constants.Videoagreement.LegendSpeedMode.SLOW
  },
};

Customize UI

Customize the legends and styling:

const CONFIGURATION = {
  // ... previous config
  customization: {
    fadCustomization: {
      colors: {
        primary: '#A70635',
        succesful: '#5A9A92',
      },
    },
    moduleCustomization: {
      legends: {
        buttonRecord: 'Start Recording',
        buttonFinish: 'Finish',
        acceptancetInstruction: 'Record the following text clearly and loudly',
        recording: 'Recording',
        focusface: 'Position your face in the guide',
      },
      legendsInstructions: {
        title: 'Video Agreement',
        subtitle: 'Confirm your agreement by voice',
        buttonNext: 'Continue',
      },
      legendsPreview: {
        title: 'Video Agreement',
        buttonRetry: 'Record again',
        buttonNext: 'Confirm recording',
      },
    },
  },
};

Initialize SDK and Start Recording

Create the SDK instance and start the video agreement process:

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

  const FAD_SDK = new FadSDK(TOKEN, options);
  
  try {
    const videoagreementResponse = await FAD_SDK.startVideoagreement(
      LEGEND,
      CONFIGURATION
    );

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

    console.log('Process completed', videoagreementResponse);

    // Access video data
    const video = videoagreementResponse.data.video;  // Blob

    // Create URL for display or upload
    const videoUrl = URL.createObjectURL(video);
    displayVideo(videoUrl);

  } catch (ex) {
    console.error('Process error:', ex);
    handleError(ex);
  } finally {
    FAD_SDK.end();
  }
}

Response Structure

{
  event: string,  // 'PROCESS_COMPLETED' or 'MODULE_CLOSED'
  data: {
    video: Blob,  // Video recording of user reading the agreement
  }
}

The video Blob can be uploaded to your server or converted to a URL for display using URL.createObjectURL().

Error Handling

Handle errors using the SDK error constants:

if (ex.code === FadSDK.Errors.Videoagreement.NOT_ACCEPT_CAMERA_PERMISSION) {
  alert('Camera permission required. Please enable camera access.');
}

Configuration Options

Legend Speed

Control how fast the text scrolls on screen:

legend: {
  speed: FadSDK.Constants.Videoagreement.LegendSpeedMode.SLOW
  // Options: SLOW, NORMAL, FAST
}

Choose speed based on text length and expected reading pace of your users.

Timer Settings

Configure recording duration:

timer: {
  recording: {
    min: 5,   // Minimum recording duration (seconds)
    max: 40   // Maximum recording duration (seconds)
  },
  faceUndetected: 5  // Timeout if face not detected (seconds)
}

Selfie Capture

Optionally capture a selfie at the end:

selfie: {
  captureSelfie: true,    // Enable selfie capture
  imageType: 'image/png', // Output format
  imageQuality: 1         // Quality: 0.0 to 1.0
}

View Configuration

views: {
  instructions: true,  // Show instruction screen
  preview: true        // Show preview for confirmation
},
allowClose: true      // Allow users to close the module

Usage Examples

Basic Implementation
Upload to Server
Dynamic Legend

import FadSDK from '@fad-producto/fad-sdk';

async function recordAgreement() {
  const FAD_SDK = new FadSDK(TOKEN, {
    environment: FadSDK.getFadEnvironments().UATHA,
  });

  const agreementText = 'I agree to the terms and conditions...';

  try {
    const response = await FAD_SDK.startVideoagreement(
      agreementText,
      CONFIGURATION
    );

    if (response.event === FadSDK.Constants.EventModule.MODULE_CLOSED) {
      return null;
    }

    return response.data.video;
  } finally {
    FAD_SDK.end();
  }
}

async function handleVideoAgreement(agreementText, userId) {
  const FAD_SDK = new FadSDK(TOKEN, {
    environment: FadSDK.getFadEnvironments().UATHA,
  });

  try {
    const response = await FAD_SDK.startVideoagreement(
      agreementText,
      CONFIGURATION
    );

    if (response.event === FadSDK.Constants.EventModule.MODULE_CLOSED) {
      throw new Error('User cancelled agreement');
    }

    // Upload to server
    const formData = new FormData();
    formData.append('video', response.data.video);
    formData.append('userId', userId);
    formData.append('agreementText', agreementText);
    formData.append('timestamp', new Date().toISOString());

    const uploadResponse = await fetch('/api/agreements', {
      method: 'POST',
      body: formData,
    });

    return await uploadResponse.json();
  } finally {
    FAD_SDK.end();
  }
}

function buildAgreementText(userData) {
  return `I, ${userData.fullName}, with date of birth ${userData.dob}, ` +
    `identification number ${userData.idNumber}, declare that I am ` +
    `${userData.maritalStatus}, with monthly income of $${userData.income}, ` +
    `and acknowledge that the information I have provided is true and accurate.`;
}

async function recordPersonalizedAgreement(userData) {
  const agreementText = buildAgreementText(userData);
  
  const FAD_SDK = new FadSDK(TOKEN, {
    environment: FadSDK.getFadEnvironments().UATHA,
  });

  try {
    const response = await FAD_SDK.startVideoagreement(
      agreementText,
      CONFIGURATION
    );

    return response.data.video;
  } finally {
    FAD_SDK.end();
  }
}

Best Practices

Clear Text

Use simple, clear language that users can easily read aloud. Avoid complex legal jargon.

Appropriate Length

Keep text length reasonable (30-60 seconds to read). Match timer max to expected reading time.

Test Legend Speed

Test different speed settings with real users to find optimal reading pace.

Enable Preview

Always enable preview so users can review their recording before submitting.

Legend Speed Guide

Speed Mode	Words per Minute	Best For
`SLOW`	~100 WPM	Long texts, non-native speakers
`NORMAL`	~150 WPM	Standard agreements, average length
`FAST`	~200 WPM	Short texts, experienced users

Security and Compliance

Video agreements contain personally identifiable information (PII) and should be stored securely with proper access controls.

Store videos with encryption at rest
Implement access logging and audit trails
Follow GDPR/CCPA guidelines for consent recording
Set appropriate retention policies
Use HTTPS for all transmissions
Consider adding timestamps and digital signatures
Maintain backup copies for legal purposes

Troubleshooting

Camera/Microphone Not Working

Verify permissions are granted in browser
Ensure site is served over HTTPS
Check if devices are being used by another application
Test on different browsers (Chrome recommended)

Face Detection Issues

Improve lighting conditions
Ensure face is centered in frame
Remove glasses or face obstructions
Increase faceUndetected timeout

Text Scrolling Too Fast/Slow

Adjust legend.speed setting
Test with actual users
Consider text length when choosing speed
Adjust timer.recording.max accordingly

Recording Cuts Off

Increase timer.recording.max
Reduce text length
Adjust legend speed to slower setting
Inform users of time limit in instructions

Signature - Digital signature with video
Videotaping - Video recording with ID verification
Liveness-3D - Face liveness detection

Getting Started

Core Concepts

Modules

Integration Guides

Videoagreement Module

Overview

Key Features

Hardware Requirements

Installation

Implementation

Response Structure

Error Handling

Configuration Options

Usage Examples

Best Practices

Clear Text

Appropriate Length

Test Legend Speed

Enable Preview

Legend Speed Guide

Security and Compliance

Troubleshooting

Build docs developers (and LLMs) love

Getting Started

Core Concepts

Modules

Integration Guides

​Overview

​Key Features

​Hardware Requirements

​Installation

​Implementation

​Response Structure

​Error Handling

​Configuration Options

​Usage Examples

​Best Practices

Clear Text

Appropriate Length

Test Legend Speed

Enable Preview

​Legend Speed Guide

​Security and Compliance

​Troubleshooting

​Related Modules

Build docs developers (and LLMs) love

Overview

Key Features

Hardware Requirements

Installation

Implementation

Response Structure

Error Handling

Configuration Options

Usage Examples

Best Practices

Legend Speed Guide

Security and Compliance

Troubleshooting

Related Modules