🎬 Netflix-Style Video Streaming Platform

A video streaming platform inspired by modern OTT services like Netflix and YouTube. This project demonstrates how adaptive video streaming works under the hood using HLS (HTTP Live Streaming), FFmpeg, Node.js, Express.js, TypeScript, Next.js, MongoDB, and Prisma.

Instead of serving a single video file, uploaded videos are automatically processed into multiple resolutions, segmented into chunks, and streamed dynamically using HLS playlists.

---

🚀 Features

Video Upload Pipeline

• Upload videos through REST APIs
• Multer-based file handling
• Unique video identification using timestamp-based IDs
• Background video processing

Adaptive Bitrate Streaming

• Automatic generation of:

  • 1080p
  • 720p
  • 480p
  • 360p

• Creates:

  • Master Playlist (master.m3u8)
  • Variant Playlists (playlist.m3u8)
  • Video Segments (.ts)

HLS Streaming

• HTTP Live Streaming (HLS)
• Chunk-based video delivery
• Dynamic quality switching based on network conditions
• Browser playback using HLS.js

Video Processing Status Tracking

• MongoDB + Prisma integration
• Tracks video lifecycle:

PENDING
   ↓
COMPLETED

• Prevents users from accessing videos before processing is complete

Frontend Streaming Experience

• Dynamic streaming routes
• Video playback through HLS.js
• Netflix-style video access using unique video IDs

---

🏗️ System Architecture

                    ┌──────────────────┐
                    │      User        │
                    └────────┬─────────┘
                             │
                             ▼
                    ┌──────────────────┐
                    │    Next.js UI    │
                    └────────┬─────────┘
                             │
                             ▼
                    ┌──────────────────┐
                    │ Express Backend  │
                    └────────┬─────────┘
                             │
              ┌──────────────┼──────────────┐
              │                             │
              ▼                             ▼
      ┌────────────────┐        ┌────────────────────┐
      │ MongoDB Atlas  │        │ FFmpeg Processing  │
      │ Prisma ORM     │        │ Pipeline           │
      └────────────────┘        └─────────┬──────────┘
                                           │
                                           ▼
                        ┌────────────────────────────┐
                        │ Multi-Resolution Outputs   │
                        │                            │
                        │ master.m3u8               │
                        │ 1080p/playlist.m3u8       │
                        │ 720p/playlist.m3u8        │
                        │ 480p/playlist.m3u8        │
                        │ 360p/playlist.m3u8        │
                        └──────────┬─────────────────┘
                                   │
                                   ▼
                           ┌──────────────┐
                           │   HLS.js     │
                           │ Video Player │
                           └──────────────┘

---

📂 Project Structure

Backend

backend
│
├── src
│   ├── controllers
│   │     └── video.controller.ts
│   │
│   ├── routes
│   │     └── video.routes.ts
│   │
│   ├── service
│   │     └── video.service.ts
│   │
│   ├── repository
│   │     └── movie.repository.ts
│   │
│   ├── middlewares
│   │     └── multer.middleware.ts
│   │
│   └── index.ts
│
├── uploads
├── output
└── prisma

Frontend

frontend
│
├── app
│   ├── upload
│   ├── stream
│   │     └── [videoId]
│   │
│   └── page.tsx
│
├── components
│
└── lib

---

🔄 Complete Request Flow

1. Upload Video

User uploads a video:

Frontend
    |
    ▼
POST /api/v1/video/upload

The backend receives the file through Multer and stores it temporarily.

---

2. Generate Unique Video ID

A unique identifier is generated:

const videoId = Date.now();

Example:

1780591338544

Output folder:

output/1780591338544

---

3. Create Database Record

A movie entry is created in MongoDB.

Movie
 ├── movieId
 ├── processingStatus
 ├── createdAt
 └── updatedAt

Initial status:

PENDING

---

4. Start FFmpeg Processing

The uploaded video is processed into multiple resolutions:

1080p
720p
480p
360p

Each resolution generates:

playlist.m3u8
segment001.ts
segment002.ts
segment003.ts
...

---

5. Generate Master Playlist

A master playlist is created:

master.m3u8

Example:

#EXTM3U

1080p/playlist.m3u8
720p/playlist.m3u8
480p/playlist.m3u8
360p/playlist.m3u8

The player uses this file to select the appropriate quality.

---

6. Update Processing Status

After processing completes:

PENDING
    ↓
COMPLETED

The status is updated inside MongoDB using Prisma.

---

7. Stream Video

Frontend route:

/stream/:videoId

Example:

/stream/1780591338544

Frontend checks processing status.

If Status = PENDING

Still Processing Video...

If Status = COMPLETED

Initialize HLS.js
Load master.m3u8
Start Streaming

---

🎥 HLS Output Structure

output/
└── 1780591338544
    │
    ├── master.m3u8
    │
    ├── 1080p
    │   ├── playlist.m3u8
    │   ├── segment001.ts
    │   ├── segment002.ts
    │   └── ...
    │
    ├── 720p
    │   ├── playlist.m3u8
    │   └── ...
    │
    ├── 480p
    │   ├── playlist.m3u8
    │   └── ...
    │
    └── 360p
        ├── playlist.m3u8
        └── ...

---

🛠️ Tech Stack

Frontend

• Next.js
• React
• TypeScript
• Tailwind CSS
• HLS.js

Backend

• Node.js
• Express.js
• TypeScript
• Multer
• FFmpeg

Database

• MongoDB Atlas
• Prisma ORM

---

🎯 Key Engineering Concepts Demonstrated

• Adaptive Bitrate Streaming
• HTTP Live Streaming (HLS)
• Video Segmentation
• FFmpeg Transcoding
• Background Video Processing
• Repository Pattern
• REST API Design
• Dynamic Routing
• Media Processing Pipelines
• Playlist Generation
• Video Status Tracking
• Multi-Resolution Content Delivery

---

⚙️ Local Setup

Clone Repository

git clone <repository-url>

---

Backend Setup

cd backend

npm install

Create:

.env

Add:

DATABASE_URL=<your-mongodb-atlas-url>

Run:

npm run dev

---

Frontend Setup

cd frontend

npm install

npm run dev

---

📈 Future Improvements

Storage Layer

• AWS S3
• Cloudinary

Background Jobs

• BullMQ
• Redis Queue

CDN Delivery

• AWS CloudFront

Media Processing

• Thumbnail Generation
• Multi-Resolution Image Processing

Authentication

• JWT Authentication
• User Profiles

Monitoring

• Upload Analytics
• Processing Dashboard
• Video Consumption Metrics

---

Code Flow

Upload Response