Build a JavaScript Video Chat App with VideoSDK
Tags: javascript, webrtc, beginners, tutorial
Published: 2022-02-28 14:01:14

We have seen a major increase in the usage of virtual meetings in the past year and the existing platforms cannot cater to everyone's custom needs. Also, building a custom feature-rich solution for your need from scratch is not a great option as you need to manage a lot of tasks, this is where **VideoSDK.live** comes to rescue.

With **video SDK** you can build a customized Video Chat App with all features your need. We will see in this guide, how you can build a video chat app using **Javascript**.

## Prerequisites

* Node.js v12+
* NPM v6+ (comes pre-installed with newer Node versions)
* You should have a video SDK account to generate token. Visit video SDK [dashboard](https://app.videosdk.live/api-keys) to generate token.

## Project Structure

```
root
 ├── index.html
 ├── assets
 │    ├── css
 │    │    ├── index.css
 │    ├── js
 │         ├── index.js
```

## Implementation

### Step 1: Adding VideoSDK 

Update the `index.html` file with the `<script ... />` as shown to add the Javascript SDK to your project.

{% embed https://gist.github.com/rajansurani/b9add8ce88bf3d67da9acec0fbd0acc7.js %}

If you don't want to use `<script ... />` you can use `npm` to install video SDK in your project.

```powershell
npm install @videosdk.live/js-sdk

//or you can use yarn
yarn add @videosdk.live/js-sdk
```

### Step 2: Creating the UI

For the interface, we will have simple Join and Create Meeting meeting buttons which will join and create a new meeting room respectively.
The meeting room will show the local participant view, remote participant view and show buttons to toggle mic, webcam, and leave the meeting. 

{% embed https://gist.github.com/rajansurani/f8ccc2f331021f47e20a6f8b8f43898b.js %}

You can get the complete custom [CSS style from here](https://gist.github.com/rajansurani/eaf2e4b6f6d7d446f3b977aad6761f22).

We will declare all the DOM variables we will need in the `index.js` file.

{% embed https://gist.github.com/rajansurani/2995d4b3aad3fd78aebcb7240ea2f538.js %}

### Step 3: Meeting Implementation

To start the meeting implementation, we will need the token  so if you don't have one, you can generate it from [here](https://app.videosdk.live/api-keys).

1. Now update your token in the `index.js` file as shown to add the token in the script and add a validator.
{% embed https://gist.github.com/rajansurani/1ee3d1a4ce9860e28031b88a5230028b.js %}

2. We have got the token. Now we will add the meetingHandler which will create or join to a meeting room.
{% embed https://gist.github.com/rajansurani/d138000bb0f549c5b653927fbe670579.js %}

3. Now the meetingId is either generated or updated with the value user entered. After this, startMeeting is triggered which is responsible to initialize the meeting with the required configuration and join the meeting.
{% embed https://gist.github.com/rajansurani/382b84aacc4b42446d72f842e8807b50.js %}

4. Now we will create the local participant view.
{% embed https://gist.github.com/rajansurani/6e4f072a5da4ad46d99c22d0338f192c.js %}

5. To show the remote participants, we will add the event listeners on meeting which will notify us when a participant joins or leaves the meeting.
{% embed https://gist.github.com/rajansurani/71f4b8b4ee28ecc3d5febdc546f41271.js %}

6. At last, we will add the event listeners to the toggle buttons and leave button.
{% embed https://gist.github.com/rajansurani/de28f5dc7209f3381c764521fdd9f4fa.js %}

### Run and Test
To run the app you will need `live-server`. If you don't have it installed already you can do it using:

```powershell
npm install -g live-server
```

Once you have the `live-server` installed, just run it using:

```powershell
live-server
```

## Conclusion

With this, we successfully built the video chat app using the video SDK in Javascript. If you wish to add functionalities like chat messaging, screen sharing, you can always check out our [documentation](https://docs.videosdk.live/). If you face any difficulty with the implementation you can connect with us on our [discord community](https://discord.gg/Gpmj6eCq5u).