This project is a WebRTC demo built with React (frontend) and Node/Express + Socket.IO (backend).
It allows two users to connect over video/audio using peer-to-peer WebRTC connections.
- 🔗 Automatic matchmaking (pairs 2 users together).
- 🎤 Mute/unmute microphone.
- 📷 Toggle camera on/off.
- 👋 Leave room with proper cleanup.
- 🌐 Uses Google STUN server for NAT traversal.
-
Clone the repo and enter the folder
-
Install dependencies
cd frontend npm install
cd backend npm install
- Compile TypeScript
cd frontend tsc cd backend tsc
-
Run the backend cd backend node dist/index.js
-
Run the frontend
BEFORE RUNNING THE FRONTEND FOLLOW THE PORT FORWARDING STEPS TO SET IT UP
cd frontend npm run dev
🔑 VS Code Remote / Port Forwarding Setup
Since WebRTC uses your camera/mic, you cannot test both peers on localhost. Instead, use VS Code’s port forwarding:
Forward port 3000 (backend) → set to public visibility.
Forward port 5173 (frontend) → set to public visibility.
Now you’ll have two public URLs:
Example:
Backend → https://3000-yourid.devtunnel.something.ms/
Frontend → https://5173-yourid.devtunnel.something.ms
⚙️ Configuration (Important!)
Open Room.tsx in the frontend.
Set the backend URL to the public 3000 URL:
const URL = "https://3000-yourid.devtunnel.something.ms/";
Save the file.
Run tsc again in the frontend. and now run npm run dev in frontend file
🧪 How to Use
Open the 5173 public URL in one browser/device.
Share that 5173 URL with another person.
Both will connect → backend (via 3000 public URL) pairs them → WebRTC starts.
Use Mute/Unmute, Camera On/Off, or Leave Room buttons to control the session.
🧩 Notes
Works only 1-to-1 (no group calls).
Requires TURN servers for strict NAT/firewall scenarios (not included).
Must always re-run tsc after changes before starting servers.
also might not work sometimes, but might work. i mean it worked for me. ALSO if you see both peers are waiting to connect. both shall disconnect and then try to reconnect one at a time.