🎥 Video Streaming Platform

Adaptive video streaming platform using FFmpeg, HLS/DASH, and CDN delivery with optional DRM support

Upload videos, auto-transcode to multiple bitrates, and stream seamlessly across devices

Features • Demo • Installation • Usage • Architecture • API

✨ Features

🎬 Video Processing

Drag & Drop Upload - Intuitive interface for video uploads
Multi-Format Support - MP4, AVI, MKV, MOV, WMV, FLV, WEBM
Auto-Transcoding - Automatic conversion to 360p, 480p, 720p, 1080p
HLS Packaging - Adaptive bitrate streaming with segmentation
Real-Time Progress - Live transcoding status via WebSocket

📺 Streaming & Playback

Adaptive Streaming - HLS protocol with bandwidth detection
Quality Selection - Manual or automatic quality switching
Cross-Device Support - Works on desktop, mobile, and tablets
Playback Statistics - Real-time buffer, bitrate, FPS monitoring
Custom Player - Built with hls.js for optimal performance

🚀 Platform Capabilities

✅ Multi-Bitrate Encoding - Optimized for different network speeds
✅ WebSocket Integration - Real-time job progress updates
✅ Job Management - Track, monitor, and manage multiple transcoding jobs
✅ RESTful API - Complete backend API for integration
✅ Responsive UI - Modern React interface with beautiful styling
🔜 DASH Support - Coming soon
🔜 DRM Integration - Optional DRM support (roadmap)
🔜 CDN Delivery - CloudFront/Cloudflare integration (roadmap)

📸 Demo

🎥 Full Demo Video

Watch the complete application walkthrough showing:

✅ Video upload with drag & drop interface
✅ Real-time transcoding progress tracking
✅ Multi-resolution video playback (360p - 1080p)
✅ Adaptive streaming with quality selection
✅ Live playback statistics dashboard

📺 Watch Full Demo Video (86 MB)

The demo video shows the entire workflow from uploading a video to watching it with adaptive streaming.

📷 Click to view screenshots

Upload Interface

Drag and drop interface with real-time upload progress

Job Management

Real-time transcoding progress and job monitoring

Video Player

Adaptive streaming player with quality selection and statistics

🛠️ Tech Stack

Backend

Express - Web framework
FFmpeg - Video transcoding
Socket.IO - Real-time communication
fluent-ffmpeg - FFmpeg wrapper
Multer - File upload handling

Frontend

React 18 - UI framework
hls.js - HLS video playback
Axios - HTTP client
Socket.IO Client - WebSocket client
CSS3 - Custom styling

Streaming Technology

HLS (HTTP Live Streaming) - Primary adaptive streaming protocol
M3U8 Playlists - Master and variant playlists
MPEG-TS Segments - 4-second video chunks
H.264 Codec - Video encoding
AAC Codec - Audio encoding

📋 Prerequisites

Before running this application, ensure you have the following installed:

Requirement	Version	Installation
Node.js	v14+	Download
npm	v6+	Comes with Node.js
FFmpeg	Latest	See instructions below ⬇️

Installing FFmpeg

Windows

Option 1: Download from gyan.dev (Recommended)

Visit https://www.gyan.dev/ffmpeg/builds/
Download ffmpeg-release-essentials.zip
Extract to C:\ffmpeg
Add C:\ffmpeg\bin to your PATH environment variable
Verify: Open new terminal and run ffmpeg -version

Option 2: Using Chocolatey

choco install ffmpeg

macOS

brew install ffmpeg

Linux

Debian/Ubuntu:

sudo apt-get update
sudo apt-get install ffmpeg

CentOS/RHEL:

sudo yum install ffmpeg

Verify Installation:

ffmpeg -version

🚀 Installation

1️⃣ Clone the Repository

git clone https://github.com/danu38/video-streaming-platform.git
cd video-streaming-platform

2️⃣ Install Backend Dependencies

cd backend
npm install

3️⃣ Install Frontend Dependencies

cd ../frontend
npm install

4️⃣ Configure FFmpeg Path (If Not in System PATH)

If FFmpeg is not in your system PATH, you need to configure it:

Copy the environment file:
```
cd ../backend
cp .env.example .env
```

Edit .env file and set your FFmpeg paths:

Windows Example:

FFMPEG_PATH=C:\ffmpeg\bin\ffmpeg.exe
FFPROBE_PATH=C:\ffmpeg\bin\ffprobe.exe

Linux/Mac Example:

FFMPEG_PATH=/usr/local/bin/ffmpeg
FFPROBE_PATH=/usr/local/bin/ffprobe

Find your FFmpeg location:
- Windows: Check where you extracted FFmpeg (look for ffmpeg.exe and ffprobe.exe)
- Linux/Mac: Run which ffmpeg and which ffprobe

