How chandrapratap01/vidloom works
VidBridge is a browser-to-browser video communication app: a user creates a room or joins one by ID, then the two room views negotiate a WebRTC connection through a WebSocket signaling server. Media and data are intended to flow directly between peers, with STUN and optional TURN supporting connectivity. The frontend also provides shared layout and a header animation. The README documents traversal capabilities not visible in the sampled room code; the graph distinguishes those from directly evidenced calls.
Main entry points: App.tsx App routes · index.ts WebSocket server · SenderRoom.tsx Sender room · ReceiverRoom.tsx Receiver room
Components 14
Frontend experience
- React bootstrap
Frontend/src/main.tsx - App routes
Frontend/src/App.tsx - Room selection
Frontend/src/Pages/Landing.tsx - Header UI
Frontend/src/Component/Header.tsx - Background UI
Frontend/src/Component/Background.tsx
Peer calling
- Sender room
Frontend/src/Pages/SenderRoom.tsx - Receiver room
Frontend/src/Pages/ReceiverRoom.tsx - WebRTC peers
Room signaling
- WebSocket server
Backend/src/index.ts - Room membership
Backend/src/index.ts
Network traversal
- STUN service
- TURN relay
Other components
- Room user
- Giphy API
Connections 21
- Room user → React bootstrap: opens app
README.md - React bootstrap → App routes: renders
Frontend/src/main.tsx - App routes → Background UI: wraps routes
Frontend/src/App.tsx - App routes → Header UI: renders
Frontend/src/App.tsx - App routes → Room selection: routes to
Frontend/src/App.tsx - App routes → Sender room: routes to
Frontend/src/App.tsx - App routes → Receiver room: routes to
Frontend/src/App.tsx - Room user → Room selection: chooses room
Frontend/src/Pages/Landing.tsx - Room selection → Sender room: navigates to
Frontend/src/Pages/Landing.tsx - Room selection → Receiver room: navigates to
Frontend/src/Pages/Landing.tsx - Sender room → WebSocket server: sends signaling
Frontend/src/Pages/SenderRoom.tsx - Receiver room → WebSocket server: sends signaling
Frontend/src/Pages/ReceiverRoom.tsx - WebSocket server → Room membership: tracks members
Backend/src/index.ts - WebSocket server → Sender room: relays negotiation
Backend/src/index.ts - WebSocket server → Receiver room: relays negotiation
Backend/src/index.ts - Sender room → WebRTC peers: negotiates offer
Frontend/src/Pages/SenderRoom.tsx - Receiver room → WebRTC peers: answers offer
Frontend/src/Pages/ReceiverRoom.tsx - WebRTC peers → WebRTC peers: exchanges media/data
README.md - WebRTC peers → STUN service: discovers public IP
README.md - WebRTC peers → TURN relay: relays if needed
README.md - Header UI → Giphy API: fetches animation
Frontend/src/Component/Header.tsx