Video Streamer Frontend

Modern Next.js frontend for the high-throughput CDN & Video Streaming Platform. Built with TypeScript, Tailwind CSS, and HLS.js for adaptive video streaming.

Features

• Video Upload: Drag-and-drop interface with presigned URL uploads
• Adaptive Streaming: HLS.js video player with quality selection (1080p, 720p, 480p)
• Real-time Status: Live monitoring of video processing status
• Modern UI: Beautiful dark theme with gradient accents
• Responsive Design: Works seamlessly on desktop, tablet, and mobile

Tech Stack

• Next.js 15: React framework with App Router
• TypeScript: Type-safe development
• Tailwind CSS: Utility-first CSS framework
• HLS.js: Adaptive bitrate streaming
• Axios: HTTP client for API calls

Prerequisites

• Node.js 18+ or 20+
• npm or yarn
• Running CDN backend (from ../cdn)

Quick Start

Development

# Install dependencies
npm install

# Start development server
npm run dev

The frontend will be available at http://localhost:3000

Production Build

# Build the application
npm run build

# Start production server
npm start

Docker Deployment

Standalone

# Build Docker image
docker build -t video-streamer-frontend .

# Run container
docker run -p 3000:3000 \
  -e NEXT_PUBLIC_CDN_API_URL=http://localhost \
  video-streamer-frontend

With Docker Compose

# Start frontend with CDN backend network
docker-compose up -d

# View logs
docker-compose logs -f

# Stop services
docker-compose down

Project Structure

video-streamer/
├── app/                      # Next.js App Router
│   ├── layout.tsx           # Root layout with navigation
│   ├── page.tsx             # Dashboard page with video library
│   ├── globals.css          # Global styles and Tailwind
│   └── upload/
│       └── page.tsx         # Video upload page
├── components/
│   ├── VideoPlayer.tsx      # HLS.js video player component
│   └── VideoUploader.tsx    # Upload component with progress
├── lib/
│   └── api.ts               # CDN API client
├── types/
│   └── index.ts             # TypeScript type definitions
├── public/                   # Static assets
├── Dockerfile               # Production Docker image
├── docker-compose.yml       # Docker Compose configuration
├── next.config.ts           # Next.js configuration
├── tailwind.config.ts       # Tailwind CSS configuration
└── tsconfig.json            # TypeScript configuration

Configuration

Environment Variables

Create a .env.local file:

# CDN Backend URL
NEXT_PUBLIC_CDN_API_URL=http://localhost

# For production, use your actual domain
# NEXT_PUBLIC_CDN_API_URL=https://cdn.yourdomain.com

API Endpoints

The frontend connects to the following CDN backend endpoints:

• POST /api/upload/initiate - Get presigned upload URL
• POST /api/upload/{videoId}/complete - Mark upload complete
• GET /api/upload/{videoId}/status - Get video status
• GET /api/videos - List all videos (optional)
• GET /videos/processed/{videoId}/master.m3u8 - HLS video stream

Usage

Uploading a Video

1. Navigate to the Upload page
2. Drag and drop a video file or click to select
3. Supported formats: MP4, MOV, AVI, MKV
4. Maximum size: 5GB
5. Click "Start Upload" and wait for completion
6. Video will be automatically queued for processing

Playing Videos

1. Go to the Dashboard
2. Videos with "READY" status can be played
3. Click "Play Video" on any ready video
4. Use the quality selector to choose resolution
5. Supports adaptive bitrate switching

Monitoring Processing

• Videos in "PROCESSING" state show progress bar
• Dashboard auto-refreshes every 5 seconds
• Processing typically takes 2-10 minutes depending on video length

Development

Running Locally

# Install dependencies
npm install

# Start development server (with hot reload)
npm run dev

# Run linter
npm run lint

# Build for production
npm run build

Connecting to Backend

Ensure the CDN backend is running:

cd ../cdn
./scripts/start.sh

The backend should be accessible at http://localhost with HAProxy routing.

Deployment

Production Checklist

1. Update NEXT_PUBLIC_CDN_API_URL to production domain
2. Build optimized production bundle
3. Set up reverse proxy (Nginx, Caddy, etc.)
4. Enable HTTPS/TLS
5. Configure CORS on backend if needed
6. Set up CDN for static assets (optional)

Nginx Reverse Proxy Example

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Docker Production

# Build production image
docker build -t video-streamer-frontend:latest .

# Run with environment variables
docker run -d \
  --name video-streamer-frontend \
  -p 3000:3000 \
  -e NEXT_PUBLIC_CDN_API_URL=https://cdn.yourdomain.com \
  --network cdn_cdn-network \
  video-streamer-frontend:latest

Features Breakdown

VideoUploader Component

• Drag-and-drop file selection
• File validation (type and size)
• Progress tracking during upload
• Three-step upload process:
  1. Get presigned URL from backend
  2. Upload directly to MinIO
  3. Trigger processing

VideoPlayer Component

• HLS.js adaptive streaming
• Quality level selection
• Auto quality switching
• Native HLS support for Safari
• Error handling and recovery

Dashboard

• Video library grid view
• Status badges (PENDING, PROCESSING, READY, FAILED)
• Processing progress bars
• Auto-refresh every 5 seconds
• Inline video player

Browser Support

• Chrome/Edge: Full support via HLS.js
• Firefox: Full support via HLS.js
• Safari: Native HLS support
• Mobile browsers: Full support

Performance

• Server-side rendering for fast initial load
• Optimized production builds with Next.js
• Lazy loading for video player
• Efficient HLS.js buffering
• Minimal bundle size with tree shaking

Troubleshooting

Upload Fails

Issue: Upload returns 404 or network error

Solution:

• Verify CDN backend is running: docker-compose ps in ../cdn
• Check backend URL in .env.local
• Verify MinIO is accessible

Video Won't Play

Issue: Player shows network error

Solution:

• Ensure video status is "READY" (not PROCESSING or PENDING)
• Check browser console for HLS errors
• Verify Nginx CDN edge is running
• Test direct M3U8 URL: http://localhost/videos/processed/{videoId}/master.m3u8

Processing Stuck

Issue: Video stays in PROCESSING state

Solution:

• Check processing worker logs: docker-compose logs -f worker-1 in ../cdn
• Verify Redis queue: docker-compose exec redis redis-cli XLEN processing-jobs
• Check if FFmpeg is working in worker container

API Integration

Example: Initiate Upload

import { cdnApi } from '@/lib/api';

const { videoId, uploadUrl } = await cdnApi.initiateUpload(
  'myvideo.mp4',
  104857600 // file size in bytes
);

Example: Upload File

await cdnApi.uploadFile(file, uploadUrl, (progress) => {
  console.log(`Upload progress: ${progress.percentage}%`);
});

Example: Complete Upload

await cdnApi.completeUpload(videoId);

Contributing

This is a reference implementation for the video streaming CDN platform. Feel free to customize and extend!

License

MIT License

Related

• Backend CDN Platform: ../cdn
• CDN Documentation: ../cdn/README.md

---

Built with Next.js 15 and modern web technologies