A full-stack video streaming application built with React.js and Node.js that supports HLS (HTTP Live Streaming) video playback and video file uploads.
- Video upload functionality
- Automatic conversion to HLS format using FFmpeg
- Video streaming with adaptive bitrate
- Support for various video formats
- Cross-browser compatibility
- Responsive video player
- React.js
- Video.js
- @videojs/http-streaming
- Vite
- Node.js
- Express.js
- Multer for file uploads
- FFmpeg for video processing
- CORS enabled
Before running this project, make sure you have the following installed:
- Node.js (v14 or higher)
- FFmpeg
- npm or yarn
- Clone the repository:
git clone https://github.com/mahm0udnasr/Video-Streaming.git
cd Video-Streaming- Install backend dependencies:
cd server
npm install- Install frontend dependencies:
cd ../client
npm installThe server runs on port 4000 by default. Make sure the following directories exist:
server/uploads/- for temporary video storageserver/uploads/courses/- for HLS converted videos
The frontend runs on port 5173 (Vite default port). The video player is configured to stream HLS content from the backend server.
- Start the backend server:
cd server
npm run dev- Start the frontend application:
cd client
npm run dev- Access the application at
http://localhost:5173
- Upload a video file through the web interface
- The server will automatically convert the video to HLS format
- Once conversion is complete, the video will be available for streaming
- The HLS stream URL will be in the format:
http://localhost:4000/uploads/courses/{lessonId}/index.m3u8
POST /upload- Upload a video fileGET /uploads/*- Stream video files and HLS segments
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.