What is WebRTC

WebRTC is a web standard for real time communication between two peers (p2p). It allows for streaming data, video and audio using Javascript and the browser API (RTCPeerConnection and MediaDevices).

This is a video (in Dutch) that demonstrates the capabilities of WebRTC for audio broadcasting:

Peer discovery

Although WebRTC allows for true peer-to-peer communication, to establish a connection between peers, the peers do need to find eachother and negotiate a peer connection. For this we have to create a "signalling server". For this demo we built a room-based signalling server with NodeJS and socket.io. Peers join a specific room and other peers in that room will be notified once the new peer has joined.

1import { Server, Socket } from  'socket.io'
2import { v4 as uuid } from  'uuid'
3import express from  'express'
4import http from  'http'
5
6const app = express()
7const httpServer = http.createServer(app)
8const io = new Server(httpServer)
9
10io.use((socket: Socket, next: (err?: any) => void) => {
11socket.on('join', ({ roomId }: { roomId:string }, ack) => {
12  socket.join(roomId)
13  socket.to(roomId).emit('new peer', { remotePeerId: socket.id })
14  ack && ack(roomId)
15})
16socket.on('leave', ({ roomId }: { roomId:string }) => {
17  socket.leave(roomId)
18  socket.to(roomId).emit('peer left', { remotePeerId: socket.id })
19})
20
21const { PORT = '3000' } = process.env
22httpServer.listen(Number(PORT), '0.0.0.0', () => console.log(`Server ready at http://0.0.0.0:${PORT}`))
23

Negotiation phase

Now that our peers can find eachother, they can initiate an RTCPeerConnection and negotiate through the signalling server. On the client, the initiation of the RTCPeerConnection looks something like this:

1const connections: Record<string, RTCPeerConnection> = {}
2
3socket.on('new peer', ({ remotePeerId }: { remotePeerId:string }) => {
4  const connection = new RTCPeerConnection()
5
6  // create an offer for the remote peer when the local peer adds data/audio/video
7  connection.onnegotiationneeded = async () => {
8    await connection.setLocalDescription(await connection.createOffer())
9    socket.emit('description', { to: remotePeerId, ...connection.localDescription })
10  }
11
12  // send ice candidates to the remote peer
13  connection.onicecandidate = ({ candidate }) => socket.emit('candidate', { to: remotePeerId, ...candidate })
14  
15  // respond to onDataChannel or onTrack
16  // ...
17  
18  connections[remotePeerId] = connection
19})
20
21socket.on('peer left', ({ remotePeerId }: { remotePeerId:string }) => connections[remotePeerId].close())
22
23socket.on('description', async ({ remotePeerId, ...remoteSessionDescription }: RTCSessionDescriptionInit & { remotePeerId: string }) => {
24  await connections[remotePeerId].setRemoteDescription(remoteSessionDescription)
25  if(remoteSessionDescription.type === 'offer'){
26    const answer = connections[remotePeerId].createAnswer()
27    socket.emit('description', { to: remotePeerId, ...answer })
28  }
29})
30
31socket.on('candidate', ({ remotePeerId, ...candidate }: RTCIceCandidate & { remotePeerId: string }) => {
32  connections[remotePeerId].addIceCandidate(candidate)
33})
34

To forward the negotiation to the correct peer we just need to add the following event handlers in our signalling server:

1socket.on('description', payload => forwardToPeer('description', payload))
2socket.on('candidate', payload => forwardToPeer('candidate', payload))
3
4function forwardToPeer(eventType: 'description' | 'candidate', { to, ...payload}: { to: string }) {
5  io.to(to).emit(eventType, { remotePeerId: socket.id, ...payload })
6}
7

Now if we add a data channel or audio/video track to the RTCPeerConnection with addDataChannel or addTrack. The peers in the room will negotiate peer-to-peer connections with eachother and start receiving data/audio/video from eachother.

Once the peers are connected, in theory we can turn off the signalling server, however, to find new peers that want to connect, we need to keep it running.