Zentro

zentro.mp4

🚀 About

Zentro is a peer-to-peer video conferencing platform designed for seamless, low-latency 1-to-1 calls. It leverages WebRTC (via PeerJS) for direct media streaming and Socket.IO for real-time signaling. The UI is built with React and styled using Tailwind CSS for a clean, modern look.

🛠️ Tech Stack

✨ Features

• 🔗 Room-based video calls: Join or create rooms with unique IDs
• 🎥 Peer-to-peer video & audio: Direct, low-latency connections
• 🔊 Mute/unmute & video toggle: Control your stream in real time
• 👤 Dynamic player layout: Highlight speakers, responsive grid
• 📱 Mobile-friendly UI: Fully responsive design
• ⚡ Fast, modern UI: Built with Tailwind CSS
• 🔒 (Planned) Authentication
• 💬 (Planned) In-room chat
• 🧭 (Planned) "Take a Tour" onboarding

🧩 How It Works

• Signaling: Socket.IO is used to exchange signaling data (room join, user connect/disconnect, stream toggles).
• Media: PeerJS establishes direct WebRTC connections for video/audio streams between users.
• UI: React manages state for users, streams, and controls. Tailwind CSS provides utility-first styling.

📂 Project Structure

• pages/ — Next.js pages (routing, API endpoints)
• components/ — UI components (Player, Bottom controls, UI primitives)
• hooks/ — Custom React hooks (media, peer, player state)
• context/ — Socket context provider
• styles/ — Tailwind and global styles

🧠 Algorithm & Architecture

• Peer Discovery:
  • On joining a room, each client generates a unique PeerJS ID and notifies the server via Socket.IO.
  • The server broadcasts new user events to all room members.
• WebRTC Connection:
  • Each client establishes direct WebRTC connections with new peers using PeerJS, exchanging streams.
• State Management:
  • React hooks manage local and remote streams, player states, and UI controls.
• UI Responsiveness:
  • Tailwind utility classes ensure a responsive, accessible layout for all devices.

---