Skip to main content
Version: 0.0.x

Quick Start

VideoSDK enables the opportunity to integrate video & audio calling to Web, Android, IOS applications. it provides Programmable SDKs and REST APIs to build up scalable video conferencing applications. This guide will get you running with the VideoSDK video & audio calling in minutes.

Prerequisite

Software Requirements

  • Node.js v12+
  • NPM v6+ (comes pre-installed with newer Node versions)
important

One should have a videoSDK account to generate token. Visit videoSDK dashboard to generate token

Project Structure

  1. Create one empty project using mkdir folder_name on your preferable location.
  2. Set up the structure of your project shown in the directory structure below:
Directory Structure
   root-Folder Name
├── index.html
├── assets
│ ├── css
| | ├── index.css
│ ├── js
| ├── index.js
| ├── config.js
  1. To run your project; install live-server using the following command.
npm install -g live-server
  1. SDK Integration
<html>
<head>
....
</head>
<body>
.....
<script src="https://sdk.videosdk.live/js-sdk/0.0.41/videosdk.js"></script>
</body>
</html>

Start Writing Your Code

Step 1 : Create UI

For this tutorial, we have made use of bootstrap and index.css file for making UI a bit responsive. Refer assets/index.css file from here for basic css effects

index.html
<html>
<head>
<!--favicon-->
<link
rel="shortcut icon"
href="https://videosdk.live/favicon/favicon.ico"
/>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./assets/css/index.css" />
<!--add necessary bootstrap links here -->
...
</head>
<body class="bg-secondary">
<!--join-screen-->
<div
id="join-screen"
class="flex flex-row align-items-center justify-content-center h-100"
>
<button
class="btn btn-primary"
id="btnCreateMeeting"
onclick="meetingHandler(true)"
>
New Meeting
</button>

<input
type="text"
id="txtMeetingCode"
placeholder="Enter Meeting Code .."
/>
<button
id="btnJoinMeeting"
onclick="meetingHandler(false)"
class="btn btn-primary"
>
Join
</button>
</div>
<!--grid-screen-->
...
<!--scripts-->
<script src="./assets/js/config.js"></script>
<script src="./assets/js/index.js"></script>
<script src="https://sdk.videosdk.live/js-sdk/0.0.41/videosdk.js"></script>
</body>
</html>
index.html
<!--grid screen-->
<div id="grid-screen">
<div>
<input
type="text"
class="form-control navbar-brand"
id="lblMeetingId"
readonly
/>
<button class="btn btn-dark" id="btnToggleMic">Unmute Mic</button>
<button class="btn btn-dark" id="btnToggleWebCam">Disable Webcam</button>
<button class="btn btn-dark" id="btnLeaveMeeting">Leave Meeting</button>
</div>
<br />
<div id="videoContainer"></div>
<div
style="
position: absolute;
top: 10px;
right: 0px;
height: 50%;
overflow-y: scroll;
"
>
<h3>Participants List</h3>
<div id="participantsList"></div>
</div>
</div>

Step 2 : Meeting Initialisation

  • config.js file : set token in this file which is generated from here.
config.js
TOKEN = "";
  • Now you have your token; to create a meeting make use of API_BASE_URL mentioned below in index.js file
setting up API_BASE_URL in index.js
const API_BASE_URL = "https://api.videosdk.live";
  • validate your token, whether it is empty or not
token validation index.js
//variables
let token = "";

//handlers
async function tokenValidation() {
if (TOKEN != "") {
token = TOKEN;
} else {
alert("Please Provide Your Token First");
}
}
  • After checking your token now it's time to create a meeting that will generate one meeting object made up of multiple parameters.
  • The code below in the code block says that if newMeeting parameter of a meetingHandler set to true, meeting will be created and if you have meetingId then you can set newMeeting to false and join operation will be performed.
create and validate meeting index.js
//variables
let meetingId = "";

async function meetingHandler(newMeeting) {
let joinMeetingName = "JS-SDK";

//request permission for accessing media(mic/webcam)
navigator.mediaDevices
.getUserMedia({
video: true,
audio: true,
})
.then((stream) => {});

//token validation
tokenValidation();
if (newMeeting) {
const url = `${API_BASE_URL}/api/meetings`;
const options = {
method: "POST",
headers: { Authorization: token, "Content-Type": "application/json" },
};

const { meetingId } = await fetch(url, options)
.then((response) => response.json())
.catch((error) => alert("error", error));
document.getElementById("lblMeetingId").value = meetingId;
document.getElementById("home-screen").style.display = "none";
document.getElementById("grid-screen").style.display = "inline-block";
startMeeting(token, meetingId, joinMeetingName);
} else {
meetingId = document.getElementById("txtMeetingCode").value;
document.getElementById("lblMeetingId").value = meetingId;
document.getElementById("home-screen").style.display = "none";
document.getElementById("grid-screen").style.display = "inline-block";
startMeeting(token, meetingId, joinMeetingName);
}
}
  • so far you have created a meeting and to start a meeting;startMeeting handler is there.
startMeeting index.js
//DOM elements
let btnCreateMeeting = document.getElementById("btnCreateMeeting");
let btnJoinMeeting = document.getElementById("btnJoinMeeting");
let videoContainer = document.getElementById("videoContainer");
let btnLeaveMeeting = document.getElementById("btnLeaveMeeting");
let btnToggleMic = document.getElementById("btnToggleMic");
let btnToggleWebCam = document.getElementById("btnToggleWebCam");

