How can I make a browser to browser (peer to peer) connection?

web-development

webrtc

browser-communication

p2p-connection

byAnton Shumikhin·Feb 10, 2025

Creating a peer-to-peer connection within a browser is made possible by the WebRTC's RTCPeerConnection. It allows for direct media streaming with minimal code:

// Permit to establish a peer connection and initiate a local video stream
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
  const pc = new RTCPeerConnection();
  // Local video streaming -- because who wouldn't want to be a star?
  document.getElementById('localVideo').srcObject = stream;
  // Our tracks are hotter than a weekend DJ set!
  stream.getTracks().forEach(track => pc.addTrack(track, stream));

  // WebRTC signalling magic here, abracadabra to establish connection
});

This succinct code sets up a connection, gets the local video stream up and running whilst simultaneously paving the way for the completion of the connection setup.

Delving into WebRTC: The MQTT of Browser's world

DataChannels bring the magic of WebRTC to the fore. It's like the MQTT protocol, but between browsers. It enables browsers to transfer text, files, binary data - all you can eat data buffet!

However, the process for signaling, is a tailor-made part, homemade just like grandma's cookies. The shining knight usually comes in the form of WebSockets and a signaling server to relay the love notes, uh I mean messages, between clients.

Talking about performance, WebRTC is like the Usain Bolt of direct browser communication with its UDP-based implementation. No TCP/IP direct connections here! WebRTC can impressively hold its own, despite some hurdles like NATs and firewalls.

Hard facts and Soft pillows

Navigating the sea of NATs and firewalls in WebRTC is no less than a Christopher Columbus voyage! It typically requires the use of a STUN or TURN server to assist in connections.

Remember the time when plugins like Flash and Silverlight were the cool kids in the town for direct browser communications? Those days are nearly extinct with the advent of WebRTC.

The main web browser vendors i.e., Chrome, Firefox and Opera have jumped on the WebRTC bandwagon. Also, some sanity checks: you may have to route data through servers due to NAT or security policies. Don't worry, it's not you, it's the system!

Vis à Vis: Server relay

Sometimes, P2P connection might be as elusive as a unicorn. A client-server system using Websockets can be your saving grace to bypass the ephemeral browser connection issues.

The Socket.io framework shines here. It's like an intelligent switch, employing a server relayed connection when a direct P2P handshake doesn't give a high five!