Seamless Video Uploader

A powerful JavaScript library for seamless video processing and uploading in browser environments. This library provides browser-based video editing capabilities, metadata extraction, and direct YouTube integration.

Features

• Browser-based Video Processing

  • Extract video segments
  • Process video frames
  • Extract video metadata
  • Support for various video formats

• Flexible Backend Communication

  • REST API support
  • WebSocket support
  • Configurable communication methods
  • Progress tracking and error handling

• YouTube Integration

  • Direct video upload to YouTube
  • OAuth2 authentication
  • Thumbnail setting
  • Upload progress tracking
  • Upload cancellation support
  • Simple API for YouTube upload (new)

• Event-Driven Architecture

  • Real-time progress updates
  • Error handling
  • State management
  • Custom event handling

Installation

npm install seamless-video-uploader

Quick Start

import { SeamlessVideoUploader } from 'seamless-video-uploader';

// Create an instance with configuration
const uploader = new SeamlessVideoUploader({
  processorOptions: {
    maxMemoryUsage: 1024 * 1024 * 1024, // 1GB
    preferredCodec: 'video/webm;codecs=vp9',
    forceCanvas: false
  },
  backendOptions: {
    type: 'rest', // or 'websocket'
    baseUrl: 'https://api.example.com',
    // Additional backend-specific options
  },
  youtubeOptions: {
    clientId: 'YOUR_YOUTUBE_CLIENT_ID',
    apiKey: 'YOUR_YOUTUBE_API_KEY',
    clientSecret: 'YOUR_YOUTUBE_CLIENT_SECRET',
    redirectUri: 'YOUR_REDIRECT_URI',
    scopes: ['https://www.googleapis.com/auth/youtube.upload']
  }
});

// Edit a video
const result = await uploader.editVideo(videoFile, {
  startTime: 0,
  endTime: 10,
  format: 'webm'
});

// Upload to backend
await uploader.uploadToBackend(result);

// Upload to YouTube (simple API)
const youtubeResult = await uploader.uploadToYoutubeSimple(
  videoFile,
  'My Video Title',
  'Description of the video',
  {
    tags: ['tag1', 'tag2'],
    category: '22',
    privacy: 'unlisted',
    thumbnail: thumbnailFile
  }
);
console.log(`Video uploaded: ${youtubeResult.videoId}`);

API Reference

SeamlessVideoUploader

Main class for video processing and uploading.

Constructor Options

interface SeamlessVideoUploaderOptions {
  processorOptions?: {
    maxMemoryUsage?: number;
    preferredCodec?: string;
    forceCanvas?: boolean;
  };
  backendOptions: {
    type: 'rest' | 'websocket';
    baseUrl: string;
    // Additional backend-specific options
  };
  youtubeOptions?: {
    clientId: string;
    apiKey: string;
    clientSecret: string;
    redirectUri: string;
    scopes: string[];
  };
}

Methods

• editVideo(file: File, options: EditOptions): Promise<EditResult>
• uploadToBackend(editResult: EditResult): Promise<void>
• uploadToYoutubeSimple(video: File, title: string, description: string, options?: { tags?: string[]; category?: string; privacy?: 'private' | 'unlisted' | 'public'; thumbnail?: File }): Promise<UploadResult>
• getBackendUploadProgress(): UploadProgress
• getYoutubeUploadProgress(): UploadProgress | undefined
• cancelBackendUpload(): void
• cancelYoutubeUpload(): void
• pauseBackendUpload(): void
• resumeBackendUpload(): void
• cleanup(): void

Events

• progress: Emitted during upload with progress percentage
• error: Emitted when an error occurs
• complete: Emitted when upload is complete
• cancel: Emitted when upload is cancelled

Backend Communication

REST API

const restOptions = {
  type: 'rest',
  baseUrl: 'https://api.example.com',
  headers: {
    'Authorization': 'Bearer token'
  }
};

WebSocket

const wsOptions = {
  type: 'websocket',
  baseUrl: 'wss://api.example.com',
  protocols: ['video-protocol']
};

YouTube Integration

Authentication & Options

const youtubeOptions = {
  clientId: 'YOUR_YOUTUBE_CLIENT_ID',
  apiKey: 'YOUR_YOUTUBE_API_KEY',
  clientSecret: 'YOUR_YOUTUBE_CLIENT_SECRET',
  redirectUri: 'YOUR_REDIRECT_URI',
  scopes: ['https://www.googleapis.com/auth/youtube.upload']
};

Simple YouTube Upload (Recommended)

const youtubeResult = await uploader.uploadToYoutubeSimple(
  videoFile,
  'My Video Title',
  'Description of the video',
  {
    tags: ['tag1', 'tag2'],
    category: '22',
    privacy: 'unlisted',
    thumbnail: thumbnailFile
  }
);
console.log(`Video uploaded: ${youtubeResult.videoId}`);

Advanced: Custom YouTube Service (Optional)

If you need full control, you can implement your own YoutubeService and inject it into YoutubePublisher.

import { YoutubePublisher, YoutubeService } from 'seamless-video-uploader';

const customService: YoutubeService = {
  async uploadVideo(video, metadata) {
    // Custom upload logic
    return { id: 'custom-id' };
  },
  async setThumbnail(videoId, thumbnail) {
    // Custom thumbnail logic
  }
};

const publisher = new YoutubePublisher(customService);

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 11+
• Edge 79+

Development

# Install dependencies
npm install

# Build
npm run build

# Development mode
npm run dev

# Run tests
npm test

# Generate documentation
npm run docs

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• MediaRecorder API
• YouTube Data API
• WebSocket API