Waiting Lobby - React Native

Overview

With our React Native 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 Authentication and Tokens.

Generating Meeting Id

With the tokens ready, you can now obtain the meetingId from the VideoSDK's rooms API, which can be found in Create a Room.

Refer to Generating Meeting Id for generating the meetingId.

Initialization of Meeting

Pass the token of the participant who is joining to the MeetingProvider. The token you provide here decides whether the participant joins the meeting directly or waits in the lobby, so provide the allow_join token to a host and the ask_join token to a guest.

For detailed configuration options, check Initialization of Meeting.

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

<MeetingProvider
  config={{
    meetingId: "<Id-of-meeting>",
    name: "<Name-of-participant>",
    micEnabled: true,
    webcamEnabled: true,
  }}
  token={token}
></MeetingProvider>;

Call join() when the participant is ready to enter the meeting.

const { join } = useMeeting();

join();

note

A participant joining with the ask_join token does not enter the meeting when join() is called. The onMeetingJoined 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 onEntryRequested 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 onEntryResponded event with the participantId of the guest and a decision of either allowed or denied.

const { join, leave, localParticipant } = useMeeting({
  // The host receives this event when a guest requests to join the meeting
  onEntryRequested: ({ participantId, name, allow, deny }) => {
    // If you want to allow the entry request
    allow();

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

  onEntryResponded: (participantId, decision) => {
    // participantId will be the ID of the participant who requested to join the meeting
    if (participantId === 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
        leave();
      }
      return;
    }

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

note

onEntryResponded 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 leave() on the guest and navigate away from the meeting screen when the decision is denied.

API Reference

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

• join()
• leave()
• onEntryRequested
• onEntryResponded
• onMeetingJoined