Skip to main content
Version: 1.x.x

Quick Start for Conference in Javascript

VideoSDK empowers you to seamlessly integrate the video calling feature into your Javascript application within minutes.

In this quickstart, you'll explore the group calling feature of VideoSDK. Follow the step-by-step guide to integrate it within your application.

Prerequisites​

Before proceeding, ensure that your development environment meets the following requirements:

  • Video SDK Developer Account (Not having one, follow Video SDK Dashboard)
  • Have Node and NPM installed on your device.
important

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

Getting Started with the Code!​

Follow the steps to create the environment necessary to add video calls into your app. You can also find the code sample for quickstart here.

First create one empty project using mkdir folder_name on your preferable location.

Install Video SDK​

Import VideoSDK using the <script> tag or Install it using the following npm command. Make sure you are in your app directory before you run this command.

<html>
  <head>
    <!--.....-->
  </head>
  <body>
    <!--.....-->
    <script src="https://sdk.videosdk.live/js-sdk/1.1.1/videosdk.js"></script>
  </body>
</html>

Structure of the project​

Your project structure should look like this.

Project Structure
  root
   ├── index.html
   ├── config.js
   ├── index.js

You will be working on the following files:

  • index.html: Responsible for creating a basic UI.
  • config.js: Responsible for storing the token.
  • index.js: Responsible for rendering the meeting view and the join meeting functionality.

Step 1: Design the user interface (UI)​

1
Design the user interface (UI)

Create an HTML file containing the screens, join-screen and grid-screen.

index.html
<!DOCTYPE html>
<html>
  <head> </head>

  <body>
    <div id="join-screen">
      <!-- Create new Meeting Button -->
      <button id="createMeetingBtn">New Meeting</button>
      OR
      <!-- Join existing Meeting -->
      <input type="text" id="meetingIdTxt" placeholder="Enter Meeting id" />
      <button id="joinBtn">Join Meeting</button>
    </div>

    <!-- for Managing meeting status -->
    <div id="textDiv"></div>

    <div id="grid-screen" style="display: none">
      <!-- To Display MeetingId -->
      <h3 id="meetingIdHeading"></h3>

      <!-- Controllers -->
      <button id="leaveBtn">Leave</button>
      <button id="toggleMicBtn">Toggle Mic</button>
      <button id="toggleWebCamBtn">Toggle WebCam</button>

      <!-- render Video -->
      <div class="row" id="videoContainer"></div>
    </div>

    <!-- Add VideoSDK script -->
    <script src="https://sdk.videosdk.live/js-sdk/1.1.1/videosdk.js"></script>
    <script src="config.js"></script>
    <script src="index.js"></script>
  </body>
</html>

Output​

Step 2: Implement Join Screen​

2
Implement Join Screen

Configure the token in the config.js file, which you can obtain from the VideoSDK Dashbord.

config.js
// Auth token will be used to generate a meeting and connect to it
TOKEN = "Your_Token_Here";

Next, retrieve all the elements from the DOM and declare the following variables in the index.js file, along with a small showJoinScreen() helper that returns the user to the join screen with a status message whenever creating or joining a meeting fails. Then, add an event listener to the join and create meeting buttons.

index.js
// Getting Elements from DOM
const joinButton = document.getElementById("joinBtn");
const leaveButton = document.getElementById("leaveBtn");
const toggleMicButton = document.getElementById("toggleMicBtn");
const toggleWebCamButton = document.getElementById("toggleWebCamBtn");
const createButton = document.getElementById("createMeetingBtn");
const videoContainer = document.getElementById("videoContainer");
const textDiv = document.getElementById("textDiv");

// Declare Variables
let meeting = null;
let meetingId = "";
let isMicOn = false;
let isWebCamOn = false;

function showJoinScreen(message) {
  document.getElementById("join-screen").style.display = "block";
  document.getElementById("grid-screen").style.display = "none";
  textDiv.textContent = message ?? "";
}

async function initializeMeeting() {}

function createLocalParticipant() {}

function createVideoElement() {}

function createAudioElement() {}

function setTrack() {}

