Initialise Meeting - Javascript

To configure a VideoSDK meeting you require two things, first the token which will be used for Authentication purpose and a meetingId which will be used to specify where a participant will join. Examine each of the steps closely.

Generating Token

You can generate a token in two ways:

1. Temporary Token : You can visit Dashboard's API Key section and generate a temporary token from there.

2. Server : You can setup JWT in backend and make an API call to get the token from your server.

To learn more about Authentication and token in detail you can follow this guide.

// With Temporary Token
const getToken = async () => {
  // Update the token here from the VideoSDK dashboard
  let token = "YOUR_TOKEN";
};

// Server
const getToken = async () => {
  const response = await fetch(`http://localhost:3000/get-token`, {
    method: "GET",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
  });
  const { token } = await response.json();
  return token;
};

Generating Meeting Id

With the token ready, you can now get the meetingId from the VideoSDK's rooms API.

const getMeetingId = async (token) => {
  try {
    //Use VideoSDK rooms API endpoint to create a meetingId
    const VIDEOSDK_API_ENDPOINT = `https://api.videosdk.live/v2/rooms`;
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        // Pass the token in the headers
        Authorization: token,
      },
    };
    const meetingId = await fetch(VIDEOSDK_API_ENDPOINT, options)
      .then(async (result) => {
        const { roomId } = await result.json();
        return roomId;
      })
      .catch((error) => console.log("error", error));

    //Return the meetingId which we got from the response of the api
    return meetingId;
  } catch (e) {
    console.log(e);
  }
};

Initialization of Meeting

You can initialize the meeting using the initMeeting method of the VideoSDK class. The initMeeting is responsible for initializing the meeting with the provided configuration, which includes the meetingId, participantId and many more.

tip

When conducting one-to-one meetings, it is recommended to set multistream:false.For more information on multistream, refer to the multistream documentation.

Take a deeper look at the available configuration options first.

VideoSDK.config(token);

const meeting = VideoSDK.initMeeting({
  meetingId: "<Id-of-meeting>",
  name: "<Name-of-participant>",
  micEnabled: "<Flag-to-enable-mic>",
  webcamEnabled: "<Flag-to-enable-webcam>",
  participantId: "Id-of-participant", // optional, default: SDK will generate
  multistream: true,
});

• meetingId :

  • This is a unique identifier that allows participants to join a specific meeting or room.
  • It will be in the format of xxx-yyy-zzz and will be generated using the VideoSDK's Room API.

• name:

  • This represents the name of the participant in the meeting.
  • It will accept String type value.

• micEnabled:

  • This is a boolean flag, indicating whether a participant's microphone will be automatically enabled when they join a meeting.

• webcamEnabled:

  • This is a boolean flag, indicating whether a participant's webcam will be automatically enabled when they join a meeting.

• metaData:

  • If you want to provide additional details about a user joining a meeting, such as their profile image, you can pass that information in this parameter.
  • It has to be of Object type.
  • This is an OPTIONAL parameter.

• participantId:

  • This is a unique identifier for the participant's inside the meeting.

    • It can be used to specify the unique identifier which can be linked with your own database service.
    • It has to be of String type.
    • This is an OPTIONAL parameter. By default VideoSDK will generate unique id for each participant.

• multistream:

  • This is a boolean flag, indicating whether the stream should send multiple resolution layers or a single resolution layer.

• debugMode

  • This is a boolean flag that determines whether the user can view detailed error logs directly on the VideoSDK's dashboard.

    • This is an OPTIONAL parameter. By default, the user is enabled to view detailed error logs on the VideoSDK's dashboard.

caution

You must ensure that the participantId is not repeated in the same meeting or room. This will enable VideoSDK to eliminate any participant associated with that participantId.

To know more about other properties, you can follow our API Reference.

import { VideoSDK } from "@videosdk.live/js-sdk";

let meeting;

const getToken = async () => {
  ...
};

const getMeetingId = async (token) => {
  ...
};

async function startMeeting() {
  const token = await getToken();
  const meetingId = await getMeetingId(token);

  // Configure authentication token
  VideoSDK.config(token);

  // Initialise meeting
  meeting = VideoSDK.initMeeting({
    meetingId: meetingId,
    name: "YOUR_NAME",
    micEnabled: true,
    webcamEnabled: true,
  });
}

API Reference

The API references for all the methods utilized in this guide are provided below.

• Meeting Class