Full-stack Developer @ Royal FloraHolland

## 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`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection) and [`MediaDevices`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices)).

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

[![WebRTC audio broadcast](https://vumbnail.com/725396499_large.jpg)](https://vimeo.com/725396499 "WebRTC audio broadcast - Click to Watch!")

## 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.
```ts
import { Server, Socket } from  'socket.io'
import { v4 as uuid } from  'uuid'
import express from  'express'
import http from  'http'

const app = express()
const httpServer = http.createServer(app)
const io = new Server(httpServer)

io.use((socket: Socket, next: (err?: any) => void) => {
socket.on('join', ({ roomId }: { roomId:string }, ack) => {
  socket.join(roomId)
  socket.to(roomId).emit('new peer', { remotePeerId: socket.id })
  ack && ack(roomId)
})
socket.on('leave', ({ roomId }: { roomId:string }) => {
  socket.leave(roomId)
  socket.to(roomId).emit('peer left', { remotePeerId: socket.id })
})

const { PORT = '3000' } = process.env
httpServer.listen(Number(PORT), '0.0.0.0', () => console.log(`Server ready at http://0.0.0.0:${PORT}`))
```
## 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:
```ts
const connections: Record<string, RTCPeerConnection> = {}

socket.on('new peer', ({ remotePeerId }: { remotePeerId:string }) => {
  const connection = new RTCPeerConnection()

  // create an offer for the remote peer when the local peer adds data/audio/video
  connection.onnegotiationneeded = async () => {
    await connection.setLocalDescription(await connection.createOffer())
    socket.emit('description', { to: remotePeerId, ...connection.localDescription })
  }

  // send ice candidates to the remote peer
  connection.onicecandidate = ({ candidate }) => socket.emit('candidate', { to: remotePeerId, ...candidate })
  
  // respond to onDataChannel or onTrack
  // ...
  
  connections[remotePeerId] = connection
})

socket.on('peer left', ({ remotePeerId }: { remotePeerId:string }) => connections[remotePeerId].close())

socket.on('description', async ({ remotePeerId, ...remoteSessionDescription }: RTCSessionDescriptionInit & { remotePeerId: string }) => {
  await connections[remotePeerId].setRemoteDescription(remoteSessionDescription)
  if(remoteSessionDescription.type === 'offer'){
    const answer = connections[remotePeerId].createAnswer()
    socket.emit('description', { to: remotePeerId, ...answer })
  }
})

socket.on('candidate', ({ remotePeerId, ...candidate }: RTCIceCandidate & { remotePeerId: string }) => {
  connections[remotePeerId].addIceCandidate(candidate)
})
```
To forward the negotiation to the correct peer we just need to add the following event handlers in our signalling server:
```ts
socket.on('description', payload => forwardToPeer('description', payload))
socket.on('candidate', payload => forwardToPeer('candidate', payload))

function forwardToPeer(eventType: 'description' | 'candidate', { to, ...payload}: { to: string }) {
  io.to(to).emit(eventType, { remotePeerId: socket.id, ...payload })
}
```
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.

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`](https://develope...

Rense Bakker

Full-stack Developer @ Royal FloraHolland

Full-stack Developer @ UMC Utrecht