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 room by allowing or denying access. Here are the steps for implementing the waiting lobby.

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• join()
• leave()
• respondEntry()

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 room
  // ...
}

GUEST Token Payload

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

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 room directly.
  • ask_join: Participants need to ask for permission to join the room. 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 Room Id

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

Refer to Generating Room Id for generating the roomId.

Initialization of Room

Pass the token of the participant who is joining to the RoomProvider. The token you provide here decides whether the participant joins the room 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 Room.

// 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";

<RoomProvider
  config={{
    roomId: "<Id-of-room>",
    participantName: "<Name-of-participant>",
    micEnabled: true,
    camEnabled: true,
  }}
  token={token}
>
  <RoomView />
</RoomProvider>;

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

On Android, request camera and microphone access with requestPermission() before you call join(), as shown in Join Room. Otherwise the camera and microphone do not start when the host admits the guest.

const { join } = useRoom();

try {
  await join();
} catch (err) {
  console.error("join failed:", err);
}

note

A participant joining with the ask_join token does not enter the room when join() is called. The onRoomJoined 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 room.

• When a participant joins as a host, they will receive an onEntryRequested event whenever a guest participant tries to join the room. The event provides an object holding the participantId and name of the guest, and the allow() and deny() functions. The host answers by calling one of them. Both return a Promise. You can also answer with the respondEntry() method of the useRoom hook, passing the participantId of the guest and a decision of "allowed" or "denied".

• When the host responds to a request, both the host and the guest will receive an onEntryResponded event with two arguments: the participantId of the guest and a decision of either allowed or denied (Constants.EntryDecision).

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

      // If you want to deny the entry request, call this instead
      // await deny();

      // respondEntry() does the same:
      // await respondEntry(participantId, "allowed");
    } catch (err) {
      console.error("entry response failed:", err);
    }
  },

  onEntryResponded: (participantId, decision) => {
    // participantId will be the ID of the participant who requested to join the room
    if (participantId === localParticipant.id) {
      // This is the response to your own request to join
      if (decision === "denied") {
        // Leave the room and navigate away from the room screen
        leave().catch((err) => console.error("leave failed:", err));
      }
      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 room automatically. Call leave() on the guest and navigate away from the room 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()
• respondEntry()
• onEntryRequested
• onEntryResponded
• onRoomJoined