Video Chat and Rooms Setup

Introduction

In this section, we go over how we set up the video chat functionality as well as how we added rooms.

Basic Video Call with WebSockets

Because it is free and fairly easy to set up for a basic call, we initially decided to go with plain WebRTC over WebSockets using a Node.js server. This means that we had to set up a separate signaling server to establish a connection between the host and recipient on the video call. Both parties would connect to this server when the joined the video call, and the server would feed the other party's camera back to them.

Writing the code for this was fairly straightforward. We first created a Node.js server using express and socket.io. Express is a Javascript framework that makes it easy to create an API. Socket.io, on the other hand, is a library that simplifies the real-time communication provided by WebSockets by providing an API that is far more elegant and easier to use. These dependencies were then installed using npm install express socket.io in the server folder.

In the server's main Javascript file, we started with some initial ceremony to set up express and socket.io. We then added a handler for signaling as shown below:

io.on('connection', (socket) => {
  socket.on('offer', (offer, targetSocketId) => {
    socket.to(targetSocketId).emit('offer', offer, socket.id);
  });
  
  socket.on('answer', (answer, targetSocketId) => {
    socket.to(targetSocketId).emit('answer', answer);
  });
  
  socket.on('ice-candidate', (candidate, targetSocketId) => {
    socket.to(targetSocketId).emit('ice-candidate', candidate);
  });
});

This code listens for an event named "connection", which is what happens when a new client connects to the server using a WebSocket. When a client connects, a callback function is triggered with a socket object representing the connection to that client. After connecting, the sockets listens on three different events: offer, answer, and ice-candidate. In the context of WebRTC, an "offer" is a message that initiates the connection process. This message typically contains a session description protocol (SDP) data, describing the sender's connection constraints, media formats, etc. When an offer is received from a client it's forwarded to another client, identified by targetSocketId. The server emits an offer event to the target client, sending along the offer data and the socket ID of the sender. Similar to the offer, an answer message is a response to an offer and also contains SDP data. It's sent by the client that received the offer to accept the connection. The server then forwards this 'answer' message to the original sender of the 'offer', using the target socket ID. Finally, the ice-candidate messages are part of the ICE (Interactive Connectivity Establishment) framework used in WebRTC to find the best path for streaming media between peers. Each ICE candidate represents a potential network route for the P2P connection. When an ICE candidate is found, it's sent to the other client (the potential peer) to test the connectivity along that route.

Adding Rooms with Agora

Conclusion

To conclude, we started our journey into video chat by creating a WebSocket server, but ended up pivoting to Agora due to its significantly higher ease-of-use.