🎥 WebRTC Video Streaming Application

Real-time peer-to-peer video streaming using WebRTC and WebSockets

Features • Installation • Usage • Architecture • Troubleshooting

---

✨ Features

🚀 Core Features ✅ Real-time video streaming ✅ Peer-to-peer connection via WebRTC ✅ WebSocket signaling server ✅ ICE candidate exchange ✅ SDP offer/answer mechanism

🛠️ Technical Stack ⚛️ React 18+ with TypeScript 🔌 WebSocket (ws library) 📹 WebRTC API 🎨 Inline CSS styling 🔒 STUN server integration

---

📦 Installation

Prerequisites

Make sure you have the following installed:

• Node.js (v16 or higher)
• npm or yarn

Clone the Repository

git clone <your-repository-url>
cd webrtc-video-streaming

Install Dependencies

For the Frontend (React App)

npm install
# or
yarn install

For the WebSocket Server

cd server
npm install ws
# or
yarn add ws

---

🚀 Usage

Step 1: Start the WebSocket Server

cd server
npx tsx server.ts
# or if you have ts-node installed
ts-node server.ts

You should see:

WebSocket server running on ws://localhost:8080

Step 2: Start the React Application

In a new terminal:

npm run dev
# or
yarn dev

Step 3: Open Two Browser Windows

1. Sender: Navigate to http://localhost:5173/sender
2. Receiver: Navigate to http://localhost:5173/receiver

Step 4: Start Streaming

1. On the Sender page, click "Send Video"
2. Grant camera permissions when prompted
3. The Receiver page will automatically start displaying the video stream

---

🏗️ Architecture

graph LR
    A[Sender] -->|WebSocket| B[Signaling Server]
    B -->|WebSocket| C[Receiver]
    A -.->|WebRTC P2P| C

    style A fill:#4CAF50
    style C fill:#2196F3
    style B fill:#FF9800

Loading

How It Works

1. Connection Setup

   • Sender and Receiver connect to WebSocket server
   • Both identify themselves (identify-as-sender / identify-as-receiver)

2. Signaling Process

   Sender → Create Offer → Server → Receiver
   Receiver → Create Answer → Server → Sender
   

3. ICE Candidate Exchange

   • Both peers exchange ICE candidates through the server
   • Establishes optimal connection path

4. Media Streaming

   • Direct peer-to-peer video transmission via WebRTC
   • No server involved in media transfer

---

📁 Project Structure

webrtc-video-streaming/
├── src/
│   ├── components/
│   │   ├── Sender.tsx       # Video sender component
│   │   └── Receiver.tsx     # Video receiver component
│   ├── App.tsx              # Main application
│   └── main.tsx             # Entry point
├── server/
│   └── server.ts            # WebSocket signaling server
├── package.json
└── README.md

---

🔧 Configuration

WebSocket Server

Port: 8080 (default)

To change the port, edit server.ts:

const wss = new WebSocketServer({ port: 8080 });

STUN Servers

Located in both Sender.tsx and Receiver.tsx:

const pc = new RTCPeerConnection({
  iceServers: [
    { urls: "stun:stun.l.google.com:19302" },
    { urls: "stun:stun1.l.google.com:19302" },
  ],
});

---

🐛 Troubleshooting

Issue: Video Not Playing

Symptoms: Video shows "Connecting..." but never plays

Solutions:

1. ✅ Ensure WebSocket server is running
2. ✅ Check browser console for errors
3. ✅ Grant camera permissions to the Sender page
4. ✅ Make sure both Sender and Receiver are connected
5. ✅ Try refreshing both pages

Issue: "WebSocket is not connected"

Solutions:

1. Restart the WebSocket server
2. Wait 2-3 seconds after page load before clicking "Send Video"
3. Check if port 8080 is available

Issue: ICE Connection Failed

Solutions:

1. Check your firewall settings
2. Ensure STUN servers are accessible
3. Try adding TURN servers for better connectivity

Common Error Messages

Error	Cause	Solution
TypeError: Failed to construct 'RTCIceCandidate'	Invalid ICE candidate	Update to latest server code
Camera access denied	Browser permissions	Allow camera access in browser settings
WebSocket closed	Server not running	Start the WebSocket server

---

🔍 Debug Mode

To see detailed logs, open browser DevTools Console:

Sender logs to look for:

✓ Sender: WebSocket connected
✓ Sender: Creating offer...
✓ Sender: Offer sent to receiver
✓ Sender: Received answer from receiver
✓ Sender: Connection state: connected

Receiver logs to look for:

✓ Receiver: WebSocket connected
✓ Receiver: Processing offer
✓ Receiver: Answer sent to sender
✓ Receiver: Track received! video
✓ Receiver: Video playing!

---

🎯 Key Concepts

WebRTC (Web Real-Time Communication)

Enables peer-to-peer audio, video, and data sharing directly between browsers without intermediary servers.

Signaling

The process of coordinating communication and sending control messages between peers. Uses WebSocket in this project.

ICE (Interactive Connectivity Establishment)

Framework for connecting peers across NATs and firewalls using STUN/TURN servers.

SDP (Session Description Protocol)

Format for describing multimedia communication sessions (codecs, formats, etc.).

---

🚦 API Reference

WebSocket Messages

Sender → Server

// Identify as sender
{ type: "identify-as-sender" }

// Send offer
{ type: "create-offer", sdp: RTCSessionDescription }

// Send ICE candidate
{ type: "ice-candidate", candidate: RTCIceCandidate }

Receiver → Server

// Identify as receiver
{ type: "identify-as-receiver" }

// Send answer
{ type: "create-answer", sdp: RTCSessionDescription }

// Send ICE candidate
{ type: "ice-candidate", candidate: RTCIceCandidate }

---

📊 Performance Tips

• 🎬 Video Quality: Modify constraints in getUserMedia()
• 🔌 Network: Use TURN servers for better NAT traversal
• 💾 Bandwidth: Adjust video bitrate in RTCPeerConnection
• 🖥️ CPU: Lower video resolution for better performance

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Acknowledgments

• WebRTC API Documentation
• MDN Web Docs
• React Documentation
• ws WebSocket library

---

Made with ❤️ and TypeScript

⭐ Star this repo if you find it helpful!