// Join Meeting Button Event Listener
joinButton.addEventListener("click", async () => {
  document.getElementById("join-screen").style.display = "none";
  textDiv.textContent = "Joining the meeting...";

  roomId = document.getElementById("meetingIdTxt").value;
  meetingId = roomId;

  await initializeMeeting();
});

// Create Meeting Button Event Listener
createButton.addEventListener("click", async () => {
  document.getElementById("join-screen").style.display = "none";
  textDiv.textContent = "Please wait, we are joining the meeting";

  // API call to create meeting
  const url = `https://api.videosdk.live/v2/rooms`;
  const options = {
    method: "POST",
    headers: { Authorization: TOKEN, "Content-Type": "application/json" },
  };

  try {
    const response = await fetch(url, options);
    if (!response.ok) {
      throw new Error(`Failed to create meeting: ${response.status}`);
    }
    const { roomId } = await response.json();
    meetingId = roomId;
    await initializeMeeting();
  } catch (error) {
    console.error("Failed to create meeting", error);
    showJoinScreen(
      "Unable to create the meeting. Check your token and try again."
    );
  }
});

Step 3: Initialize meeting​

3
Initialize meeting

Following that, initialize the meeting using the initMeeting() function, register all the event handlers, and then join the meeting. Registering the handlers before calling join() ensures no event is missed.

From v1.0.0, all these methods are asynchronous and return a Promise, so await them and handle failures with try / catch. For details, see the Migration Guide.

index.js
// Initialize meeting
async function initializeMeeting() {
  try {
    // VideoSDK.config and initMeeting are synchronous in 1.x — no await.
    window.VideoSDK.config(TOKEN);

    meeting = window.VideoSDK.initMeeting({
      meetingId: meetingId, // required
      name: "Thomas Edison", // required
      micEnabled: true, // optional, default: true
      webcamEnabled: true, // optional, default: true
    });

    // Creating local participant
    createLocalParticipant();

    // Register all event handlers before joining so no event is missed.
    // Setting local participant stream
    meeting.localParticipant.on("stream-enabled", (stream) => {
      setTrack(stream, null, meeting.localParticipant, true);
    });

    // meeting joined event
    meeting.on("meeting-joined", () => {
      textDiv.textContent = null;

      document.getElementById("grid-screen").style.display = "block";
      document.getElementById(
        "meetingIdHeading"
      ).textContent = `Meeting Id: ${meetingId}`;
    });

    // meeting left event
    meeting.on("meeting-left", () => {
      videoContainer.innerHTML = "";
    });

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

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

    // `join()` resolves when the join request is accepted — wait for the
    // `meeting-joined` event before calling other meeting methods.
    await meeting.join();
  } catch (error) {
    console.error("Failed to initialize meeting", error);
    videoContainer.innerHTML = "";
    showJoinScreen("Unable to join the meeting. Please try again.");
  }
}
note

await meeting.join() resolves when the join request is accepted — not when the meeting is fully joined. Wait for the meeting-joined event before calling other meeting methods.

Output​

Step 4: Create the Media Elements​

4
Create the Media Elements

In this step, Create a function to generate audio and video elements for displaying both local and remote participants. Set the corresponding media track based on whether it's a video or audio stream.

// creating video element
function createVideoElement(pId, name) {
  let videoFrame = document.createElement("div");
  videoFrame.setAttribute("id", `f-${pId}`);

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

  let displayName = document.createElement("div");
  displayName.innerHTML = `Name : ${name}`;

  videoFrame.appendChild(displayName);
  return videoFrame;
}

// creating audio element
function createAudioElement(pId) {
  let audioElement = document.createElement("audio");
  audioElement.setAttribute("autoPlay", "false");
  audioElement.setAttribute("playsInline", "true");
  audioElement.setAttribute("controls", "false");
  audioElement.setAttribute("id", `a-${pId}`);
  audioElement.style.display = "none";
  return audioElement;
}

// creating local participant
function createLocalParticipant() {
  let localParticipant = createVideoElement(
    meeting.localParticipant.id,
    meeting.localParticipant.displayName
  );
  videoContainer.appendChild(localParticipant);
}

