Building a KYC Video Recording and Splitting System: React + FFmpeg + MediaRecorder API

// Start video recording
const startRecording = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  const mediaRecorder = new MediaRecorder(stream);

  mediaRecorder.ondataavailable = (event) => {
    if (event.data.size > 0) {
      recordedChunks.push(event.data);
    }
  };

  mediaRecorder.start();
};

interface KYCTimeline {
  stepIndex: number;
  stepName: string;
  startTime: number;
  endTime: number;
  duration: number;
}

// vite.config.ts
export default defineConfig({
  server: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp'
    }
  }
});

import { FFmpeg } from '@ffmpeg/ffmpeg';
import { toBlobURL } from '@ffmpeg/util';

const ffmpeg = new FFmpeg();

const loadFFmpeg = async () => {
  const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.10/dist/esm';

  await ffmpeg.load({
    coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
    wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm')
  });
};

const splitVideo = async (videoBlob: Blob, timeline: KYCTimeline[]) => {
  // Write video to FFmpeg virtual file system
  await ffmpeg.writeFile('input.webm', await fetchFile(videoBlob));

  const splitVideos = [];

  for (const [index, step] of timeline.entries()) {
    const startTime = formatTime(step.startTime);
    const duration = formatTime(step.duration);
    const outputName = `step${index}_${step.stepName}.webm`;

    // Split video with FFmpeg command
    await ffmpeg.exec([
      '-i', 'input.webm',
      '-ss', startTime,
      '-t', duration,
      '-c', 'copy',
      outputName
    ]);

    // Read split video
    const data = await ffmpeg.readFile(outputName);
    const blob = new Blob([data], { type: 'video/webm' });
    splitVideos.push({ name: outputName, blob });
  }

  return splitVideos;
};

const formatTime = (milliseconds: number): string => {
  const totalSeconds = Math.floor(milliseconds / 1000);
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;
  const ms = milliseconds % 1000;

  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${ms.toString().padStart(3, '0')}`;
};

// Previous CDN approach (failed)
// <script src="https://docs.opencv.org/4.x/opencv.js"></script>

// Local hosting approach (success)
// After downloading public/opencv.js file
<script src="/opencv.js"></script>

const [isVideoUploaded, setIsVideoUploaded] = useState(false);
const uploadedBlobRef = useRef<Blob | null>(null);

const uploadVideo = async (videoBlob: Blob) => {
  // Prevent duplicate uploads
  if (isVideoUploaded && uploadedBlobRef.current === videoBlob) {
    return;
  }

  try {
    const formData = new FormData();
    formData.append('video', videoBlob, 'kyc-recording.webm');

    await fetch('/api/upload-video', {
      method: 'POST',
      body: formData
    });

    setIsVideoUploaded(true);
    uploadedBlobRef.current = videoBlob;
  } catch (error) {
    console.error('Video upload failed:', error);
  }
};

const processVideo = async (videoBlob: Blob) => {
  try {
    // Video processing logic
    const splitVideos = await splitVideo(videoBlob, timeline);

    // Upload split videos
    const uploadResults = await Promise.allSettled(
      splitVideos.map(video => uploadSplitVideo(video))
    );

    // Count success/failure
    const successful = uploadResults.filter(result => result.status === 'fulfilled').length;
    const failed = uploadResults.filter(result => result.status === 'rejected').length;

    if (failed > 0) {
      console.error(`Video upload failed: ${failed}, successful: ${successful}`);
    }
  } finally {
    // Memory cleanup
    await cleanupFFmpegFiles();
  }
};

const cleanupFFmpegFiles = async () => {
  try {
    const files = ['input.webm', ...timeline.map((_, i) => `step${i}_output.webm`)];
    for (const file of files) {
      try {
        await ffmpeg.deleteFile(file);
      } catch {
        // Ignore if file doesn't exist
      }
    }
  } catch (error) {
    console.error('FFmpeg file cleanup failed:', error);
  }
};