Video Chat Application

A simple peer-to-peer video chat application built with WebRTC, WebSocket, and vanilla JavaScript. This application allows two people to connect and have real-time video and audio conversations directly through their web browsers.

!WebRTC !Node.js !License

Features

✅ Core Features (All Steps Completed)

Step 1: Signaling Server

Architecture

System Components

┌─────────────────┐         ┌─────────────────┐
│   Browser A     │         │   Browser B     │
│   (Client)      │         │   (Client)      │
└────────┬────────┘         └────────┬────────┘
         │                           │
         │    WebSocket Signaling    │
         └──────────┬────────────────┘
                    │
            ┌───────┴────────┐
            │  Node.js Server │
            │   (WebSocket)   │
            └────────────────┘
         After Connection:
┌─────────────────┐  WebRTC P2P  ┌─────────────────┐
│   Browser A     │◄──────────────►│   Browser B     │
│ (Audio/Video)   │   Direct      │ (Audio/Video)   │
└─────────────────┘   Connection  └─────────────────┘

Technology Stack

- Backend: Node.js with ws (WebSocket library)

Setup Steps

1. Clone or navigate to the directory:

   cd 76-video-chat-app
   

2. Install dependencies:

   npm install
   

3. Start the server:

   npm start
   

4. Open in browser:

   http://localhost:8080
   

5. Test with two windows: - Open the same URL in two different browser windows/tabs - Or open on two different devices on the same network

Usage

Starting a Video Call

1. Open the application in your browser 2. Enter a room ID (or leave empty for a random room) 3. Click "Join Call" and allow camera/microphone access 4. Share the room link with someone you want to chat with 5. Wait for them to join - connection establishes automatically

During a Call

Media Controls:

Sharing Room Link

Click the 📋 icon next to the room ID to copy the shareable link. Send this link to anyone you want to video chat with - they'll join the same room automatically.

Project Structure

76-video-chat-app/
├── server.js              # WebSocket signaling server
├── package.json           # Node.js dependencies
├── public/                # Client-side files
│   ├── index.html        # Main HTML page
│   ├── styles.css        # Styling and animations
│   └── app.js            # WebRTC client logic
├── docs/                  # Documentation
│   ├── implementation.md # Architecture details
│   ├── webrtc.md         # WebRTC explained
│   └── examples.md       # Usage examples
├── README.md             # This file
└── challenge.md          # Challenge requirements
How It Works
WebRTC Flow
1. Media Capture
   - User grants camera/microphone permission
   - getUserMedia() captures local media stream
   - Stream displayed in local video element
2. Signaling
   - Client connects to WebSocket server
   - Joins a room by room ID
   - Server relays messages between peers in same room
3. Connection Establishment
   - Peer A creates offer (SDP)
   - Offer sent to Peer B via signaling server
   - Peer B creates answer (SDP)
   - Answer sent back to Peer A
   - Connection established!
4. ICE Candidate Exchange
   - Both peers gather network information (ICE candidates)
   - Candidates exchanged via signaling server
   - Best network path selected automatically
5. Media Streaming
   - Once connected, media flows directly peer-to-peer
   - No server in the middle (except initial signaling)
   - Low latency, private communication
Signaling Protocol
Messages exchanged via WebSocket:
| Message Type | Direction | Purpose |
|-------------|-----------|---------|
| id | Server → Client | Assign unique ID |
| join | Client → Server | Join a room |
| joined | Server → Client | Confirmation with peer list |
| peer-joined | Server → Client | Notify about new peer |
| offer | Client → Server → Client | WebRTC offer (SDP) |
| answer | Client → Server → Client | WebRTC answer (SDP) |
| ice-candidate | Client → Server → Client | Network info |
| leave | Client → Server | Leave room |
| peer-left | Server → Client | Notify peer left |
Configuration
STUN/TURN Servers
The application uses Google's public STUN servers by default:

For production, consider adding TURN servers for better connectivity:

Video Constraints
Default video constraints in app.js:

Adjust for lower bandwidth:

Server Port
Change port in server.js:

Or set environment variable:

Deployment
Local Network
To access from other devices on your network:
1. Find your local IP address:
   

2. Start server and access from other devices:
   

Production Deployment
#### Heroku
1. Create Procfile:
   

2. Deploy:
   

3. Important: Use HTTPS in production (required for WebRTC)
#### Docker
1. Create Dockerfile:
   

2. Build and run:
   

