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.
This series of articles is structured 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:
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.
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.
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.
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.
SignalWire Video APIs provide a simple way of changing between preset video layouts. We will add that feature to our app here.
We will write code to allow screen-sharing, which, as you will find, is made incredibly easy by the SDK.
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.
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
- Video Overlays
- Highlighting a Speaker
By the end of this article, you'll have a functional clone of Zoom clone, like the one working here:
- 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:
- Backend (CodeSandbox): https://codesandbox.io/s/8gv4h
- Frontend (CodeSandbox): https://codesandbox.io/s/i4h64
- GitHub: https://github.com/signalwire/browser-videoconf-full-react/tree/extras
If you want to see a live code breakdown, explanation, and demonstration of this guide at work, click here or check it out below to watch it on YouTube! While you're there, feel free to take a look at our YouTube Channel to see other LIVEWire code and application breakdowns!
Updated 12 days ago