Change Mode - React

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.

caution

changeMode() only ever changes the mode of the participant who calls it. There is no form of changeMode() that takes another participant's id, and a host cannot change an audience member's mode directly.

Promotion therefore takes two pieces of code, one on each side, and neither does anything on its own:

1. On the host — publish a request to the invited participant over PubSub. Step 1 and Step 2 below.
2. On the invited participant — subscribe to that same topic and, in the message handler, call changeMode() yourself. Step 3 below. Without this subscriber the request reaches nobody and no mode ever changes.

An implementation that only publishes the request looks finished and does nothing.

changeMode()

• The changeMode() method from the useMeeting hook switches the calling participant's own mode during a live stream — for example, an audience member becoming a host.
• It takes only the target mode. To move a different participant between modes, send them a PubSub request and let their client call changeMode() itself, as shown in the Implementation Guide below.

Example: a participant changing its own mode

import { useMeeting } from "@videosdk.live/react-sdk";

const LiveStreamView = () => {
  //Getting the changeMode method from hook
  const { changeMode } = useMeeting();

  //Changing the mode with the required mode
  const handleChangeMode = () => {
    changeMode("SEND_AND_RECV");
  };

  return <button onClick={handleChangeMode}>Change Mode</button>;
};

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.

import { usePubSub } from "@videosdk.live/react-sdk";

function ParticipantListItem({ participantId }) {
  // ..

  const { publish: invitePublish } = usePubSub(
    `REQUEST_TO_JOIN_AS_HOST_${participantId}`,
    {
      onMessageReceived: async ({ message }) => {
        console.log("message", 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.

function ParticipantListItem({ participantId }) {
  const { mode } =
    useParticipant(participantId);

    const { publish: invitePublish } = usePubSub(
      `REQUEST_TO_JOIN_AS_HOST_${participantId}`
    );

    const handleRequest = () => {
      invitePublish(JSON.stringify({ mode: "SEND_AND_RECV" }))
    }

  return (
    <div>
        {mode === "RECV_ONLY" && <div onClick={() => handleRequest()} >
          Invite on Stage
        </div>}
      </div>
    </div>
  );
}

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().

import { useMeeting, usePubSub } from "@videosdk.live/react-sdk";

const ChangeModeListner = () => {
  const mMeeting = useMeeting();

  usePubSub(`REQUEST_TO_JOIN_AS_HOST_${mMeeting?.localParticipant?.id}`, {
    onMessageReceived: async ({ message }) => {
      mMeeting.changeMode(JSON.parse(message).mode);
    },
  });

  return <></>;
};

export default ChangeModeListner;

API Reference

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

• changeMode()
• useParticipant
• useMeeting
• usePubSub