💡 Tip: If FFmpeg is in your system PATH, you can skip this step or leave the .env file empty!

5️⃣ Start the Application

Terminal 1 - Backend Server:

cd backend
npm start

✅ Backend running on http://localhost:5000

Terminal 2 - Frontend Server:

cd frontend
npm start

✅ Frontend running on http://localhost:3000

Alternative: Development Mode with Auto-Reload

cd backend
npm run dev

📖 Usage Guide

1️⃣ Upload a Video

Navigate to the "Upload Video" tab
Drag and drop a video file or click "Browse Files"
Supported formats: MP4, AVI, MKV, MOV, WMV, FLV, WEBM
Maximum file size: 500MB
Click "Upload & Transcode"

2️⃣ Monitor Progress

Switch to the "Jobs" tab to see all transcoding jobs
Real-time progress updates via WebSocket
View current variant being processed (360p, 480p, 720p, 1080p)
Track FPS and encoding speed

3️⃣ Watch the Video

Once transcoding is complete, click "Play Video"
The adaptive player will open with your video
Toggle between quality levels
View real-time playback statistics

4️⃣ Playback Features

Feature	Description
Auto Quality	Automatically selects optimal quality based on bandwidth
Manual Selection	Choose specific resolution (360p-1080p)
Statistics	Real-time buffer, bitrate, resolution, dropped frames
Seek Support	Jump to any part of the video instantly
Responsive	Works on desktop, tablet, and mobile devices

📁 Project Structure

video-streaming-platform/
│
├── 📂 backend/
│   ├── 🚀 server.js                    # Express server & Socket.IO
│   ├── 📂 services/
│   │   └── ⚙️ transcoding.js          # FFmpeg transcoding engine
│   ├── 📂 uploads/                    # Original uploaded videos
│   ├── 📂 output/                     # Transcoded outputs
│   ├── 📂 hls/                        # HLS segments & playlists
│   │   └── job-xxx/
│   │       ├── master.m3u8           # Master playlist
│   │       ├── 360p/, 480p/, 720p/, 1080p/
│   │       │   ├── playlist.m3u8     # Variant playlist
│   │       │   └── segment*.ts       # Video segments
│   └── 📦 package.json
│
├── 📂 frontend/
│   ├── 📂 public/
│   │   └── index.html
│   ├── 📂 src/
│   │   ├── 🎨 App.js                  # Main application
│   │   ├── 🎨 App.css                 # Global styles
│   │   ├── 📂 components/
│   │   │   ├── 📤 VideoUpload.js      # Upload UI
│   │   │   ├── 📤 VideoUpload.css
│   │   │   ├── 🎬 VideoPlayer.js      # HLS player
│   │   │   ├── 🎬 VideoPlayer.css
│   │   │   ├── 📋 JobsList.js         # Job management
│   │   │   └── 📋 JobsList.css
│   │   └── index.js
│   └── 📦 package.json
│
├── 📄 README.md
├── 🚫 .gitignore
└── 🦇 start-backend.bat / start-frontend.bat

🔌 API Endpoints

Upload Video

POST /upload
Content-Type: multipart/form-data

Request Body: video (file) Response:

{
  "jobId": "job-1234567890",
  "filename": "video.mp4",
  "message": "Video uploaded successfully"
}

Get All Jobs

GET /jobs

Response: Array of job objects

Get Job Status

GET /job/:jobId

Response:

{
  "id": "job-1234567890",
  "originalName": "video.mp4",
  "status": "processing",
  "progress": 45,
  "currentVariant": "720p",
  "hlsUrl": "/hls/job-1234567890/master.m3u8"
}

Delete Job

DELETE /job/:jobId

Response: { message: "Job deleted successfully" }

Stream Video

GET /hls/:jobId/master.m3u8

Response: HLS master playlist (M3U8)

📡 WebSocket Events

Server → Client Events

Event	Description	Payload
`job-progress`	Real-time transcoding progress	`{ jobId, progress, currentVariant, fps, speed }`
`job-complete`	Job finished successfully	`{ jobId, hlsUrl }`
`job-failed`	Job failed with error	`{ jobId, error }`

Example:

socket.on('job-progress', (data) => {
  console.log(`Job ${data.jobId}: ${data.progress}% - Processing ${data.currentVariant}`);
});

🔧 How It Works

graph LR
    A[User Uploads Video] --> B[Server Receives File]
    B --> C[FFmpeg Transcoding]
    C --> D[360p Variant]
    C --> E[480p Variant]
    C --> F[720p Variant]
    C --> G[1080p Variant]
    D --> H[HLS Packaging]
    E --> H
    F --> H
    G --> H
    H --> I[Master Playlist]
    I --> J[Adaptive Streaming]
    J --> K[Client Player]

