Waiting Lobby - Javascript

Overview

With our Javascript SDK, you can implement a waiting lobby feature, which allows the host to control which participants can join the meeting by allowing or denying access. Here are the steps for implementing the waiting lobby.

Generating Tokens in Your Backend

Your server should generate access tokens using your API key and secret. Two different tokens need to be generated with different permissions:

HOST Token Payload

{
  // ...
  apikey: API_KEY, // Your API key
  permissions: ['allow_join'], // Permission to directly join the meeting
  // ...
}

GUEST Token Payload

{
  // ...
  apikey: API_KEY, // Your API key
  permissions: ['ask_join'], // Permission to ask the host for permission to join the meeting
  // ...
}

Explanation of parameters:

• apikey (Mandatory): Your API key generated from the VideoSDK Dashboard, which can be obtained here.

• permissions (Mandatory): Permissions that control participant activity. Available permissions include:

  • allow_join: Participants are allowed to join the meeting directly.
  • ask_join: Participants need to ask for permission to join the meeting. Participants with the allow_join permission can accept or reject others' join requests.
  • allow_mod: Participants are allowed to toggle webcam and mic of other participants.

Then, sign this payload with your SECRET KEY and use the HS256 algorithm. For more details on authentication and tokens, refer to this guide.

Generating Meeting Id

With the tokens ready, you can obtain the meetingId from the VideoSDK's rooms API, which can be found here.

Refer to this guide for generating the meetingId.

Initialization of Meeting

Initialize the meeting using the initMeeting method of the VideoSDK class. The initMeeting is responsible for setting up the meeting with the provided configuration, including the meetingId, participantId, and more.

For detailed configuration options, check here.

// If a participant joins as a host, provide them with the "allow_join" permission token.
// Otherwise, provide the "ask_join" permission token.
VideoSDK.config(
  isHost ? "allow_join token will be here" : "ask_join token will be here"
);

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
});

note

A participant joining with the ask_join token does not enter the meeting when join() is called. The meeting-joined event is emitted only after the host allows the request.

Events associated with Waiting Lobby

The following events are received when a participant tries to join the meeting.

• When a participant joins as a host, they will receive an entry-requested event whenever a guest participant tries to join the meeting. The event provides an object holding the participantId and name of the guest, along with the allow() and deny() functions the host calls to respond to the request.

• When the host responds to a request, both the host and the guest will receive an entry-responded event with the participantId of the guest and a decision of either allowed or denied.

meeting.on("entry-requested", (data) => {
  const { participantId, name, allow, deny } = data;

  console.log(`${name} requested to join the meeting.`);

  // If you want to allow the entry request
  allow();

  // if you want to deny the entry request
  deny();
});

meeting.on("entry-responded", (participantId, decision) => {
  // participantId will be id of participant who requested to join meeting
  if (participantId === meeting.localParticipant.id) {
    // This is the response to your own request to join
    if (decision === "denied") {
      // Leave the meeting and navigate away from the meeting screen
      meeting.leave();
    }
    return;
  }

  // The response is for a guest's request
  if (decision === "allowed") {
    // entry allowed
  } else {
    // entry denied
  }
});

note

entry-responded is emitted to every participant whose token includes the allow_join permission and to the participant who requested to join, including a participant receiving their own participantId with a decision of allowed. Check the participantId and the decision before treating this event as a response to a guest's request.

caution

A guest whose request is denied is not disconnected from the meeting automatically. Call meeting.leave() on the guest and navigate away from the meeting screen when the decision is denied.

API Reference

Here are the API references for all the methods and events used in this guide:

• MeetingClass
• join()
• onentryrequested()
• onentryresponded()

tip

You can find a complete quick start example for the waiting lobby here.