Invite Guest on Stage - Javascript

This guide explains the process of inviting a viewer to join a livestream using the changeMode() method.

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.

• publish()
• changeMode()
• subscribe()

note

Before proceeding with this guide, ensure that all attendees join the meeting with the mode set to SIGNALLING_ONLY, while the host joins with the mode set to SEND_AND_RECV.

info

Important Changes Javascript SDK in Version v0.1.4

• The following modes have been deprecated:
• CONFERENCE has been replaced by SEND_AND_RECV
• VIEWER has been replaced by SIGNALLING_ONLY

Please update your implementation to use the new modes.

⚠️ Compatibility Notice:
To ensure a seamless meeting experience, all participants must use the same SDK version.
Do not mix version v0.1.4 + with older versions, as it may cause significant conflicts.

The diagram below illustrates the utilization of the PubSub mechanism to facilitate the requesting and switching of the participant's mode.

Step 1: Loading Viewer List

First, the host will be presented with a list of participants who have joined as SIGNALLING_ONLY, accompanied by a button that, when selected, will invite that user to join the livestream.

const participants = meeting.participants;

// Filtering only viewer participant
const viewers = [...participants.values()].filter((participant) => {
  return participant.mode == VideoSDK.Constants.modes.SIGNALLING_ONLY;
});

viewers.map((participant) => {
  const name = participant.displayName;
  const participantId = participant.id;

  const textEle = document.createElement("p");
  textEle.textContent = name;

  // Create the button
  var button = document.createElement("button");
  button.innerHTML = "Request to join Livestream";

  // Append elements to your viewers list
});

Step 2: Requesting a Viewer to Join Livestream

Now, with the Viewer list in place, handle the click event for the "Join Livestream" button by utilizing CHANGE_MODE_$participantId as the topic for PubSub.

const participants = meeting.participants;

// Filtering only viewer participant
const viewers = [...participants.values()].filter((participant) => {
  return participant.mode == VideoSDK.Constants.modes.SIGNALLING_ONLY;
});

viewers.map((participant) => {
  const name = participant.displayName;
  const participantId = participant.id;

  const textEle = document.createElement("p");
  textEle.textContent = name;

  // Create the button
  var button = document.createElement("button");
  button.innerHTML = "Request to join Livestream";

  // Append elements to your viewers list

  const topic = `CHANGE_MODE_${participantId}`;

  // Publishing the pubsub message with new mode
  button.addEventListener("click", async function () {
    try {
      await meeting?.pubSub.publish(topic, VideoSDK.Constants.modes.SEND_AND_RECV);
    } catch (error) {
      console.log("Error while publishing CHANGE_MODE:", error);
    }
  });
});

Step 3: Showing Viewer Request Dialog

After implementing the host's request for a viewer to join the livestream, display the viewer's request dialogue and switch the mode from SIGNALLING_ONLY to SEND_AND_RECV.

const listeners = {
  onMessageReceived: (data) => {
    let { message, senderId, senderName } = data;
    const textEle = document.createElement("p");
    textEle.textContent = `${senderName} requested you to join Livestream`;

    // Create the button
    var acceptButton = document.createElement("button");
    acceptButton.innerHTML = "Accept";

    acceptButton.addEventListener("click", async function () {
      try {
        await meeting?.changeMode(message);
      } catch (err) {
        console.error("changeMode failed:", err);
      }
    });

    var rejectButton = document.createElement("button");
    rejectButton.innerHTML = "Reject";
    rejectButton.addEventListener("click", function () {
      //
    });
  },
};

try {
  await meeting?.pubSub?.subscribe("CHAT", listeners);
} catch (error) {
  console.log("Error while subscribing to CHAT:", error);
}

API Reference

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

• Meeting
• pubSub
• participant