WebRTC

What is WebRTC?

WebRTC stands for:

Web Real-Time Communication

It is a collection of:

• Browser APIs
• Network protocols
• Security mechanisms
• Media processing technologies

that allows applications to exchange:

• Audio
• Video
• Data

in real time.

The keyword here is:

Real Time

Real time means communication hapens almost instantly.

For example:

Chat Application

You send a message
↓
Friend receives it instantly

Latency:

~10ms - 100ms

Video Call

You speak
↓
Friend hears almost immediately

Latency:

<150ms preferred

Multiplayer Game

Player moves
↓
Other players see movement instantly

Latency:

10ms - 50ms ideal

WebRTC was built specifically for these kinds of applications.

Why Was WebRTC Created?

To understand WebRTC, we must first understand the limitations of traditional web communication.

Traditional Web Model

When you open a website:

Browser
   |
   |
Server

Example:

GET /products

Server responds:

{
  "products": []
}

This works perfectly for:

• E-commerce websites
• Blogs
• Dashboards
• Content management systems
• Banking portals

because communication is request-response.

The Problem

Suppose two users want to video call.

Traditional Architecture

User A
   |
Server
   |
User B

Every audio packet:

A -> Server -> B

Every video packet:

A -> Server -> B

This introduces problems.

Problem 1: High Latency

Every network hop adds delay.

User A
   |
Server
   |
User B

The server becomes a middleman.

Instead of:

A -> B

we get:

A -> Server -> B

which is slower.

For voice communication:

50ms delay = acceptable

300ms delay = annoying

1 second delay = terrible

Problem 2: High Cost

Imagine:

1000 users

all in video calls.

Server bandwidth becomes enormous.

Example:

Eacch user sends:

2 Mbps video

Bandwidth:

1000 × 2 Mbps upload
1000 × 2 Mbps download

The company pays for all traffic.

This becomes expensive.

Problem 3: Scalability

Traditional architecture scales poorly for media.

Example:

Netflix

works because user only download.

But video conferencing:

Everyone uploads
Everyone downloads

which is much harder.

Problem 4: Browser Limitations

Before WebRTC, browsers relied on:

• Flash
• Java  Applets
• Sliverlight

for camera and microphone access.

Problems:

Security vulnerabilities
Plugins required
Poor user experience

A modern solution was needed.

The Goal of WebRTC

WebRTC was designed with one core goal:

Allow browsers to communicate directly.

Instead of:

Browser A
   |
Server
   |
Browser B

we want:

Browser A
    |
    |
Browser B

This is called:

Perr-to-Peer Communication

Or 

P2P

What Does Peer-to-Peer Mean?

Peer means:

Equal participant

Netiher browser acs as a server.

Both are equal.

Example:

Laptop <-> Laptop

Phone <-> Phone

Browser <-> Browser

Data flows directly between participants.

Is WebRTC Completely Serverless?

A common misconception.

Many developers think:

WebRTC = No Servers

This is wrong.

WebRTC still requires servers.

A realistics architecture:

                Signaling Server
                      |
                      |
      --------------------------------
      |                              |
      |                              |
      v                              v

 Browser A  <------WebRTC------> Browser B

Servers are needed for:

• User discovery
• Authentication
• Signaling
• Room management
• TURN relay
• Recording
• Analytics

What WebRTC removed is:

Media relay (when possible)

Core Capabilities of WebRTC

WebRTC provides three major capabilities.

1 Audio Communication

Example:

Voice Calls

WhatsApp Calling
Discord Voice
Teams Audio

2 Video Communication

Example:

Video Calls

Google Meet
Zoom

3 Data Communication

Many developers don't know this.

WebRTC can transfer:

Text
Files
Game State
JSON
Binary Data

directly:

Example:

Browser A
   |
DataChannel
   |
Browser B

No HTTP request required.

Core APIs

WebRTC exposes three main browser APIs.

getUserMedia()

Access camera and micorphone.

Example:

const stream =
await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
});

Returns:

MediaSteam

containing media tracks.

RTCPeerConnection

Creates peer connection.

const peer =
new RTCPeerConnection();

Responsible for:

• Audio  transport
• Video transport
• Encryption
• Connectivity

RTCDataChannel

Creates data connection.

const channel =
peer.createDataChannel("chat");

Used for:

• Messages
• Files
• Game Data

WebRTC vs HTTP

HTTP:

Client -> Server

Designed for:

Pages
APIs
Resources

Communication style:

Request -> Response

WebRTC:

Client <-> Client

Designed for:

Audio
Video
Real-Time Data

Communication style:

Continuous
Bidirectional