Change Mode - React Native

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.

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.

• changeMode()
• requestPermission()

changeMode()

• The changeMode() method from the useRoom 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.
• On Android, the SDK does not ask the user for camera and microphone access. Before you switch to SEND_AND_RECV, ask with requestPermission() of useMediaDevice().

Example: a participant changing its own mode

import { Constants, useMediaDevice, useRoom } from "@videosdk.live/react-native-sdk";
import { TouchableOpacity, Text } from "react-native";

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

  //Changing the mode with the required mode
  const handleChangeMode = async () => {
    try {
      // On Android, the SDK does not ask for camera and microphone access
      await requestPermission(Constants.permission.AUDIO_AND_VIDEO);
      await changeMode("SEND_AND_RECV");
    } catch (err) {
      console.error("changeMode failed:", err);
    }
  };

  return (
    <TouchableOpacity onPress={handleChangeMode}>
      <Text>Change Mode</Text>
    </TouchableOpacity>
  );
};

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-native-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.

import { useParticipant, usePubSub } from "@videosdk.live/react-native-sdk";
import { View, TouchableOpacity, Text } from "react-native";

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

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

  const handleRequest = async () => {
    try {
      await invitePublish(JSON.stringify({ mode: "SEND_AND_RECV" }));
    } catch (error) {
      console.log("Error while publishing:", error);
    }
  }

  return (
    <View>
      {mode === "RECV_ONLY" && (
        <TouchableOpacity onPress={handleRequest}>
          <Text>Invite on Stage</Text>
        </TouchableOpacity>
      )}
    </View>
  );
}

Step 3 : Create a Listener to Change the Mode

• On the audience side, subscribe to the same PubSub topic the host publishes on. When a mode request is received, update the participant's mode using changeMode().
• Before switching to SEND_AND_RECV, ask for camera and microphone access with requestPermission(), because the SDK does not ask on Android.

import {
  Constants,
  useMediaDevice,
  useRoom,
  usePubSub,
} from "@videosdk.live/react-native-sdk";
import { View } from "react-native";

const ChangeModeListener = () => {
  const mRoom = useRoom();
  const { requestPermission } = useMediaDevice();

  usePubSub(`REQUEST_TO_JOIN_AS_HOST_${mRoom?.localParticipant?.id}`, {
    onMessageReceived: async ({ message }) => {
      const parsed = JSON.parse(message);
      try {
        if (parsed.mode === "SEND_AND_RECV") {
          // On Android, the SDK does not ask for camera and microphone access
          await requestPermission(Constants.permission.AUDIO_AND_VIDEO);
        }
        await mRoom.changeMode(parsed.mode);
      } catch (err) {
        console.error("changeMode failed:", err);
      }
    },
  });

  return <View />;
};

export default ChangeModeListener;

note

Calling changeMode() changes only the caller's mode. Every other client must rebuild its host and audience lists from the onParticipantModeChanged callback, as described in Updating the UI on mode change.

Updating the UI on mode change

changeMode() updates the mode of the participant who calls it. The room then broadcasts the change to every participant, including clients that did not initiate the change, through the onParticipantModeChanged callback of useRoom. Each client should use that callback to update its UI.

In the event handler, rebuild the lists that drive your UI by filtering participants by their current mode, then refresh the view. Simply pinning, unpinning, or displaying a message is not enough: when a participant is promoted, their mode changes, but other clients will not automatically move them from the audience to the stage.

const { participants } = useRoom({
  onParticipantModeChanged: ({ participantId, mode }) => {
    // Recompute the lists you render here, rather than relying on a
    // re-render from `participants` alone.
    setModes((prev) => ({ ...prev, [participantId]: mode }));
  },
});

const speakers = [...participants.values()].filter(
  (p) => modes[p.id] === "SEND_AND_RECV"
);

caution

Rebuild both lists — the speakers and the viewers. Removing the participant from the audience list alone is the common half-fix: they disappear from the audience and never appear on stage.

API Reference

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

• changeMode()
• onParticipantModeChanged()
• requestPermission()
• useParticipant
• useRoom
• usePubSub