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 the rescue.
- Node.js v12+
- NPM v6+ (comes pre-installed with newer Node versions)
- You should have a video SDK account to generate tokens. Visit the video SDK dashboard to generate a token.
│ ├── css
│ │ ├── index.css
│ ├── js
│ ├── index.js
Step 1: Adding VideoSDK
index.html file with the
If you don’t want to use
<script ... /> you can use `npm` to install VideoSDK in your project.
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.
You can get the complete custom CSS style from here.
We will declare all the
DOM variables we will need in the
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.
- Now update your token in the
index.jsfile as shown to add the
tokenin the script and add a validator.
2. We have got the
token. Now we will add the
meetingHandler which will create or join to a meeting room.
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.
4. Now we will create the local participant view.
5. To show the remote participants, we will add the event listeners on
meeting who will notify us when a participant joins or leaves the meeting.
6. At last, we will add the event listeners to the toggle buttons and leave button.
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:
npm install -g live-server
Once you have the
live-server installed, just run it using: