Zentro - Video Conferencing Platform
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.
Project Demo
Tech Stack
Next.js
React
Tailwind CSS
PeerJS
Socket.IO
Lucide React
Lodash
UUID
WebRTC
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.
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.