function startMeeting(token, meetingId, name) {
// Meeting config
window.VideoSDK.config(token);

// Meeting Init
meeting = window.VideoSDK.initMeeting({
meetingId: meetingId, // required
name: name, // required
micEnabled: true, // optional, default: true
webcamEnabled: true, // optional, default: true
maxResolution: "hd", // optional, default: "hd"
});

//join meeting
meeting.join();

//all remote participants
participants = meeting.participants;

//create Local Participant
createParticipant(meeting.localParticipant.id);

//local participant stream-enabled
meeting.localParticipant.on("stream-enabled", (stream) => {
setTrack(
stream,
localParticipant,
localParticipantAudio,
meeting.localParticipant.id
);
});

//remote participant joined
meeting.on("participant-joined", (participant) => {...});

//remote participants left
meeting.on("participant-left", (participant) => {...});

addDomEvents();
}

function setTrack(stream, videoElem, audioElement, id) {...}
  • Write a method createParticipant which will create both local and remote participants.
index.js
...
//createParticipant
function createParticipant(participant) {

//create videoElem of participant
let participantVideo = createVideoElement(
participant.id,
participant.displayName
);

//create audioEle of participant
let participantAudio = createAudioElement(participant.id);

//append video and audio of participant to videoContainer div
videoContainer.appendChild(participantVideo);
videoContainer.appendChild(participantAudio);
}

// creating video element
function createVideoElement(id, name) {
let videoFrame = document.createElement("div");
videoFrame.classList.add("video-frame");

//create video
let videoElement = document.createElement("video");
videoElement.classList.add("video");
videoElement.setAttribute("id", `v-${id}`);
videoElement.setAttribute("autoplay", true);
videoFrame.appendChild(videoElement);

//add overlay
let overlay = document.createElement("div");
overlay.classList.add("overlay");
overlay.innerHTML = `Name : ${name}`;

videoFrame.appendChild(overlay);
return videoFrame;
}

// creating audio element
function createAudioElement(pId) {
let audioElement = document.createElement("audio");
audioElement.setAttribute("autoPlay", false);
audioElement.setAttribute("playsInline", "false");
audioElement.setAttribute("controls", "false");
audioElement.setAttribute("id", `a-${pId}`);
audioElement.style.display = "none";
return audioElement;
}
  • participant-joined event is called when other participants join the meeting and participant-left event is called when participants leave the meeting.
index.js
function startMeeting(token, meetingId, name) {
...

//participant joined
meeting.on("participant-joined", (participant) => {
createParticipant(participant);
participant.on("stream-enabled", (stream) => {
console.log("Stream ENable : ", stream);
setTrack(
stream,
document.querySelector(`#v-${participant.id}`),
document.getElementById(`a-${participant.id}`),
participant.id
);
});
});

// participants left
meeting.on("participant-left", (participant) => {
let vElement = document.querySelector(`#v-${participant.id}`);
vElement.parentNode.removeChild(vElement);
let aElement = document.getElementById(`a-${participant.id}`);
aElement.parentNode.removeChild(aElement);
participants = new Map(meeting.participants);
//remove it from participant list participantId;
document.getElementById(`p-${participant.id}`).remove();
});
}
  • To manage streams (audio/video) of any participant , create setTrack handler.
index.js
function setTrack(stream, videoElem, audioElement, id) {
if (stream.kind == "video") {
const mediaStream = new MediaStream();
mediaStream.addTrack(stream.track);
videoElem.srcObject = mediaStream;
videoElem
.play()
.catch((error) =>
console.error("videoElem.current.play() failed", error)
);
}
if (stream.kind == "audio") {
if (id == meeting.localParticipant.id) return;
const mediaStream = new MediaStream();
mediaStream.addTrack(stream.track);
audioElement.srcObject = mediaStream;
audioElement
.play()
.catch((error) => console.error("audioElem.play() failed", error));
}
}
  • To manage some common functionalities such as toggleMic and toggleWebcam add dom element events as shown below.
index.js
function addDomEvents() {
btnToggleMic.addEventListener("click", () => {
if (btnToggleMic.innerText == "Unmute Mic") {
meeting.unmuteMic();
btnToggleMic.innerText = "Mute Mic";
} else {
meeting.muteMic();
btnToggleMic.innerText = "Unmute Mic";
}
});

btnToggleWebCam.addEventListener("click", () => {
if (btnToggleWebCam.innerText == "Disable Webcam") {
meeting.disableWebcam();
btnToggleWebCam.innerText = "Enable Webcam";
} else {
meeting.enableWebcam();
btnToggleWebCam.innerText = "Disable Webcam";
}
});

btnLeaveMeeting.addEventListener("click", async () => {
// leavemeeting
meeting.leave();
document.getElementById("join-screen").style.display = "inline-block";
document.getElementById("grid-screen").style.display = "none";
});
}
note

Stuck anywhere? Check out this example code on GitHub

Run your code

Once you are all set with the steps mentioned above run your application as mentioned in the code-block below.

live-server --port=8000

It's outcome will look like this

JS-Join Screen JS-Grid Screen

caution

For this tutorial purpose, we used a static token to initialize and join the meeting. But for the production version of the app, we recommend you use an Authentication Server that will generate and pass on the token to the Client App. For more details checkout how to do server setup.