Transcoding Pipeline

1️⃣ Video Upload

User uploads video via drag-and-drop interface
Multer middleware handles multipart file upload
File saved to uploads/ directory
Job ID generated and returned to client

2️⃣ Transcoding Process

FFmpeg transcodes video into multiple bitrate variants:

Resolution	Video Bitrate	Audio Bitrate	Use Case
360p	800 kbps	96 kbps	Mobile (3G)
480p	1400 kbps	128 kbps	Mobile (4G)
720p	2800 kbps	128 kbps	HD Streaming
1080p	5000 kbps	192 kbps	Full HD

H.264 video codec (libx264)
AAC audio codec
4-second HLS segments
GOP size: 48 frames
Real-time progress via WebSocket

3️⃣ HLS Packaging

Each resolution → Variant playlist (playlist.m3u8)
Master playlist references all variants
TS segments created for each chunk
Bandwidth info included for adaptive switching

4️⃣ Adaptive Streaming

hls.js library loads master playlist
Detects available bandwidth
Automatically switches between qualities
Manual quality selection supported
Buffer management for smooth playback

❓ Troubleshooting

❌ FFmpeg Not Found Error

Solution:

Verify FFmpeg is installed: ffmpeg -version
Ensure FFmpeg is in your system PATH
Restart terminal after installation
On Windows, check PATH in System Environment Variables

🔌 Port Already in Use

Backend (Port 5000): Edit backend/server.js:

const PORT = 5001; // Change to available port

Frontend (Port 3000):

PORT=3001 npm start

🌐 CORS Errors

Check backend/server.js CORS configuration:

app.use(cors({
  origin: 'http://localhost:3000' // Update if frontend port changed
}));

🔗 WebSocket Connection Failed

Ensure backend is running on port 5000
Check frontend/src/App.js:

const socket = io('http://localhost:5000'); // Update if port changed

📤 Large File Upload Fails

Increase file size limit in backend/server.js:

const upload = multer({
  limits: { fileSize: 1000 * 1024 * 1024 } // 1GB
});

⚡ Performance Tips

Aspect	Recommendation	Impact
Input Format	Use H.264 MP4 files	⚡ Faster transcoding
Resolution	Lower input resolution = faster	⚡⚡ Much faster
Concurrent Jobs	Process one at a time	⚡⚡⚡ Best performance
Disk Space	3-5x original size needed	💾 Plan accordingly
CPU Usage	FFmpeg is CPU-intensive	🖥️ Expect high usage

🚀 Roadmap & Future Enhancements

Phase 1 - Streaming Enhancements

DASH Support - MPEG-DASH protocol implementation
DRM Integration - Widevine, PlayReady, FairPlay
Subtitle Support - VTT/SRT subtitle tracks
Thumbnail Generation - Video preview thumbnails

Phase 2 - Infrastructure

CDN Integration - CloudFront/Cloudflare support
Cloud Storage - AWS S3, Google Cloud Storage
Queue System - Redis-based job queue
Load Balancing - Multiple transcoding workers

Phase 3 - Features

User Authentication - JWT-based auth
Video Library - Personal video collections
Analytics Dashboard - View counts, watch time
Video Editing - Basic trim, crop, filters
Progress Persistence - Resume after restart

Phase 4 - Optimization

GPU Acceleration - NVIDIA NVENC encoding
Smart Encoding - Content-aware bitrate selection
Caching Layer - Redis caching for metadata
Database Integration - PostgreSQL/MongoDB

📄 License

This project is licensed under the MIT License - feel free to use it for learning, development, and production.

MIT License - Copyright (c) 2024

🙏 Credits & Acknowledgments

Built with amazing open-source technologies:

Technology	Purpose
FFmpeg	Video transcoding engine
React	Frontend framework
Node.js	Backend runtime
hls.js	HLS playback library
Socket.IO	Real-time communication
Express	Web framework

📞 Support & Contributing

🐛 Found a Bug?

Open an issue on GitHub with:

Description of the problem
Steps to reproduce
Expected vs actual behavior
System info (OS, Node version, FFmpeg version)

💡 Feature Requests

Open a feature request issue describing:

The feature you'd like
Why it would be useful
Possible implementation approach

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

⭐ Star this repo if you find it helpful!

Made with ❤️ for the video streaming community

Report Bug • Request Feature • Documentation

Happy Streaming! 🎥✨

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
backend		backend
frontend		frontend
.gitignore		.gitignore
README.md		README.md
start-backend.bat		start-backend.bat
start-frontend.bat		start-frontend.bat

danu38/video-streaming-platform

Folders and files

Latest commit

History

Repository files navigation