WebRTC For Beginners

Contents:

1. Part 1: Introduction to WebRTC and creating the signaling server
2. Part 2: Understanding the MediaDevices API and getting access to the users media devices
3. Part 3: Creating the peers and sending/receiving media
4. Part 4: Sharing and sending the users display and changing tracks
5. Part 5: Data Channels basics
6. Part 6: Android native peer
7. Part 7: iOS native peer
8. Part 8: Where to go from here

Part 1: Introduction to WebRTC and creating the signaling server

Hello, due to finding not too much information regarding WebRTC I have decided to create a tutorial. Hopefully it is helpful to anyone looking into trying out WebRTC.

While WebRTC is not a new technology it is constantly evolving. I will try to update this as new changes occur.

WebRTC is short for (Web Real-Time Communication), and allows Peers to send/receive media/data via P2P.

Before we dive into the fun parts, we need to set up a Signaling server so that the peers can initially communicate, the protocol for this can be anything but it usually ends up being WebSockets. Its also possible after the initial signaling is complete to use Data Channels, which we will leave until later.

With that being said, lets start on creating the signaling server.
The signaling server can be any language, but for simplicitys sake I will be using JavaScript and Nodejs.
Since WebRTC does not work on insecure addresses we will also need to provide a self signed certificate. (Dont used self signed if youre planning to take it to production.)

Requirements:

• A Computer (obviously)
• Nodejs

IDE can be anything of your choice. I generally prefer Vim, since Im always using the terminal.
Well then lets get started!

First create a directory for the server and initialize the application.

mkdir signal-server && cd signal-server# Also make a directory for the src filesmkdir srcnpm init -y

This will create the package.json file, next we need to install the modules needed.

npm i ws #WebSocket servernpm i nanoid #Used to create a unique idnpm i express #Used to serve static pages

The WebSocket module can be anything but for simplicitys sake I decided to use the ws module.

Next we need to create a self signed certificate in order to handle https connections.

mkdir ssl && cd sslopenssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout cert.key -out cert.pem

Next we will create the code for the server, create a new file called server.js in the src folder.
Now open it up in your preferred IDE, lets get started!
First we import the modules that we will use.

const express = require('express');const { createServer } = require('https');const { readFileSync } = require('fs');const { nanoid } = require('nanoid');const { resolve } = require('path');const { WebSocketServer, OPEN } = require('ws');

We will be creating two https servers, one for the web socket and the other to serve static pages. Since we dont want to write the same thing twice lets make a helper function.

const createHttpsServer = () => {  return createServer({    cert: readFileSync(resolve(__dirname, './../ssl/cert.pem')),    key: readFileSync(resolve(__dirname, './../ssl/cert.key'))  });};

The helper function creates a https server using the certificate and key we created earlier.

Next we create the web socket server and the server to serve our static files.

const appServer = createHttpsServer().listen(3000);app.use(express.static(resolve(__dirname, './../public')));const wsServer = createHttpsServer();const wss = new WebSocketServer({ server: wsServer });

Next we listen for any web socket connections and handle them. Dont worry about the functions we havent defined yet, they we will be defined later.

wss.on('connection', (socket) => {  console.log('new connection');  socket.on('message', (data) => {    console.log('socket::message data=%s', data);    try {      const jsonMessage = JSON.parse(data);      handleJsonMessage(socket, jsonMessage);    } catch (error) {      console.error('failed to handle onmessage', error);    }  });  socket.once('close', () => {    console.log('socket::close');  });}); 

Above we listen for any connections, once a connection is established we listen for any messages that come through and parse them into JSON.

Now we can define the function to handle parsed JSON messages.

const handleJsonMessage = (socket, jsonMessage) => {  switch (jsonMessage.action) {    case 'start':      socket.id = nanoid();      emitMessage(socket, { action: 'start', id: socket.id });       break;    default:       // Default we will just relay the message to the peer      if (!jsonMessage.data.remoteId) return;      const remotePeerSocket = getSocketById(jsonMessage.data.remoteId);      if (!remotePeerSocket) {        return console.log('failed to find remote socket with id', jsonMessage.data.remoteId);      }      // delete/edit the remoteId depending if the action is offer or not      if (jsonMessage.action !== 'offer') {        delete jsonMessage.data.remoteId;      } else {        jsonMessage.data.remoteId = socket.id;      }      emitMessage(remotePeerSocket, jsonMessage);  }};

Here we get the action from the parsed JSON, if the action is start we give the socket a unique ID and send it back to the client.
Anything else we get the socket of the other peer and just relay the message to them.
If the action is not offer we delete the remote id as it is not needed anymore. If the action is offer we switch the remote id to the other party in order to receive an answer.

Next we will create the two helper functions that are missing.

const emitMessage = (socket, jsonMessage) => {  if (socket.readyState === OPEN) {    socket.send(JSON.stringify(jsonMessage));  }};// Helper to get socket via idconst getSocketById = (socketId) =>  Array.from(wss.clients).find((client => client.id === socketId));

emitMessage simply sends a message to a socket if it is in open state.
getSocketById simply returns a socket based on the socket id. (Unique id we defined with nanoid)

Finally lets start up the web socket server and start listening.

wsServer.listen(8888);console.log('app server listening on port 3000');console.log('wss server listening on port 8888');

Thats the signaling server sorted.
Now lets see if it starts!

node src/server.js# This should print the following outputapp server listening on port 3000wss server listening on port 8888

If you get the above output that means the signaling server is ready to go!

In the next part we will go into getting the users media devices (Camera and Mic) and the constraints we can use to do so.
Hope to see you in the next part!

Source Code: https://github.com/ethand91/webrtc-tutorial

Bonus: Things to consider:

• The current signaling server only handles 1 to 1, how could you make it so it support up to 4 clients?
• It also only supports 1 call, how could you make it support multiple?