// setting media track
function setTrack(stream, audioElement, participant, isLocal) {
  if (stream.kind == "video") {
    isWebCamOn = true;
    const mediaStream = new MediaStream();
    mediaStream.addTrack(stream.track);
    let videoElm = document.getElementById(`v-${participant.id}`);
    videoElm.srcObject = mediaStream;
    videoElm
      .play()
      .catch((error) =>
        console.error("videoElem.current.play() failed", error)
      );
  }
  if (stream.kind == "audio") {
    if (isLocal) {
      isMicOn = true;
    } else {
      const mediaStream = new MediaStream();
      mediaStream.addTrack(stream.track);
      audioElement.srcObject = mediaStream;
      audioElement
        .play()
        .catch((error) => console.error("audioElem.play() failed", error));
    }
  }
}

Step 5: Handle participant events​

5
Handle participant events

Thereafter, implement the events related to the participants and the stream. These handlers replace the placeholders in initializeMeeting() and, like the other handlers, are registered before await meeting.join().

Following are the events to be executed in this step:

  1. participant-joined: When a remote participant joins, this event will trigger. In the event callback, create video and audio elements previously defined for rendering their video and audio streams.

  2. participant-left: When a remote participant leaves, this event will trigger. In the event callback, remove the corresponding video and audio elements.

  3. stream-enabled: This event manages the media track of a specific participant by associating it with the appropriate video or audio element.

index.js
// Initialize meeting
async function initializeMeeting() {
  try {
    // ...

    // participant joined
    meeting.on("participant-joined", (participant) => {
      let videoElement = createVideoElement(
        participant.id,
        participant.displayName
      );
      let audioElement = createAudioElement(participant.id);
      // stream-enabled
      participant.on("stream-enabled", (stream) => {
        setTrack(stream, audioElement, participant, false);
      });
      videoContainer.appendChild(videoElement);
      videoContainer.appendChild(audioElement);
    });

    // participants left
    meeting.on("participant-left", (participant) => {
      let vElement = document.getElementById(`f-${participant.id}`);
      vElement.remove(vElement);

      let aElement = document.getElementById(`a-${participant.id}`);
      aElement.remove(aElement);
    });

    await meeting.join();
  } catch (error) {
    // ...
  }
}

Output​

Step 6: Implement Controls​

6
Implement Controls

Next, implement the meeting controls such as toggleMic, toggleWebcam and leave meeting.

index.js
// leave Meeting Button Event Listener
leaveButton.addEventListener("click", async () => {
  try {
    await meeting?.leave();
  } catch (error) {
    console.error("Failed to leave meeting", error);
  }
  document.getElementById("grid-screen").style.display = "none";
  document.getElementById("join-screen").style.display = "block";
});

// Toggle Mic Button Event Listener
toggleMicButton.addEventListener("click", async () => {
  try {
    if (isMicOn) {
      // Disable Mic in Meeting
      await meeting?.muteMic();
    } else {
      // Enable Mic in Meeting
      await meeting?.unmuteMic();
    }
    isMicOn = !isMicOn;
  } catch (error) {
    console.error("Failed to toggle mic", error);
  }
});

// Toggle Web Cam Button Event Listener
toggleWebCamButton.addEventListener("click", async () => {
  try {
    if (isWebCamOn) {
      await meeting.disableWebcam();
    } else {
      await meeting.enableWebcam();
    }
  } catch (error) {
    console.error("Failed to toggle webcam", error);
    return;
  }

  isWebCamOn = !isWebCamOn;
  const vElement = document.getElementById(`f-${meeting.localParticipant.id}`);
  if (vElement) {
    vElement.style.display = isWebCamOn ? "inline" : "none";
  }
});

Run your code​

Once you have completed all the steps mentioned above, run your application using the code block below.

live-server --port=8000

Final Output​

You have completed the implementation of a customized video calling app in Javascript using VideoSDK. To explore more features, go through Basic and Advanced features.


tip

You can checkout the complete quick start example here.

Got a Question? Ask us on discord

Last updated on by ishabodiwala
Previous
Precall Setup
Next

Was this helpful?