Logo

dev-resources.site

for different kinds of informations.

Building RelaxTube: A Scalable Video Transcoding and Streaming Application

Published at
1/14/2025
Categories
mern
kafka
systemdesign
docker
Author
ravikishan
Categories
4 categories in total
mern
open
kafka
open
systemdesign
open
docker
open
Author
10 person written this
ravikishan
open
Building RelaxTube: A Scalable Video Transcoding and Streaming Application

Introduction

RelaxTube is a feature-rich and scalable application designed to demonstrate the workflow of video transcoding and streaming. The project highlights the use of modern technologies like Node.js, React, Kafka, FFmpeg, MongoDB, and Docker. It efficiently processes videos by transcoding them into multiple quality levels, segmenting them for smoother streaming, and generating thumbnail previews.

This blog explores the architecture, key features, tech stack, installation, and potential enhancements for RelaxTube.

Key Features

  1. Video Transcoding: Converts videos into multiple quality levels (360p, 480p, 720p, 1080p) using FFmpeg.
  2. HLS Segmentation: Generates video segments for efficient HTTP Live Streaming (HLS) playback.
  3. Thumbnail Generation: Automatically creates thumbnail previews for each uploaded video.
  4. Batch Processing: Supports concurrent video processing using Kafka message queues.
  5. Scalable Design: Built to handle increased loads and integrate with distributed systems.
  6. Storage and Metadata: Manages video files in local storage and metadata in MongoDB.

Project Architecture

Diagram

Components

  • Frontend (React): Provides a user-friendly interface for video uploads, management, and playback.
  • Backend (Node.js with Express): Handles API requests, video processing workflows, and communication with Kafka.
  • Kafka: Manages message queues for efficient batch processing.
  • Transcoding Service (FFmpeg): Handles video transcoding, segmentation, and thumbnail creation.
  • MongoDB: Stores metadata like video information, quality levels, and thumbnails.
  • File Storage: Stores processed video files and thumbnails locally.

Tech Stack

  • Node.js: Backend logic and API endpoints.
  • React: Frontend for user interaction.
  • Kafka: Manages distributed message queues for scalability.
  • FFmpeg: Performs video transcoding, segmentation, and thumbnail generation.
  • MongoDB: Stores metadata and provides quick access to processed data.
  • Docker: Ensures easy setup and consistent environments.
  • TailwindCSS: Enhances the frontend with modern styling.

Installation and Setup

Prerequisites

  1. Install Docker.
  2. Install Node.js (v16 or higher).
  3. Clone the repository:
   git clone https://github.com/Ravikisha/RelaxTube.git
   cd RelaxTube
Enter fullscreen mode Exit fullscreen mode

Steps

  1. Run Docker Compose
   docker-compose up -d
Enter fullscreen mode Exit fullscreen mode
  1. Install Dependencies
   cd frontend && npm install
   cd ../backend && npm install
   cd ../transcoding-service && npm install
Enter fullscreen mode Exit fullscreen mode
  1. Start Services

    • Backend:
     cd backend
     npm run dev
    
  • Frontend:

     cd frontend
     npm run dev
    
  • Transcoding Service:

     cd transcoding-service
     npm run dev
    
  1. Access the Application Open your browser and navigate to http://localhost:3000.

Usage

  1. Upload Videos: Users can upload videos through the frontend interface.
  2. Processing: The backend processes the videos by:
    • Transcoding them to multiple quality levels.
    • Segmenting videos for HLS playback.
    • Generating thumbnails.
  3. Streaming: Processed videos are available for streaming via the frontend.
  4. Batch Processing: Upload multiple videos for concurrent processing.

Screenshots

Homepage

Home Page

Video Playback

Video Playback

Quality Selection

Quality

Upload Interface

Upload

Batch Upload

Batch Upload

Scalability Features

  • Batch Processing: Process multiple videos simultaneously using Kafka.
  • Distributed Workers: Scale horizontally by adding workers for transcoding tasks.
  • Load Balancing: Distribute incoming requests across multiple backend servers.
  • Cloud Storage: Potential integration with AWS S3 or Google Cloud Storage for large-scale storage.
  • Monitoring: Use tools like Prometheus or Grafana for real-time monitoring and performance tracking.

Future Enhancements

  1. Cloud deployment for global access and scalability.
  2. Advanced analytics for tracking user interactions and video performance.
  3. User authentication and access control.
  4. Caching mechanisms for faster access to frequently requested content.

Contributing

We welcome contributions to RelaxTube! Feel free to submit pull requests, report issues, or suggest new features.

License

RelaxTube is licensed under the MIT License. See the LICENSE file for details.


Start exploring RelaxTube by visiting the GitHub Repository!

systemdesign Article's
30 articles in total
Favicon
Rate limiting : Global, Tumbling Window, and Sliding Window
Favicon
Designing the Spotify Top K
Favicon
Building RelaxTube: A Scalable Video Transcoding and Streaming Application
Favicon
Token Bucket Rate Limiter (Redis & Java)
Favicon
RabbitMQ: conceitos fundamentais
Favicon
CDNs in Distributed Systems: Beyond Caching for Better Performance
Favicon
Designing an Internet Credit Purchase System
Favicon
Context vs. State: Why Context is King in Software Systems
Favicon
Just thought about starting
Favicon
Hinted Handoff in System Design
Favicon
System Design: The Art of Balancing Trade-Offs
Favicon
Do you want to learn about System Design? I think this is a great article for you to get started with.
Favicon
Exploring the Intersection of Systems Engineering and Artificial Intelligence: Opportunities and Challenges
Favicon
From Concept to Deployment: The Lifecycle of a Systems Engineering Project
Favicon
Database less OTP- A concept
Favicon
Telemetry and Tracing: A Comprehensive Overview
Favicon
Asynchronous transaction in distributed system
Favicon
Fixed Window Counter Rate Limiter (Redis & Java)
Favicon
Kickstarting Weekly System Design Deep Dives: Building Scalable Systems
Favicon
Database Scaling NLogN 📈
Favicon
Navigating the World of Event-Driven Process Orchestration for Technical Leaders
Favicon
Load balancer vs Gateway vs reverse proxy vs forward proxy
Favicon
Kong API Gateway Setup Basic to advance usages
Favicon
Finding the Right Microsoft Platform for Your Applications
Favicon
PRESTO card Metrolinx fare system
Favicon
A Simple Guide for Choosing the Right Database
Favicon
loved reading it. Well Researched, Crisp and Informative #SystemDesign
Favicon
HTTP Caching in Distributed Systems
Favicon
HTTP Status Codes Explained
Favicon
Understanding Networking Communication Protocols

Featured ones: