WebRTC Video Calling Application

A peer-to-peer video calling application built using WebRTC, WebSockets, and Flask. This project demonstrates real-time communication protocols and network programming concepts.

Project Submission for Networking Lab

---

📋 Table of Contents

• Features
• Architecture
• Prerequisites
• Installation
• Running the Application
• Usage
• Project Structure
• Technical Details
• Troubleshooting
• Team Members

---

✨ Features

• Peer-to-Peer Video Calling: Direct WebRTC connections between clients
• Secure Communication: HTTPS and WSS (WebSocket Secure) implementation
• Mobile-Friendly: Responsive web interface that works on phones and tablets
• Room-Based System: Multiple concurrent calls in different rooms
• Real-Time Controls: Toggle camera/microphone during calls
• Cross-Platform: Works on Windows, Linux, and macOS
• Self-Signed SSL: Automated certificate generation for local network deployment

---

🏗️ Architecture

Components

1. Signaling Server (signaling_server_ssl.py)

   • WebSocket server for peer discovery and signaling
   • Handles room management and peer connection coordination
   • Implements secure WebSocket (WSS) protocol

2. Web Server (web_server.py)

   • Flask-based HTTPS server
   • Serves the web interface
   • Provides landing page and call interface

3. Web Client (HTML/JavaScript)

   • WebRTC implementation in browser
   • Handles media streams and peer connections
   • Responsive UI with real-time status updates

4. Certificate Generator (generate_cert.py)

   • Creates self-signed SSL certificates
   • Configures certificates for local network use

📦 Prerequisites

• Python: 3.8 or higher
• Operating System: Windows 10/11, Linux, or macOS
• Network: Both devices must be on the same local network (same WiFi)
• Browser: Modern browser with WebRTC support
  • Chrome/Edge: Version 80+
  • Firefox: Version 75+
  • Safari: Version 14+

---

🚀 Installation

Step 1: Clone or Download the Project

cd /path/to/your/project

Step 2: Install Python Dependencies

pip install -r requirements.txt

Alternative (if using virtual environment):

# Create virtual environment
python -m venv venv

# Activate virtual environment
# Windows:
venv\Scripts\activate
# Linux/Mac:
source venv/bin/activate

# Install dependencies
pip install -r requirements.txt

Step 3: Generate SSL Certificates

python generate_cert.py

Output:

Generating certificate for: 192.168.1.100
✅ Certificate generated successfully!
📁 Files created in 'certs' folder:
   - cert.pem
   - key.pem
🌐 Your local IP: 192.168.1.100
📱 Use this URL on your phone: https://192.168.1.100:8443

Note: Save the IP address shown - you'll need it to connect from other devices.

---

🎬 Running the Application

Step 1: Start the Signaling Server

Open a terminal/command prompt and run:

python signaling_server_ssl.py

Expected Output:

======================================================================
🔒 Secure Signaling Server (WSS) Started
======================================================================
   Local:  wss://localhost:8765
   Phone:  wss://192.168.1.100:8765
======================================================================

Keep this terminal open.

Step 2: Start the Web Server

Open a second terminal/command prompt and run:

python web_server.py

Expected Output:

======================================================================
🔒 HTTPS Web Interface Available At:
======================================================================
   On this PC:     https://localhost:8443
   On your phone:  https://192.168.1.100:8443
======================================================================

⚠️  IMPORTANT: You'll see a security warning - this is normal!
   Click 'Advanced' → 'Accept Risk and Continue' (Firefox)
   or 'Advanced' → 'Proceed to site' (Chrome)

Keep this terminal open.

---

💻 Usage

Connecting from the Same Device (Testing)

1. Open browser and navigate to: https://localhost:8443
2. Accept certificate warning:
   • Click "Advanced"
   • Click "Accept the Risk and Continue" or "Proceed to localhost"
