Change Mode - JavaScript

In a live stream, audience members usually join in RECV_ONLY mode, meaning they can only view and listen to the hosts. However, if a host invites an audience member to actively participate (e.g., to speak or present), the audience member can switch their mode to SEND_AND_RECV using the changeMode() method.

This guide explains how to use the changeMode() method and walks through a sample implementation where a host invites an audience member to become a host using PubSub.

changeMode()

• The changeMode() method allows a participant to switch between modes during a live stream—for example, from audience to host.

Example

let liveStream;

// Initialize Live Stream
liveStream = VideoSDK.initMeeting({
  // ...
});

const changeModeBtn = document.getElementById("changeModeBtn");
changeModeBtn.addEventListener("click", () => {
  // Changing Mode
  liveStream?.changeMode("SEND_AND_RECV");
});

Implementation Guide

Step 1 : Create a Pubsub Topic

• Set up a PubSub topic to send a mode change request from the host to a specific audience member.

// Create a topic for the participant
const topic = `REQUEST_TO_JOIN_AS_HOST_${participantId}`;

// Publish function
function invitePublish(message) {
  liveStream?.pubSub.publish(topic, message);
}

Step 2 : Create an Invite Button

• Add an "Invite on Stage" button for each audience member. When clicked, it publishes a PubSub message with the mode "SEND_AND_RECV" to that participant.

const participants = liveStream.participants;
const participant = participants.get("<participant-id>");
const mode = participant ? participant.mode : null;

// Define the topic
const topic = `REQUEST_TO_JOIN_AS_HOST_${participantId}`;

// Publish function to send the request
function invitePublish(message) {
  liveStream?.pubSub.publish(topic, message);
}

// Handle request
function handleRequest() {
  invitePublish({ mode: "SEND_AND_RECV" });
}

// Render a button if the mode is "RECV_ONLY"
const container = document.createElement("div");

if (mode === "RECV_ONLY") {
  const container = document.createElement("div"); // Container for the button

  const button = document.createElement("div");
  button.innerText = "Invite on Stage";
  button.style.cursor = "pointer"; // Make the button look clickable
  button.onclick = handleRequest;

  container.appendChild(button);

  // Append the container to the body (or specific container)
  document.body.appendChild(container);
}

Step 3 : Create a Listener to Change the Mode

• On the audience side, subscribe to the specific PubSub topic. When a mode request is received, update the participant’s mode using changeMode().

const topic = `REQUEST_TO_JOIN_${mMeeting?.localParticipant?.id}`;
function handleMessage({ message }) {
  if (message && message.mode) {
    liveStream.changeMode(message.mode);
  }
}
liveStream.pubSub.subscribe(topic, handleMessage);

API Reference

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

• changeMode()
• PubSub