This project is a video streaming application, similar to YouTube or an e-learning platform. It implements the core principles of video streaming, such as delivering data in chunks based on internet quality. The backend API is designed specifically for handling video streaming functionalities. for backend documentation : Video Streaming Web App - API
🏠 Features:
- Upload videos.
- Watch videos streamed in
.m3u8
format, which automatically adjusts video quality based on connection speed. - Use of
.m3u8
files helps prevent data theft by avoiding video downloads. - Search and sort videos based on your interests.
- Infinite Scroll
🧑💻 Technologies Used:
ReactJS + Vite
JavaScript
HTML
CSS
Tailwing CSS
React + FlowBite
react-infinite-scroll-component
react-top-loading-bar
react-player
react-helmet-async
react-router-dom
💻 How to Use the Source Code:
- Download the
main
branch as a zip file. - Import the project into your IDE and ensure Node.js is installed.
- In the root directory, open a command prompt and run:
npm install
. - Run the Video Streaming Web Application API in parallel.
- 🔍📺📽️ Home Page
- 📸📹 Video upload Page
Response:
{
"status": 200,
"message": "Videos are founded",
"data": {
"links": [],
"content": [
{
"videoId": "06c6dc6b-d63e-40f5-95dc-310b8ba0f3cb",
"title": "Nature",
"description": "Nature demo video",
"contentType": "video/mp4",
"filePath": "videos\\video-1.mp4"
},
{
"videoId": "078705d4-fdea-42f1-ac0f-6557037adf07",
"title": "Cartoon Dyno",
"description": "Cartoon demo video",
"contentType": "video/mp4",
"filePath": "videos\\video-2.mp4"
},
{
"videoId": "0cbd6040-0e4e-47b6-9f66-86f8c9554835",
"title": "Mountain Views",
"description": "Test video here shown view of mountains",
"contentType": "video/mp4",
"filePath": "videos\\video-3.mp4"
}
],
"page": {
"size": 5,
"totalElements": 3,
"totalPages": 1,
"number": 0
}
}
}