3. Accept signaling server certificate:
   • Open new tab: https://localhost:8765
   • Accept certificate warning (you'll see an error page - this is normal)
4. Return to application tab
5. Enter room details:
   • Room ID: room1
   • Signaling Server: wss://localhost:8765
6. Click "Join Call"
7. Allow camera/microphone access when prompted

Connecting from Mobile/Another Device

1. Find your PC's IP address (shown when servers started, e.g., 192.168.1.100)

2. On your phone/tablet, open browser and navigate to: https://YOUR_IP:8443

   • Example: https://192.168.1.100:8443

3. Accept certificate warnings:

   • Main page: Accept certificate
   • Signaling server: Visit https://YOUR_IP:8765 in new tab, accept certificate

4. Enter room details:

   • Room ID: room1 (same as other device!)
   • Signaling Server: wss://YOUR_IP:8765
   • Example: wss://192.168.1.100:8765

5. Click "Join Call"

6. Allow camera/microphone permissions

7. Both devices should now be connected!

During the Call

• 🎤 Microphone Button: Toggle audio on/off
• 📹 Camera Button: Toggle video on/off
• 📞 Hang Up Button: End call and return to home screen

---

📁 Project Structure

webrtc-video-call/
├── generate_cert.py              # SSL certificate generator
├── signaling_server_ssl.py       # WebSocket signaling server
├── web_server.py                 # Flask web server
├── requirements.txt              # Python dependencies
├── README.md                     # This file
├── certs/                        # Generated SSL certificates
│   ├── cert.pem
│   └── key.pem
└── templates/                    # HTML templates
    ├── index.html                # Landing page
    └── call.html                 # Video call interface

---

🔧 Technical Details

Protocols Used

1. HTTPS (HyperText Transfer Protocol Secure)

   • Port: 8443
   • Used for serving web interface
   • TLS/SSL encryption

2. WSS (WebSocket Secure)

   • Port: 8765
   • Used for signaling between peers
   • Full-duplex communication channel

3. WebRTC (Web Real-Time Communication)

   • Peer-to-peer video/audio streaming
   • ICE (Interactive Connectivity Establishment)
   • STUN servers for NAT traversal
   • SDP (Session Description Protocol) for negotiation

Key Networking Concepts Demonstrated

• Client-Server Architecture: Signaling server coordinates peer connections
• Peer-to-Peer Communication: Direct media streams between clients
• NAT Traversal: ICE candidates and STUN servers
• Secure Communication: SSL/TLS encryption
• WebSocket Protocol: Real-time bidirectional communication
• Port Forwarding: Firewall configuration
• Local Network Discovery: IP-based addressing

WebRTC Connection Establishment

1. Signaling Phase:

   • Clients connect to signaling server via WebSocket
   • Exchange SDP offers/answers
   • Exchange ICE candidates

2. Connection Phase:

   • STUN servers help discover public IP addresses
   • ICE framework establishes optimal connection path
   • Peer connection established

3. Media Phase:

   • Video/audio streams transmitted directly between peers
   • No server involvement after connection established

Security Features

• Self-Signed Certificates: Generated locally for HTTPS/WSS
• Certificate Pinning: Browser validates certificate
• Encrypted Signaling: All signaling messages encrypted via WSS
• Encrypted Media: WebRTC uses DTLS-SRTP for media encryption
• Room-Based Isolation: Users can only connect within same room

---

🐛 Troubleshooting

Issue: "Connection Refused" or "Can't Connect to Server"

Solution:

1. Verify both servers are running (check terminals)
2. Check firewall settings
3. Ensure devices are on same WiFi network
4. Verify IP address is correct

Issue: "No Camera/Microphone Permissions on Mobile"

Solution:

1. Must use HTTPS (not HTTP)
2. Accept certificate warning on both:
   • Main page: https://YOUR_IP:8443
   • Signaling server: https://YOUR_IP:8765
3. Clear browser cache and try again
4. Check browser permissions settings

Issue: Certificate Warnings

Solution:

• This is normal for self-signed certificates
• Click "Advanced" → "Proceed" or "Accept Risk"
• Must accept for both web page and signaling server

Issue: "Room Full" Error

Solution:

• Current implementation supports 2 peers per room
• Use different room name or wait for other peer to leave

Issue: Video Shows but No Connection

Solution:

1. Check browser console for errors (F12)
2. Verify signaling server shows both clients joining
3. Check ICE candidate exchange in console
4. Try using same room name on both devices

Issue: Works on PC but Not on Phone

Solution:

1. Phone must use HTTPS URL (https:// not http://)
2. Signaling must use WSS (wss:// not ws://)
3. Accept certificates on phone browser
4. Grant camera/microphone permissions

---

📚 References

• WebRTC Official Documentation
• MDN Web Docs - WebRTC API
• RFC 8831 - WebRTC Data Channels
• RFC 8866 - SDP: Session Description Protocol
• Flask Documentation
• websockets Library

---

👥 Team Members

• Sachithanand S - 24BCE5125
• Siddharth E - 24BCE1261
• Kalyan Ram Ch - 24BCE5195

---

🎯 Learning Outcomes

Through this project, we demonstrated understanding of:

1. Network Programming: Socket programming, server-client architecture
2. Web Protocols: HTTP/HTTPS, WebSocket/WSS
3. Real-Time Communication: WebRTC, peer-to-peer connections
4. Security: SSL/TLS certificates, encrypted communication
5. NAT Traversal: ICE, STUN, and network discovery
6. Web Development: HTML5, JavaScript, Flask framework
7. System Administration: Firewall configuration, port management

---