Build Your Own Video Chat with Vue, WebRTC, SocketIO, Node & Redis

Building a multi-room video chat with horizontal scaling

Adrián García Diéguez
Level Up Coding
Published in
12 min readAug 1, 2019

--

Nowadays, there are plenty of free applications out there in the market providing chat and video conference functionality. In almost one click we all are able to communicate with anyone in any part of the world but, why don’t we try to build our own app to make it even more real? Let’s do it!

The main features of our app will be:

  • Several available rooms and the possibility to jump across them
  • User status (online/absent/unavailable)
  • Be able to open a private chat with anyone else in the same room (just one private chat at the same time) and get notified whether that user is already talking with someone else or has closed the chat
  • Be able to start a video conference within the same private chat
Private chat and video example

To build it we’ll use the following tech:

  • Vue.js as a frontend framework. Vue is becoming more popular lately, so it’s a good chance to catch up with it. We’ll also use Vuex to store the user and chat information
  • The backend will be implemented in NodeJS with Express
  • Socket.io and WebRTC for the real-time engine and communications
  • Redis as a database in memory
  • Docker & Docker Compose

Talking about that tech (and Sockets and WebRTC specially) we could go as far as we wanted, diving deeper in more complex aspects, but that’s not the purpose. We want to build something simple to understand the basic points of each part but fully working though, so let’s get started.

A new heads up! I just released a new article talking about how to implement a video conference with many-to-many functionality. It’s an extension from what we explain and build here, so check it out after finishing up this post!

--

--

Tech Lead | Web Technologies | Sports and new technology enthusiast - Always, keep it simple