Getting Started with WebRTC: Real-Time Communication Made Simple (Begi

📘 What Will You Learn from This Article?

By the end of this article, you’ll have a clear understanding of:

✅ What is WebRTC
✅ How it differs from traditional communication models
✅ A basic hands-on example to test it out in real-time

Whether you're just starting with real-time tech or curious about how browsers can handle video calls without servers — you're in the right place!

💡 Let’s Start with the Theory...

WebRTC (Web Real-Time Communication) is a powerful technology that enables browsers to communicate directly with each other — using messages, audio, and video — in real time without the need for an intermediate server.

This is known as peer-to-peer (P2P) communication.

🤔 But wait, how is this different from normal web communication?

In traditional web apps like YouTube, here’s what happens:

A content creator uploads a video to YouTube’s server.
When you watch that video, your browser requests it from the server.
The server then responds with the video content.

So, the server is always in the middle — acting like a postman delivering messages.

🎥 Now, compare that to a video call with a friend...

When you're on a video call using WebRTC:

You don’t need to upload anything to a server.
Your browser talks directly to your friend’s browser.
This happens instantly, from anywhere in the world, with no middleman.

This is what makes WebRTC real-time and truly powerful — especially for building apps like:

Video/voice calling apps (like Google Meet)
Live chat or support tools
Real-time gaming
Screen sharing tools

🧪 Practical Time: Let's Send a Message Using WebRTC (Browser-to-Browser)

It’s time to get our hands dirty and see WebRTC in action! 💻✨
We’ll set up a simple peer-to-peer text messaging channel using just two Chrome tabs or windows — no servers, no complex setup.

✅ You'll be able to type a message in one tab and receive it in the other.

👨‍🔬 Setup Instructions

Open two tabs (or windows) in Chrome.
In both tabs, open the DevTools Console (Right-click > Inspect > Console).
We'll call one tab Peer A, and the other Peer B.
Now follow the steps below:

🔧 Step 1: Code for Peer A (Offer Creator)

// Create a new RTCPeerConnection instance
const peerA = new RTCPeerConnection();

// Create a data channel named "chat"
const channel = peerA.createDataChannel("chat");

// When the channel is ready (open), log to console
channel.onopen = () => console.log("Peer A: Data channel is open!");

// When a message is received, show it in the console
channel.onmessage = (e) => console.log("Peer A received:", e.data);

// When ICE candidates are gathered ,triggers when localDescription is set
peerA.onicecandidate = (e) => {
  // Once all candidates are gathered (null), show the SDP
  if (e.candidate === null) {
    console.log("Copy this offer SDP and paste in Tab B:\n", JSON.stringify(peerA.localDescription));
  }
};

// Create the SDP offer and set it as the local description
//offer is object that contains all the necessary items that is useful for connection
peerA.createOffer().then(offer => peerA.setLocalDescription(offer));

🔁 Step 2: Code for Peer B (Answer Creator)

// Create another RTCPeerConnection for Peer B
const peerB = new RTCPeerConnection();

// When a data channel is received from Peer A
peerB.ondatachannel = (event) => {
  const channel = event.channel; // Access the channel

  // Log when it's open
  channel.onopen = () => console.log("Peer B: Data channel is open!");

  // Log any messages received
  channel.onmessage = (e) => console.log("Peer B received:", e.data);
};

// When ICE candidates are gathered
peerB.onicecandidate = (e) => {
  // Once done, log the answer SDP to send back to Peer A
  if (e.candidate === null) {
    console.log("Copy this answer SDP and paste in Tab A:\n", JSON.stringify(peerB.localDescription));
  }
};

// Paste the copied offer from Tab A inside this object
const offer = /* paste offer here */;

// Set the received offer as the remote description
peerB.setRemoteDescription(new RTCSessionDescription(offer))
  // Create an answer in response to the offer
  .then(() => peerB.createAnswer())
  // Set the answer as the local description
  .then(answer => peerB.setLocalDescription(answer));

🔁 Step 3: Complete the Connection in Tab A

// Paste the answer from Tab B inside this object
const answer = /* paste answer here */;

// Set the received answer as the remote description
peerA.setRemoteDescription(new RTCSessionDescription(answer));

✉️ Step 4: Send Messages

// In Tab A
channel.send("Hello from A!");

// In Tab B (inside ondatachannel, so you might need to save the reference)
channel.send("Hi from B!");

✅ Summary

We just built a simple P2P messaging system using WebRTC’s DataChannel.
No backend server. Just pure browser-to-browser communication.
This is how messaging, video calling, and even file transfer apps work behind the scenes.

💬 Want to build on top of this? Try replacing text with file sharing or integrating a basic UI!

🔜 What’s Next?

In this blog, we explored the basics of WebRTC and created a simple real-time connection between two browser tabs on the same network. But what happens when the two peers are on different networks — like one on mobile data and the other on home Wi-Fi?

That’s where things get a bit more interesting!

In the next blog, I’ll explain how WebRTC works behind the scenes, including STUN and TURN servers, NAT traversal, and why additional setup is required for communication across different networks. We'll also build a practical example to test WebRTC across devices and networks.

Stay tuned — real-time communication magic is just getting started! ✨

Unlocking the Power of WebRTC: A Beginner's Journey into Real-Time Communication

Table of contents