🎥 Overlay Management Backend

This project is an HLS video player featuring dynamic text and logo overlays that can be added, edited, moved, resized, or deleted in real-time. Ideal for livestream branding, captions, or announcements, it’s built with Flask and MongoDB Atlas, providing full CRUD support for managing overlays seamlessly during playback.

---

🚀 Tech Stack

• Frontend: React.js, HLS.js, React-RND (draggable/resizable overlays)
• Backend: Python Flask + MongoDB Atlas
• Styling: CSS (custom + responsive)

---

📂 Project structure

 ┣ 📂 backend        # Flask + MongoDB API
 ┃ ┣ app.py
 ┃ ┣ requirements.txt
 ┣ 📂 frontend       # React HLS Player + Overlay Form
 ┃ ┣ src/
 ┃ ┣ package.json
 ┣ README.md         # Setup + Docs

---

🚀 Setup Backend

1️⃣ Clone the Repository

git clone https://github.com/your-username/Livestream-RTSP-URL.git
cd backend

2️⃣ Create Virtual Environment

python -m venv venv
source venv/bin/activate   # for Mac/Linux
venv\Scripts\activate      # for Windows

3️⃣ Install Dependencies

pip install -r requirements.txt

4️⃣ Configure MongoDB Connection(Add MongoDB Atlas)

client = MongoClient("mongodb+srv://<username>:<password>@cluster-url")

5️⃣ Run the Server

python app.py

Server will run on:

👉 http://127.0.0.1:5000/

---

🚀 Setup Frontend(React)

cd frontend
npm install
npm start

📌 API Documentation

🎯 Base URL

http://127.0.0.1:5000

1️⃣ Create Overlay

POST

 /overlay 

Add a new overlay (text and/or logo). Request Body (JSON)

{
  "name": "welcome",
  "text": "Hello World!",
  "logo": "https://example.com/logo.png](https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg",
  "top": "50px",
  "left": "100px",
  "size": "24px"
}

Response

{ "message": "Overlay saved successfully" }

2️⃣ Get All Overlays

GET

 /overlay 

Response

[
  {
    "name": "welcome",
    "text": "Hello World!",
    "logo": "https://example.com/logo.png",
    "top": "50px",
    "left": "100px",
    "size": "24px"
  }
]

3️⃣ Update Overlay

PUT

/overlay/<name>

Update overlay text, logo, or position.

Request Body (JSON)

{
  "text": "Updated Text",
  "top": "80px",
  "left": "120px",
  "size": "30px"
}

Response

{ "message": "Overlay updated successfully" }

4️⃣ Delete Overlay

DELETE

/overlay/<name>

Response

{ "message": "Overlay deleted successfully" }

Work Demo

Database Overlay Entry