Skip to main content

Overview

The Videotaping module combines multiple verification elements into a single video recording session. Users can display their ID documents, read agreement text, and have their face recorded simultaneously, providing comprehensive evidence for identity verification and consent.

Key Features

  • Multi-Modal Verification: Combines ID display, face recording, and agreement reading
  • ID Detection: AI-powered detection of ID documents in video
  • Real-time Face Detection: Ensures user presence throughout recording
  • Agreement Text: Users read displayed legend text on camera
  • Start Second Marker: Returns exact timestamp when ID was detected
  • Selfie Capture: Optional selfie and ID selfie capture
  • Customizable Timer: Configure recording duration
  • Preview Mode: Review video before confirmation

Hardware Requirements

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

Installation

npm install @fad-producto/fad-sdk

Implementation

1

Import SDK and Define Parameters

Import the FAD SDK and define the legend text and ID types:
import FadSDK from '@fad-producto/fad-sdk';

const TOKEN = 'YOUR_FAD_TOKEN';

// Text that user will read aloud
const LEGEND = 'I, [Full Name], with identification number [ID], ' +
  'acknowledge that the information I have provided is true.';

// IDs that user should show to camera
const IDENTIFICATIONS = [
  { 
    name: FadSDK.Constants.Videotaping.IdsAllowed.ID_MEX_FRONT, 
    title: 'Front' 
  },
  { 
    name: FadSDK.Constants.Videotaping.IdsAllowed.ID_MEX_BACK, 
    title: 'Back' 
  },
];
2

Configure Module Options

Set up the configuration with timer and feature settings:
const CONFIGURATION = {
  allowClose: true,
  views: {
    instructions: true,
    preview: true,
  },
  idDetection: {
    captureId: true,     // Enable ID detection
    probability: 0.8,    // Detection confidence threshold (0-1)
  },
  selfie: {
    captureSelfie: false,
    imageType: 'image/png',
    imageQuality: 1,
  },
  selfieId: {
    captureSelfieId: false,  // Selfie holding ID
    imageType: 'image/png',
    imageQuality: 1,
    captureTimeout: 100,
  },
  timer: {
    recording: { min: 5, max: 60 },  // Duration in seconds
    faceUndetected: 5,
  },
  recorder: {
    recordEverything: false,  // Record entire session or just key parts
  },
};
3

Customize UI

Customize the legends and styling:
const CONFIGURATION = {
  // ... previous config
  customization: {
    moduleCustomization: {
      legends: {
        videoagreement: {
          buttonRecord: 'Start Recording',
          buttonFinish: 'Finish',
          recording: 'Recording',
          focusFace: 'Position your face in the guide',
        },
        idDetection: {
          instruction: 'Move your ID closer and further',
          instructionCustomOne: 'Move closer and further the',
          instructionCustomTwo: 'of your ID',
        },
      },
      legendsInstructions: {
        title: 'Video Recording',
        subtitle: 'Move your ID closer and further, then read the text clearly',
        buttonNext: 'Continue',
      },
      legendsPreview: {
        title: 'Video Recording',
        buttonRetry: 'Record again',
        buttonNext: 'Confirm recording',
      },
    },
  },
};
4

Initialize SDK and Start Recording

Create the SDK instance and start the videotaping process:
async function initProcess() {
  const options = {
    environment: FadSDK.getFadEnvironments().UATHA,
  };

  const FAD_SDK = new FadSDK(TOKEN, options);
  
  try {
    const videotapingResponse = await FAD_SDK.startVideotaping(
      LEGEND,
      IDENTIFICATIONS,
      CONFIGURATION
    );

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

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

    // Access captured data
    const video = videotapingResponse.data.video;  // Blob
    const startSecond = videotapingResponse.data.startSecond;  // Timestamp

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

  } 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 entire process
    startSecond: number,  // Timestamp when ID was first detected (seconds)
    selfie?: string,      // Optional selfie image (if enabled)
    selfieId?: string,    // Optional selfie with ID (if enabled)
  }
}
The startSecond value indicates when the ID was successfully detected in the video, useful for verification purposes.

Error Handling

Handle errors using the SDK error constants:
if (ex.code === FadSDK.Errors.Videotaping.NOT_ACCEPT_CAMERA_PERMISSION) {
  alert('Camera permission required. Please enable camera access.');
}

