Video Recorder Studio

A production-ready, backend-agnostic video recording and transcoding library that enables websites to capture webcam video and automatically convert it to HLS format using AWS services.

Features

• Universal Recording: Works across all modern browsers and devices
• AWS-Powered: Leverages S3, MediaConvert, and CloudFront for scalable processing
• Backend Agnostic: Integrates with any server technology
• Mobile Optimized: Responsive design with mobile-specific optimizations
• Production Ready: Built-in error handling, retry logic, and monitoring
• Customizable: Flexible configuration and styling options
• Progress Tracking: Real-time upload and processing progress
• Secure: Presigned URLs and proper authentication handling

Quick Start

1. Install the Package

npm install @onamfc/video-transcoder

2. Basic Usage

import { VideoRecorder } from '@onamfc/video-transcoder';

const recorder = new VideoRecorder({
  apiEndpoint: 'https://your-api.com/api/video',
  maxDuration: 300,
  videoQuality: 'medium'
});

// Initialize camera
await recorder.initialize();

// Start recording
await recorder.startRecording();

// Stop and upload
const recording = await recorder.stopRecording();
const upload = await recorder.uploadRecording(recording.blob);

// Track progress
recorder.onComplete((result) => {
  console.log('HLS URL:', result.hlsUrl);
  console.log('MP4 URL:', result.mp4Url);
});

3. React Hook

import { useVideoRecorder } from '@onamfc/video-transcoder/react';

function VideoRecorderComponent() {
  const {
    initialize,
    startRecording,
    stopRecording,
    isRecording,
    duration,
    status
  } = useVideoRecorder({
    config: {
      apiEndpoint: 'https://your-api.com/api/video',
      maxDuration: 300
    },
    onComplete: (result) => {
      console.log('Video processed:', result.hlsUrl);
    }
  });

  return (
    <div>
      <button onClick={initialize}>Initialize Camera</button>
      <button onClick={startRecording} disabled={!isInitialized || isRecording}>
        Start Recording
      </button>
      <button onClick={stopRecording} disabled={!isRecording}>
        Stop Recording
      </button>
      <p>Status: {status}</p>
      <p>Duration: {duration}s</p>
    </div>
  );
}

API Reference

VideoRecorder Class

Constructor

new VideoRecorder(config: RecorderConfig)

Methods

• initialize(): Promise<void> - Initialize camera access
• startRecording(): Promise<void> - Start video recording
• stopRecording(): Promise<RecordingResult> - Stop recording and get result
• pauseRecording(): void - Pause current recording
• resumeRecording(): void - Resume paused recording
• uploadRecording(blob: Blob, metadata?: object): Promise<UploadResult> - Upload recorded video
• getUploadStatus(trackingId: string): Promise<StatusResult> - Check upload status
• cleanup(): void - Clean up resources

Event Handlers

• onProgress(callback: (progress: ProgressEvent) => void): void
• onComplete(callback: (result: ProcessingResult) => void): void
• onError(callback: (error: ErrorEvent) => void): void

Configuration

interface RecorderConfig {
  // Required
  apiEndpoint: 'https://your-api.com/api/video',
  
  // Recording Settings
  maxDuration: 300, // 5 minutes
  videoQuality: 'medium', // 'low' | 'medium' | 'high' | 'auto'
  audioEnabled: true,
  
  // Upload Settings
  chunkSize: 5 * 1024 * 1024, // 5MB chunks
  maxRetries: 3,
  parallelUploads: 3,
  
  // Output Options
  outputFormats: ['hls', 'mp4'],
  thumbnailCount: 3,
  
  // UI Options
  showPreview: true,
  customStyles: { /* CSS styles */ }
}

Backend Integration

Your backend needs to implement these endpoints:

• POST /api/video/upload-token - Generate presigned upload URLs
• GET /api/video/status/:trackingId - Get processing status
• GET /api/video/recordings - List recordings (optional)

See the GitHub repository for complete backend examples and AWS infrastructure setup.

Browser Support

| Browser | Version | Support Level | |---------|---------|---------------| | Chrome | 47+ | ✅ Full | | Firefox | 29+ | ✅ Full | | Safari | 14+ | ✅ Full | | Edge | 79+ | ✅ Full | | Mobile Safari | 14+ | ✅ Full | | Chrome Mobile | 47+ | ✅ Full |

TypeScript Support

This package includes TypeScript definitions out of the box.

Examples

Check the GitHub repository for complete examples:

• Vanilla JavaScript
• React with hooks
• Vue.js composition API
• Angular components
• Backend integrations (Express, Django, Laravel, Serverless)

Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests to our GitHub repository.

License

MIT License - see LICENSE file for details.

Support

• GitHub Issues: Report bugs and feature requests
• Documentation: Complete documentation

Note: This package requires a backend implementation to handle video uploads and processing. See the GitHub repository for complete setup instructions including AWS infrastructure deployment.

Run tests

npm test

Build module

npm run build

Run examples

npm run dev:examples

## License

MIT License - see [LICENSE](./LICENSE) file for details.

## Support

- **Documentation**: View the Docs directory
- **Issues**: [GitHub Issues](https://github.com/onamfc/video-transcoder/issues)
- **Discussions**: [GitHub Discussions](https://github.com/onamfc/video-transcoder/discussions)

## Acknowledgments

- AWS MediaConvert team for excellent transcoding capabilities
- WebRTC community for browser API standards
- Open source contributors and early adopters
---