Full Stack Zoom Clone

Hello guys, recently I created my own clone of Zoom using node js, Express, peer js. The concepts might be a little bit difficult but I will try to explain with my best efforts. But before getting started let’s know about some of its core features:

• Intro Page to join or Host a meeting
• Video and Voice Chatting
• Text Chatting

Now, before getting started I assume you have some knowledge about node js, Html, Css, and Javascript. You can install node js from Here. I personally prefer using Visual Studio Code but you can use any IDE of your choice. Ok, now let’s install all the modules that we will be using.

Modules Explanation and Installation

First, let’s create the package.json file using the command:

npm init

It will contain all the information about your project dependencies (which are installed before your project is built). Note: type server.js when it asks you your app entry point.
Now let’s install some modules now:

• EJS

Using ejs we can pass data as javascript objects whose keys we can use in our HTML document to pass the data. But your page should be in ‘.ejs’ format. So, basically, we define our data to the template and the template renders an HTML document in which we can use the data we have defined.

Installation

npm install ejs

• UUID

UUID is used to create unique ids and we will use these unique ids to make rooms. So if a user wants to ‘Host a new meeting’, a new unique link will be created for him using UUID otherwise he can join that had been already been made once by some other user.

Installation

npm install uuid

• Express

Express is one of the most popular frameworks and is used to create single-page or multi-page web applications. It is basically used to handle requests at different routes with different methods (GET, POST, PUT, DELETE). We can also integrate different template engines with express which allows us to enter data into our HTML files(In our case we are using the Ejs template engine).
So now let’s install express

Installation

npm install express --save

• Socket.io

Socket.io is used for real-time and event-based communication between the client(browser) and sever.

Installation

npm install socket.io

• Peer js

PeerJS simplifies WebRTC peer-to-peer data, video, and audio calls. PeerJS wraps the browser’s WebRTC implementation to provide a complete, configurable, and easy-to-use peer-to-peer connection API

Firstly, so what is webrtc?
Webrtc is used for real-time media communication (Voice and Video Chat) between devices. webrtc allows us to capture the microphone, camera, or screen of the device which we can share that data with other users.

So peer js allows us to do all such features without any hard work. So, peer js wraps the browser’s webrtc implementation to basically provide a peer-to-peer connection for our voice and video chat.

If you have a doubt now, you will surely understand it in code. Now let’s install it

Installation

npm install peer

Your Package.Json might be looking like this after installing all the modules

Now let’s Start Coding

First, let’s start with the server-side coding. So, if you haven’t created your server.js file yet create it. For your reference, this will be the total file structure of this application.

File Structure of application

Let’s start coding the server.js file of our project whose explanation is below this code snippet

Server.js code

Here code is fairly simple :) I have explained all the code in the comments but just a note On the 13th line of the snippet, we are just telling express to use ejs as our template engine that we installed earlier. And express will look for our ejs file by default in the views folder(If having a doubt see the image again). But, if you want to change the views default path by:

app.set('views', path.join(__dirname, '/yourViewDirectory'));

So, create a views folder and this views folder will contain your ejs file. I have named by ejs file as ‘“room. ejs’’ but you can name it whatever you want just on the 40th line change the name accordingly.

Now, let’s create our ejs file(for the Main Clone page) which is in the views folder

Ejs File

In the 21st and the 22nd line of the file, we are just adding the variables that we need in our main.js file. We add the variables that we defined in the server.js between this format <%= varName %> to get the data. Now, let’s also add our styles.css file(for the Main Clone page) which is the static folder

Styles.css file For Ejs file

Now, you might be saying what about the HTML and CSS file for our intro page. Yea I totally forgot about that, let’s add it and call it index.html in the static folder. Again please check File Structure if any doubt

Html file for Intro Page

What about its styling now? Now, let’s add Style.css for our intro page

Style.css File For Intro Page

Ok, So this was all the CSS and HTML for this project. Now it is time for the main.js file which will be executed in the client’s browser. I have mostly examined all the code 👇👇 in the comments.

Main.js File for Client

I have explained all the above code in comments but if you have any other doubt, you can of course comment and ask. All this code is also available on my Github page. So, just clone the repo to test

So, that’s all for it. You can enhance this Zoom clone like whatever you want and test your own creativity. Like you can emit a function to change video when the user turns off his video.

Till then stay safe, stay healthy

Thank You