WebRTC Connection: Step-by-Step Guide

This document provides a comprehensive explanation of the steps involved in establishing a peer-to-peer (P2P) connection using WebRTC. WebRTC enables real-time communication capabilities, such as audio, video, and data transfer, directly between browsers without requiring additional plugins.

---

Overview of the Connection Process

Establishing a WebRTC connection involves two major phases:

1. Signaling Process: Exchange of metadata (offer, answer, and ICE candidates) through a signaling server.
2. Media Streaming: Sending and receiving media (audio, video) or data streams between peers.

Below are the detailed steps for each phase.

---

1. Signaling Process

The signaling process involves the exchange of Session Description Protocol (SDP) and ICE candidates to set up a P2P connection. Here’s how it works:

Browser 1 (Initiating Peer):

1. Create an RTCPeerConnection:

   • Create a new instance of RTCPeerConnection to handle the P2P connection.
   • Example:

     const pc = new RTCPeerConnection(configuration);

2. Create an Offer:

   • Generate an offer SDP using createOffer().

     const offer = await pc.createOffer();

3. Set the Local Description:

   • Assign the generated offer SDP to the local description.

     await pc.setLocalDescription(offer);

4. Send the Offer:

   • Transmit the offer to the other browser (Browser 2) via a signaling server.

Browser 2 (Receiving Peer):

5. Receive the Offer:

   • Obtain the offer from the signaling server.

6. Set the Remote Description:

   • Assign the received offer SDP to the remote description.

     await pc.setRemoteDescription(offer);

7. Create an Answer:

   • Generate an answer SDP using createAnswer().

     const answer = await pc.createAnswer();

8. Set the Local Description:

   • Assign the generated answer SDP to the local description.

     await pc.setLocalDescription(answer);

9. Send the Answer:

   • Transmit the answer back to Browser 1 through the signaling server.

Browser 1:

10. Receive the Answer:

    • Obtain the answer from the signaling server.

11. Set the Remote Description:

    • Assign the received answer SDP to the remote description.

      await pc.setRemoteDescription(answer);

At this stage, the signaling process is complete, and the WebRTC connection is established.

---

2. Media Streaming Process

Once the P2P connection is established, you can exchange media streams (audio/video) between peers. Below are the steps:

Browser 1 and Browser 2:

1. Request Camera and Microphone Permissions:

   • Use navigator.mediaDevices.getUserMedia() to request access to audio and video streams.

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

2. Add Media Tracks to the Peer Connection:

   • Add the acquired media tracks to the RTCPeerConnection.

     stream.getTracks().forEach((track) => {
       pc.addTrack(track, stream);
     });

3. Handle Incoming Media Tracks:

   • Listen for the ontrack event to handle media tracks sent by the remote peer.

     pc.ontrack = (event) => {
       const remoteStream = new MediaStream();
       event.streams[0].getTracks().forEach((track) => {
         remoteStream.addTrack(track);
       });
       // Assign the remote stream to a video element
       remoteVideoElement.srcObject = remoteStream;
     };

At this point, both peers can send and receive media streams, enabling real-time communication.

---

Key Components in WebRTC

• RTCPeerConnection: Handles the connection and media transfer between peers.
• Session Description Protocol (SDP): Contains metadata about the connection (e.g., codecs, formats).
• Interactive Connectivity Establishment (ICE): Manages NAT traversal and network connectivity.
• Signaling Server: A server responsible for exchanging SDP and ICE candidates (not part of WebRTC itself).

---

Example Signaling Server (Using Socket.IO)

Here is a simple example of a signaling server:

const io = require("socket.io")(3000);
io.on("connection", (socket) => {
  socket.on("offer", (data) => {
    socket.to(data.target).emit("offer", data);
  });

  socket.on("answer", (data) => {
    socket.to(data.target).emit("answer", data);
  });

  socket.on("ice-candidate", (data) => {
    socket.to(data.target).emit("ice-candidate", data);
  });
});

---

By following the above steps, you can successfully establish a WebRTC connection and exchange media streams between two peers.