🎥 WebCamBroadcast Frontend

This is the frontend interface for the WebCamBroadcast_Backend, a real-time WebRTC video broadcasting platform. Built with React and Vite, it provides a simple UI for broadcasters and viewers to connect via unique stream IDs.

---

⚙️ Features

• 🎙️ Start a live WebRTC broadcast
• 👀 View broadcasts by entering a stream ID
• 💻 Minimal and responsive UI built with React
• ⚡ Powered by Vite for fast development

---

🧰 Tech Stack

• React
• Vite
• WebRTC API
• Axios for API calls
• Tailwind CSS (optional if used)

---

🚀 Getting Started

📦 Installation

1. Clone the repository

   git clone https://github.com/dharshan-kumarj/WebCamBroadcast_Frontend.git
   cd WebCamBroadcast_Frontend
   

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open http://localhost:5173 in your browser.

---

🔗 Backend Setup

Make sure the backend server is also running:

👉 WebCamBroadcast_Backend

The frontend expects the backend API to be available at http://localhost:8000 by default.

---

🧪 Usage

• Go to /broadcast to start a live broadcast.
• The app will fetch a unique stream ID from the backend.
• Share the stream ID with viewers.
• Viewers can go to /view/<stream_id> to join the broadcast.

---

📁 Project Structure

src/
├── pages/
│   ├── Broadcast.jsx
│   └── Viewer.jsx
├── components/
├── App.jsx
├── main.jsx

---

🌐 Environment Configuration

If needed, you can configure the backend API base URL by setting an environment variable:

Create a .env file:

VITE_API_BASE_URL=http://localhost:8000

Then in your code:

const BASE_URL = import.meta.env.VITE_API_BASE_URL;

---

💡 To-Do / Future Enhancements

• Add authentication for broadcasters
• Add stream list/history
• Improve error handling and validations
• Mobile responsiveness improvements

---

🧑‍💻 Author

Made by Dharshan Kumar J

---