Configuration Options

Configure how IDs are detected in the video:
idDetection: {
  captureId: true,    // Enable ID detection
  probability: 0.8    // Confidence threshold (0.0 to 1.0)
}
Higher probability values (0.8-0.9) require clearer ID visibility but reduce false positives.
Specify which IDs users should show:
const IDENTIFICATIONS = [
  { 
    name: FadSDK.Constants.Videotaping.IdsAllowed.ID_MEX_FRONT,
    title: 'Front of Mexican ID'
  },
  { 
    name: FadSDK.Constants.Videotaping.IdsAllowed.ID_MEX_BACK,
    title: 'Back of Mexican ID'
  },
  // Add more ID types as needed
];
Available ID types:
  • ID_MEX_FRONT - Mexican ID front
  • ID_MEX_BACK - Mexican ID back
  • Additional types available in SDK constants
Configure optional selfie captures:
selfie: {
  captureSelfie: true,    // Capture selfie at end
  imageType: 'image/png',
  imageQuality: 1
},
selfieId: {
  captureSelfieId: true,  // Capture selfie holding ID
  imageType: 'image/png',
  imageQuality: 1,
  captureTimeout: 100     // Timeout in milliseconds
}
recorder: {
  recordEverything: false  // true: record entire session
                           // false: record only key moments
}
timer: {
  recording: {
    min: 5,   // Minimum recording duration (seconds)
    max: 60   // Maximum recording duration (seconds)
  },
  faceUndetected: 5  // Timeout if face not detected (seconds)
}

Usage Examples

async function performVideotaping(userData) {
  // Build personalized legend
  const legend = `I, ${userData.fullName}, with ID number ` +
    `${userData.idNumber}, confirm that the information provided is accurate.`;

  // Define required IDs
  const ids = [
    { name: FadSDK.Constants.Videotaping.IdsAllowed.ID_MEX_FRONT, title: 'Front' },
    { name: FadSDK.Constants.Videotaping.IdsAllowed.ID_MEX_BACK, title: 'Back' },
  ];

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

  try {
    const response = await FAD_SDK.startVideotaping(
      legend,
      ids,
      CONFIGURATION
    );

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

    // Upload to server
    await uploadVideotaping({
      video: response.data.video,
      startSecond: response.data.startSecond,
      userId: userData.id,
      timestamp: new Date().toISOString(),
    });

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

Best Practices

Clear Instructions

Explain the complete process before starting: show ID, read text, and timing expectations.

ID Visibility

Instruct users to hold ID steady and move it gradually for proper detection.

Appropriate Duration

Set max duration considering ID display time + text reading time + buffer.

Test Detection

Test ID detection with actual IDs in various lighting conditions.

Use Cases

Use for Know Your Customer (KYC) processes where you need video proof of identity and consent:
  • User displays government-issued ID
  • Reads agreement terms on camera
  • Provides video evidence for compliance
Capture comprehensive verification for loan or credit applications:
  • Verify identity with ID display
  • Record verbal acknowledgment of terms
  • Store video for audit purposes
Use for high-security account opening processes:
  • Multi-factor identity verification
  • Video proof of consent
  • Timestamps for legal compliance

Security and Compliance

Videotaping recordings contain sensitive PII including ID documents and biometric data. Implement strict security measures.
  • Encrypt videos at rest and in transit
  • Implement strict access controls
  • Follow GDPR/CCPA guidelines for biometric data
  • Maintain audit logs of video access
  • Set appropriate retention policies
  • Consider data residency requirements
  • Use HTTPS for all transmissions
  • Implement secure deletion procedures

Troubleshooting

  • Improve lighting conditions
  • Ensure ID is held steady
  • Move ID gradually closer and further
  • Lower probability threshold if needed
  • Check ID is supported type
  • Increase timer.recording.max
  • Reduce legend text length
  • Simplify ID requirements
  • Inform users of time limit upfront
  • Improve lighting
  • Ensure face is centered
  • Remove obstructions (glasses, hat)
  • Increase faceUndetected timeout
  • Check camera quality
  • Ensure stable connection
  • Test different browsers
  • Verify adequate device resources

Build docs developers (and LLMs) love