Manage Roles - React Native

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

Roles with VideoSDK

VideoSDK supports three participant modes:

1. SEND_AND_RECV When a participant joins with the mode set to SEND_AND_RECV, they can both send their own media and receive the media of other participants. Additionally, they can interact with others using features like chat and polls.

2. SIGNALLING_ONLY When a participant joins with the mode set to SIGNALLING_ONLY, they neither send nor receive any media. However, they can still interact with other participants using features like chat and polls.

3. RECV_ONLY When a participant joins with the mode set to RECV_ONLY, they receive the media of other participants but cannot send their own. They can still interact with other participants using features like chat and polls.

When to use the Roles?

1. Simple Adaptive Streaming

• Simple Adaptive Streaming (SAS) is a type of livestreaming designed for events where minimal interaction between the host and viewers is preferred.

• Ideal for scenarios with a large audience that does not actively engage with the host, SAS operates with each speaker participating in a VideoSDK room in SEND_AND_RECV mode.

• Viewers, on the other hand, watch the livestream using the HLS URL (playbackHlsUrl). Unlike the speakers, viewers are not required to join the room in SEND_AND_RECV or SIGNALLING_ONLY mode.

This video is for educational purposes

2. Adaptive Streaming with increased engagement

• Use Adaptive Streaming when you want polls and conversations with your audience during a live stream. Viewers can join and leave the live stream at the host's discretion.

• To implement this, ensure that all speakers join as SEND_AND_RECV mode participants, while the audience joins as SIGNALLING_ONLY mode participants. Audience members can still take part in chat, polls and other interactive features.

This video is for educational purposes

Using roles

The mode of the participants is configured during the room initialization within the config parameter of the RoomProvider.

import { RoomProvider } from "@videosdk.live/react-native-sdk";
const getToken = async () => {
  ...
};
const getRoomId = async () => {
  ...
};
const App = () => {
    ...

  // The mode this participant joins with
  const mode = "SEND_AND_RECV"; // allowed: SEND_AND_RECV | SIGNALLING_ONLY | RECV_ONLY

  // Init RoomProvider
  return token && roomId ? (
    <RoomProvider
      config={{
        roomId: roomId,
        participantName: "NAME HERE",
        micEnabled: true,
        camEnabled: true,
        mode: mode,
      }}
      token={token}
      joinWithoutUserInteraction={true}
    >
      <Container mode={mode} />
    </RoomProvider>
  ) : (
    <></>
  );
};

const Container = ({ mode }) => {
  // Show the view for the mode the participant joined with
  return mode === "SEND_AND_RECV" ? (
    <SpeakerView />
  ) : mode === "SIGNALLING_ONLY" ? (
    <HlsPlayer />
  ) : null;
};

note

On Android, the SDK does not ask for camera and microphone access. Ask with requestPermission() from the useMediaDevice hook before you render RoomProvider for a participant who joins in SEND_AND_RECV mode, and before you call changeMode("SEND_AND_RECV").

Getting Participant Mode

The role of the participant is identified using the mode property from useParticipant hook.

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

function ParticipantView({ participantId }) {
  const { displayName, mode } = useParticipant(participantId);

  return (
    <Text>
      Name: {displayName}, Mode: {mode}
    </Text>
  );
}

Changing Participant's Mode

A participant changes its own mode with the changeMode() method of the useRoom hook. changeMode() takes only the new mode and changes only the mode of the participant who calls it. To bring a viewer on stage, send them a request, for example over PubSub, and let their app call changeMode(), as shown in Change Mode.

Every participant gets the new mode in the onParticipantModeChanged callback of useRoom.

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

function Container() {
  const { changeMode } = useRoom();

  const changeParticipantMode = async () => {
    // For SEND_AND_RECV mode
    try {
      await changeMode("SEND_AND_RECV");
    } catch (err) {
      console.error("changeMode failed:", err);
    }

    // For SIGNALLING_ONLY mode
    try {
      await changeMode("SIGNALLING_ONLY");
    } catch (err) {
      console.error("changeMode failed:", err);
    }
  };

  return <>...</>;
}

API Reference

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

• RoomProvider
• useRoom
• useParticipant
• changeMode
• onParticipantModeChanged