Video Streaming Platform

A full-stack video streaming application built with React, Go, and Docker. Features adaptive video streaming with HTTP Range request support, a responsive video player with advanced controls, and a complete video management system.

Features

Backend (Go)

• HTTP Range Request Streaming: Efficient video streaming with support for seeking and adaptive buffering
• Video Management: Upload, list, and serve video files with metadata
• CORS Support: Enabled for cross-origin requests from frontend applications
• Multiple Streaming Protocols:
  • Standard HTTP streaming with Range request support
  • HLS (HTTP Live Streaming) endpoints
  • WebRTC placeholder for real-time streaming
• File Validation: Video file type validation and sanitization
• Admin Dashboard: Server-side admin interface for video management

Frontend (React + TypeScript)

• Custom Video Player: Feature-rich player with:
  • Play/pause controls
  • Timeline seeking with buffered progress indicator
  • Volume control and mute functionality
  • Fullscreen mode support
  • Picture-in-Picture support
  • Real-time playback progress tracking
• Video Catalog: Browse and manage available videos
• State Management: Custom hooks (useVideos) for efficient video data management
• Responsive Design: Mobile-friendly interface with sidebar and player layout
• Error Handling: User-friendly error messages for failed operations

DevOps

• Docker Containerization: Separate containers for frontend and backend
• Docker Compose: Orchestrated multi-service development environment
• Volume Mounting: Hot-reload support for development

Tech Stack

Backend

• Go 1.20+
• Standard library HTTP server
• RESTful API design

Frontend

• React 18.2+
• TypeScript
• CSS3 for styling
• React Hooks for state management

Infrastructure

• Docker & Docker Compose
• Nginx/HTTP server configuration

Project Structure

ExampleStreamingReactWeb/
├── backend/
│   ├── main.go                 # Main server entry point
│   ├── go.mod                  # Go module configuration
│   ├── Dockerfile.dev          # Development Docker image
│   ├── handlers/
│   │   ├── stream.go          # Video streaming with Range requests
│   │   └── uploads.go         # Video upload handling
│   ├── admin/
│   │   ├── admin.go           # Admin handler
│   │   ├── pages/
│   │   │   └── dashboard.html # Admin dashboard UI
│   │   └── styles/
│   │       └── dashboard.css  # Admin dashboard styles
│   └── uploads/               # Uploaded video storage
├── frontend/
│   ├── package.json           # Node.js dependencies
│   ├── tsconfig.json          # TypeScript configuration
│   ├── Dockerfile.dev         # Development image
│   ├── Dockerfile.prod        # Production image
│   ├── public/
│   │   └── index.html         # HTML template
│   └── src/
│       ├── App.tsx            # Root component
│       ├── index.tsx          # Application entry point
│       ├── components/
│       │   ├── Header.tsx     # Header component
│       │   ├── VideoPlayer.tsx      # Video player with controls
│       │   ├── VideoItem.tsx        # Video list item
│       │   ├── VideoSidebar.tsx     # Video catalog sidebar
│       │   └── VideoPlayerSection.tsx
│       ├── hooks/
│       │   └── useVideos.ts   # Video data management hook
│       ├── services/
│       │   └── api.ts         # API client service
│       ├── types/
│       │   └── index.ts       # TypeScript type definitions
│       ├── utils/
│       │   └── formatters.ts  # Utility functions
│       └── styles/
│           └── App.css        # Global styles
└── docker-compose.yml         # Docker Compose configuration

Getting Started

Prerequisites

• Docker & Docker Compose
• Node.js 16+ (for local frontend development)
• Go 1.20+ (for local backend development)

Quick Start with Docker

1. Clone the repository

   git clone <repository-url>
   cd ExampleStreamingReactWeb

2. Start services with Docker Compose

   docker-compose up

3. Access the application

   • Frontend: http://localhost:3000
   • Backend API: http://localhost:8080
   • Admin Dashboard: http://localhost:8080/admin

Local Development

Backend Setup

1. Navigate to backend directory

   cd backend

2. Install dependencies

   go mod download

3. Run the server

   go run main.go

The backend server will start on http://localhost:8080

Frontend Setup

1. Navigate to frontend directory

   cd frontend

2. Install dependencies

   npm install

3. Start development server

   npm start

The frontend will start on http://localhost:3000

4. Build for production

   npm run build

API Endpoints

Video Management

• GET /api/videos - List all uploaded videos
• POST /api/upload - Upload a new video file
• GET /uploads/:filename - Serve uploaded files directly

Streaming

• GET /stream?video=<filename> - Stream video with Range request support
• GET /hls?video=<filename> - HLS streaming endpoint
• GET /webrtc - WebRTC streaming endpoint

Admin

• GET /admin - Admin dashboard
• GET /api/admin - Admin API endpoint

Usage Examples

Upload a Video

curl -X POST http://localhost:8080/api/upload \
  -F "video=@path/to/video.mp4"

Stream a Video

# Browser
http://localhost:3000

# Direct streaming
http://localhost:8080/stream?video=<filename>

Fetch Video List

curl http://localhost:8080/api/videos

Features in Detail

HTTP Range Request Streaming

The backend implements HTTP 206 Partial Content responses, enabling:

• Seeking within videos: Jump to any point in the video
• Adaptive buffering: Load only the needed portions
• Network efficiency: Resume interrupted downloads
• Browser compatibility: Works with standard HTML5 video element

Video Player Controls

• Play/Pause: Toggle playback
• Seek: Click on timeline to jump to position
• Volume: Adjust volume level with slider
• Mute: Toggle audio on/off
• Fullscreen: Expand to full screen
• Picture-in-Picture: Continue watching in small window
• Progress Tracking: Visual indicator of playback progress and buffered content

State Management

The useVideos hook provides:

• Centralized video data management
• Loading and error states
• Video selection logic
• Refresh functionality

Development Workflow

1. Frontend Changes: Edit React components in frontend/src, changes auto-reload
2. Backend Changes: Edit Go files in backend, restart container to apply changes
3. Database/Storage: Video files stored in backend/uploads directory
4. Testing: Use curl or Postman for API testing

Future Enhancements

• HLS/DASH support with FFmpeg integration
• WebRTC real-time streaming
• Video transcoding
• User authentication
• Video search and filtering
• Analytics and view tracking
• Video thumbnail generation
• Comment system
• Playlist support

Troubleshooting

Videos not uploading?

• Ensure backend/uploads directory is writable
• Check file size limits (currently 100 MB max)
• Verify file format is supported

Streaming issues?

• Check network connectivity
• Ensure Range request headers are supported
• Try a different video format

CORS errors?

• Backend has CORS enabled by default
• Verify frontend and backend URLs match API configuration

Environment Variables

Frontend (.env)

REACT_APP_API_URL=http://localhost:8080

Backend

ENV=development

License

Specify your license here.

Contributing

Contributions are welcome! Please follow these steps:

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

Contact

For questions or support, please open an issue on the repository.