Making a Zoom Clone with SignalWire Video API

SignalWire Video REST API and SignalWire Video JS SDK combine to form a powerful and flexible service that you can use to write sophisticated video conferencing applications in no time. In this series of articles, we will try to build a functional zoom clone from scratch.

SignalWire Video APIs and its JavaScript SDK form a powerful and flexible toolset that will help you create robust video conferencing or video calling systems without having to worry about the plethora of complicated details like: setting up or renting your own communication infrastructure, making sense of the ever-elusive WebRTC specs and implementations, making sure everything is scalable and supports all major browsers and so much more.

SignalWire Video JS SDK runs on the user’s browser, and integrates well with React, a popular frontend framework. In this series of articles, we’ll create a functional Zoom clone using React and SignalWire Video APIs.

The application we will be building,The application we will be building,

The application we will be building,

This series of articles is structured as to start with the basics and gradually build up features using SignalWire's Video SDK. Below is an overview of the steps we will be taking:

Before we get started

These articles assume that you have a basic understanding of React. If you aren't familiar with React, you should start by reading its documentation. It is a widely used frontend framework, and it will help keep complex UI projects readable and maintainable.

You should also go through the Getting Started with the SignalWire Video API guide first. This is to ensure that you are familiar with the basics of the SignalWire Video API and how it is designed before start doing more interesting things.

The demos for the apps will be hosted on CodeSandbox, which is a free online code editor that allows you to try and tinker with JavaScript and Node.js code without leaving your browser and without having to install anything locally.

Parts:

  1. Writing a backend to proxy SignalWire Video REST API
    First we will write the very minimal backend code in Node.js. It is the simplest part of the software, as all it has to do is proxy SignalWire's Video REST API.

  2. Writing a basic React frontend
    We will write a simple React frontend that will automatically join us to a default room. This will act as the foundation for building more features.

  3. Working with microphones, cameras and speakers
    In this part, we will add the ability to pick between webcams, microphones and speakers. We will also write a way for the lists to be updated as new devices are plugged or unplugged.

  4. Changing Layouts
    SignalWire Video APIs provide a simple way of changing between preset video layouts. We will add that feature to our app here.

  5. Sharing Screen
    We will write code to allow screen-sharing, which, as you will find, is made incredibly easy by the SDK.

  6. Listing, Muting and Unmuting Members
    In this part, we will list all the members in the video, and allow moderators to control the members' visibility. We will also add the ability to mute/unmute self.

  7. Going Beyond
    In this final part we will show how to add extra features to our application, such as recording and room switching. These extra features are not included in the basic version of the app, but we thought you might be interested anyway. We will provide GitHub and CodeSandbox links for the extended app, separated from those of the basic app.
    - Dynamic room switching
    - Recordings
    - Video Overlays

By the end of this article, you'll have a functional clone of Zoom clone, like the one working here:

Backend: https://codesandbox.io/s/lr3ti
Frontend: https://codesandbox.io/s/yf7jm

  • Please make sure the backend CodeSandbox is working before using the frontend, because that is what supplies the token for the frontend.

The full source code is hosted on SignalWire's GitHub at SignalWire/browser-videoconf-full-react

If you want to take a look at the extra features too, follows these links instead:


Did this page help you?