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
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'
},
];
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
},
};
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' ,
},
},
},
};
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:
Camera Permission
Microphone Permission
ID Not Detected
Face Not Detected
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
Complete Workflow
With Selfies
Upload to Server
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 ();
}
}
const CONFIGURATION = {
// ... other config
selfie: {
captureSelfie: true ,
imageType: 'image/png' ,
imageQuality: 0.8 ,
},
selfieId: {
captureSelfieId: true ,
imageType: 'image/png' ,
imageQuality: 0.8 ,
captureTimeout: 100 ,
},
};
async function recordWithSelfies () {
const FAD_SDK = new FadSDK ( TOKEN , {
environment: FadSDK . getFadEnvironments (). UATHA ,
});
try {
const response = await FAD_SDK . startVideotaping (
LEGEND ,
IDENTIFICATIONS ,
CONFIGURATION
);
// Access all captured data
const video = response . data . video ;
const selfie = response . data . selfie ;
const selfieWithId = response . data . selfieId ;
const idDetectedAt = response . data . startSecond ;
return { video , selfie , selfieWithId , idDetectedAt };
} finally {
FAD_SDK . end ();
}
}
async function uploadVideotapingResults ( response ) {
const formData = new FormData ();
// Add video
formData . append ( 'video' , response . data . video );
formData . append ( 'startSecond' , response . data . startSecond . toString ());
// Add optional selfies
if ( response . data . selfie ) {
formData . append ( 'selfie' , response . data . selfie );
}
if ( response . data . selfieId ) {
formData . append ( 'selfieId' , response . data . selfieId );
}
// Add metadata
formData . append ( 'timestamp' , new Date (). toISOString ());
formData . append ( 'userId' , userId );
const uploadResponse = await fetch ( '/api/videotaping' , {
method: 'POST' ,
body: formData ,
});
return await uploadResponse . json ();
}
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