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.

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

changeMode()

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

Example

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

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

  //Changing the mode with the required mode
  const handleChangeMode = async () => {
    try {
      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 { 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 specific PubSub topic. When a mode request is received, update the participant's mode using changeMode().

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

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

  usePubSub(`REQUEST_TO_JOIN_${mMeeting?.localParticipant?.id}`, {
    onMessageReceived: async ({ message }) => {
      const parsed = JSON.parse(message);
      try {
        await mMeeting.changeMode(parsed.mode);
      } catch (err) {
        console.error("changeMode failed:", err);
      }
    },
  });

  return <View />;
};

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