Troubleshooting
Connection Issues
Problem: "Failed to connect to peer"
Solutions:
Check firewall settings (allow WebRTC ports)
Ensure both users are on compatible networks
Add TURN server for challenging network scenarios
Check browser console for specific errors
Camera/Microphone Not Working
Problem: "Failed to access camera or microphone"
Solutions:
1. Check permissions: Browser must have camera/microphone access
2. HTTPS required: Browsers only allow media access on HTTPS (except localhost)
3. Device availability: Ensure camera/microphone not used by another app
4. Check browser settings: Look for blocked permissions
Poor Video Quality
Problem: Laggy or low-quality video
Solutions:
Reduce video resolution in constraints
Check network bandwidth (run speed test)
Close other bandwidth-heavy applications
Use wired connection instead of WiFi
Enable hardware acceleration in browser
WebSocket Connection Failed
Problem: Cannot connect to signaling server
Solutions:
Verify server is running (npm start)
Check correct port (default 8080)
Ensure no firewall blocking WebSocket
Check browser console for specific error
Browser Compatibility
| Browser | Version | Support |
|---------|---------|---------|
| Chrome | 74+ | ✅ Full |
| Firefox | 66+ | ✅ Full |
| Safari | 12.1+ | ✅ Full |
| Edge | 79+ | ✅ Full |
| Opera | 62+ | ✅ Full |
| Mobile Chrome | 74+ | ✅ Full |
| Mobile Safari | 12.2+ | ✅ Full |
Note: Internet Explorer does not support WebRTC
Security Considerations
Media Privacy
- Encryption: WebRTC uses DTLS-SRTP for end-to-end encryption by default
No server storage: Media never passes through the signaling server
Peer-to-peer: Direct connection between users (after signaling)
Production Recommendations
1. Use HTTPS: Required for camera/microphone access
2. Implement authentication: Protect rooms with passwords
3. Rate limiting: Prevent signaling server abuse
4. Room cleanup: Automatically remove idle rooms
5. Input validation: Sanitize all user inputs
Privacy Features to Add

// Authentication if (message.password !== room.password) { return sendError('Invalid password'); }

// Expiration setTimeout(() => { if (room.size === 0) { rooms.delete(roomId); } }, 60 60 1000); // 1 hour

Performance
Metrics
- Signaling latency: < 50ms (local network)
Connection establishment: 2-5 seconds
Memory usage: ~50-100MB per peer
CPU usage: 5-15% (depends on resolution)
Bandwidth: 1-3 Mbps per stream (720p)
Optimization Tips
1. Lower resolution: Reduces bandwidth and CPU
2. Limit frame rate: 24-30 FPS sufficient for most calls
3. Audio only mode: Disable video when not needed
4. Adaptive bitrate: Adjust quality based on network
5. Hardware acceleration: Enable in browser settings
Testing
Manual Testing Checklist
Functional Tests:
[ ] Join room with custom ID
[ ] Join room with random ID
[ ] Camera and microphone permission
[ ] Local video displays correctly
[ ] Remote video displays after connection
[ ] Audio works both directions
[ ] Mute/unmute microphone
[ ] Enable/disable camera
[ ] Copy room link
[ ] Leave call properly
[ ] Reconnect after leaving
Error Scenarios:
[ ] Deny camera/microphone permission
[ ] Join with invalid room ID
[ ] Disconnect during call
[ ] Server restart during call
[ ] Network disconnection
[ ] Browser tab closed unexpectedly
Browser Tests:
[ ] Works in Chrome
[ ] Works in Firefox
[ ] Works in Safari
[ ] Works in Edge
[ ] Works on mobile Chrome
[ ] Works on mobile Safari
Network Tests:
[ ] Same local network
[ ] Different networks
[ ] Behind corporate firewall
[ ] Mobile data connection
[ ] Low bandwidth scenario
Automated Testing
Example test with Jest and Puppeteer:

beforeAll(async () => { browser = await puppeteer.launch(); page = await browser.newPage(); await page.goto('http://localhost:8080'); });

test('should load join page', async () => { const title = await page.title(); expect(title).toBe('Video Chat App'); });

test('should join room', async () => { await page.type('#room-input', 'test-room'); await page.click('#join-btn'); // Assert video section is visible });

afterAll(() => browser.close()); });

Limitations
Current Implementation
- Two-person limit: Only supports 1-to-1 calls (mesh for 2 peers)
No recording: Video/audio recording not implemented
No chat: Text chat feature not included
No screen sharing: Screen share capability not added
STUN only: No TURN server for strict NAT/firewall scenarios
No persistence: Rooms and state not persisted to database
Known Issues
1. Safari mobile: May have issues with autoplay
2. Firefox private mode: Camera access may be blocked
3. Corporate networks: May need TURN server
4. Mobile data: Higher latency and bandwidth costs
Going Further
✅ Implemented Enhancements
Screen Sharing: ✅ IMPLEMENTED
Share your entire screen, specific window, or browser tab
One-click toggle between camera and screen
Automatic track replacement without reconnection
Handles browser stop button gracefully
Seamless switch back to camera

Enhancements to Add
Multi-Party Calls:

// Or use SFU (Selective Forwarding Unit) for better scalability

Text Chat:

dataChannel.onmessage = (event) => { displayMessage(event.data); };

dataChannel.send('Hello!');

Recording:

mediaRecorder.ondataavailable = (e) => chunks.push(e.data); mediaRecorder.onstop = () => { const blob = new Blob(chunks, { type: 'video/webm' }); downloadVideo(blob); };

mediaRecorder.start();

Virtual Background:

Resources

Official Documentation

- WebRTC API

Acknowledgments

Special thanks to: