Invite Guest on Stage - Javascript

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

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", function () {
    meeting?.pubSub.publish(topic, VideoSDK.Constants.modes.SEND_AND_RECV);
  });
});

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.

function 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", function () {
    meeting?.changeMode(message);
  });

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

meeting?.pubSub?.subscribe("CHAT", onMessageReceived);

API Reference

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

• Meeting
• pubSub
• participant