Manage Roles - React

Roles with VideoSDK

When engaging in interactive live streaming, managing user roles is crucial. VideoSDK supports two participant modes to facilitate role management:

1. CONFERENCE When a participant joins with the mode set to CONFERENCE, they have the capability to both publish and consume the media of other participants. Additionally, they can interact with others using features like chat and polls.

2. VIEWER When a participant joins with the mode set to VIEWER, they are restricted from both publishing and consuming any media from other participants. However, 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 meeting in CONFERENCE mode.

• Viewers, on the other hand, can effortlessly watch the livestream using the downstreamUrl. Unlike the speakers, viewers are not required to join the meeting in CONFERENCE or VIEWER mode. This setup ensures a smooth streaming experience without unnecessary interruptions or distractions.

• In SAS, each speaker attends a VideoSDK meeting in CONFERENCE mode, while viewers can simply watch the livestream using the playbackHlsUrl and livestreamUrl. Unlike the speakers, viewers do not need to join the meeting in CONFERENCE or VIEWER mode. This allows for a seamless streaming experience without any unnecessary interruptions or distractions.

• when you receive HLS_PLAYABLE status you will receive 2 urls in response

  • playbackHlsUrl - Live HLS with playback support
  • livestreamUrl - Live HLS without playback support

note

downstreamUrl is now depecated. Use playbackHlsUrl or livestreamUrl in place of downstreamUrl

2. Adaptive Streaming with increased engagement

• If you aim to enhance engagement with your audience during a live streaming event, Adaptive Streaming technology is the way to go. This approach allows you to integrate interactive features like polls and conversations, empowering viewers to join and leave the livestream at the host's discretion.

• To implement this, ensure that all speakers join as CONFERENCE mode participants, while the audience joins as VIEWER mode participants. This setup enables everyone to actively participate in the interactive elements of the live stream, creating a more dynamic and engaging experience for all involved.

Using roles

The mode of the participants is configured during the meeting initialization within the config parameter of the MeetingProvider.

import { MeetingProvider, useMeeting } from "@videosdk.live/react-sdk";
const getToken = async () => {
  ...
};
const getMeetingId = async () => {
  ...
};
const App = () => {
    ...

  // Init Meeting Provider
  return token && meetingId ? (
    <MeetingProvider
      config={{
        meetingId: meetingId,
        name: "NAME HERE",
        micEnabled: true,
        webcamEnabled: true,
        mode: "CONFERENCE", // allowed: CONFERENCE | VIEWER
      }}
      token={token}
      joinWithoutUserInteraction={true}
    >
      <Container />
    </MeetingProvider>
  ) : (
    <></>
  );
};

const Container = () => {
  // Get Meeting object using useMeeting hook
  const { localParticipant } = useMeeting();

  return localParticipant.mode == "CONFERENCE" ? (
    <SpeakerView />
  ) : localParticipant.mode == "VIEWER" ? (
    <HlsPlayer />
  ) : null;
};

Getting Participant Mode

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

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

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

Changing Participant's Mode

Suppose you are hosting a livestream and wish to have one of your viewers join the livestream with you. In this scenario, you can modify the mode of the participant using the changeMode() method provided by the useMeeting hook.

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

  const changeParticipantMode = () => {
    // For CONFERENCE mode
    changeMode(Constants.modes.CONFERENCE);

    // For VIEWER mode
    changeMode(Constants.modes.VIEWER);
  };

  return <>...</>;
}

API Reference

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

• MeetingProvider
• useMeeting
• useParticipant
• changeMode