A full-featured real-time video conferencing application built from scratch — replicating core Zoom functionality using WebRTC for peer-to-peer video/audio and Socket.io for live signaling.
Live Demo: zoom-clone-six-mu.vercel.app
Add a screenshot of the video conference UI here
- 📹 Real-time video & audio — peer-to-peer connections via WebRTC
- 🔴 Live room management — create and join rooms with unique room IDs
- 🔁 WebSocket signaling — low-latency connection negotiation with Socket.io
- 🔇 Mute / camera toggle — control your own audio and video mid-call
- 👥 Multi-participant support — multiple users in a single room
- 📱 Responsive UI — works on desktop and mobile browsers
| Layer | Technology |
|---|---|
| Frontend | Next.js · React |
| Real-time video | WebRTC (RTCPeerConnection) |
| Signaling | Socket.io · WebSockets |
| Styling | Tailwind CSS |
| Deployment | Vercel (frontend) |
- Node.js 18+
git clone https://github.com/sam3690/zoom-clone.git
cd zoom-clone
npm installnpm run devOpen http://localhost:3000 in your browser.
⚠️ WebRTC requires HTTPS for camera/microphone access in production. Locally,localhostis treated as secure by browsers.
User A (Browser) User B (Browser)
│ │
│──── join room ────▶ Socket.io ◀──── join room ────│
│ Signaling │
│◀─── SDP offer/answer + ICE candidates ─────────────▶│
│ │
└──────── WebRTC P2P Connection ─────┘
(video / audio stream)
The Socket.io server handles only signaling (connection negotiation). Once connected, all media flows directly peer-to-peer via WebRTC — the server carries no video data.
zoom-clone/
├── app/
│ ├── page.tsx # Landing page — create/join room
│ ├── room/[id]/ # Video conference room
│ └── layout.tsx
├── components/
│ ├── VideoGrid.tsx # Renders participant video streams
│ ├── Controls.tsx # Mute, camera, leave buttons
│ └── RoomEntry.tsx # Room ID input & join flow
├── lib/
│ ├── socket.ts # Socket.io client setup
│ └── webrtc.ts # RTCPeerConnection helpers
├── server/
│ └── index.ts # Socket.io signaling server
├── public/
└── README.md
- WebRTC signaling flow — SDP offer/answer exchange and ICE candidate trickle via Socket.io
- RTCPeerConnection — managing multiple peer connections for multi-participant rooms
- MediaStream API — capturing and displaying local and remote audio/video tracks
- Room lifecycle — handling join, leave, and reconnection events gracefully
- Screen sharing
- Chat panel
- Recording
- TURN server for NAT traversal in restrictive networks
Usama Ayoub — Backend Developer
LinkedIn · Portfolio · usamabinayoub@gmail.com
MIT License