Ring Upp - DO Hackathon - Part 2/4 - Building

Last post we decided what to build. Now let's talk about how to build.

We built a video chat app that we can separate out into 3 different parts: Backend, User Interface, WebRTC video chat business logic.

Backend

We'll start with the backend because it will be the backbone of our application. Since this is a small app instead of creating a backend and a React frontend (which is my go-to), the project only needs to be a simple Node.js Express app.

I'm comfortable and familiar with Node.js so this was my first choice but any framework will work for such a simple application.

The backend should only do two things. Serve our app and use web sockets to start connections in our chat rooms. More on this below.

One thing to note here, don't start with a blank slate. Pull from a template or walk through a getting started with Express tutorial. There's no reason not to copy someone's starting point and it makes things a lot less scary. A big part of starting side projects is reducing the barrier to entry.

User Interface

The user interface is simple except for the actual chat page. What makes the chat page less than simple is that there are multiple features like screen sharing, multiple users, enabling and disabling video and audio, and input selection. All the features and more that are planned complicate the UX so while developing we have to balance usability and features.

While the UI/UX can get complicated the way we build them was not. Since this is an Express app we will return the HTML, CSS, and JS when the clients make requests to different endpoints. To simplify the CSS we used Tailwind CSS (my new favorite CSS framework).

Take a look at the source code for a look at how the pages are handled. They can’t get much simpler.

WebRTC video chat business logic

This is the real meat of the application.

From an extremely high level this is what the chat logic is:

1. Client joins a "Room" and opens a web socket to the server
2. Another client joins a "Room" and notifies the server of the join
3. The server then tells both clients to start a connection with each other
4. Clients connect using Twilio's STUN capabilities for WebRTC. (I'll put some good articles about WebRTC and how/why this connection happens)
5. Clients are now connected and a room can accept one more connection. The server will then say the room is "full"

To implement this there was a lot of looking through other implementations. WebRTC has a "samples" repo on GitHub that I highly recommend you take a look at.

This also took a lot of trial and error, testing with multiple users, multiple browsers, and remote connections. The application is still not perfect. The main problem I am still having is reconnecting after connection issues but this is a great MVP.

For more information on how this works please look at the source code and check out these links:

Twilio STUN/TURN (A huge part of connecting with WebRTC)

WebRTC Samples

How WebRTC works

I would love to go into more detail about WebRTC but that will have to be another series.

Next post let's talk about finishing touches and deploying.