Manage On-Screen Participants - React Native

When engaging in interactive live streaming, it is essential to have only the necessary participant on the screen during the livestream. To manage this, the pin and unpin methods of the useParticipant hook are employed.

note

To ensure only the hosts/speakers are displayed in the grid, utilize the SPOTLIGHT layout and prioritize the pin function when initiating the interactive livestream.

Below is an explanation of the methods used to manage on-screen participants.

pin()

This method allows you to pin any participant's camera, screen share, or both. It is particularly useful for identifying specific participants, enabling you to optimize the rendering of the participant grid.

unpin()

This method allows you to unpin any participant's camera, screen share, or both. It is particularly useful for resetting the pin state of the participant.

info

Important Changes React Native SDK in Version v0.2.0

• The following modes have been deprecated:
• CONFERENCE has been replaced by SEND_AND_RECV
• VIEWER has been replaced by SIGNALLING_ONLY

Please update your implementation to use the new modes.

⚠️ Compatibility Notice:
To ensure a seamless meeting experience, all participants must use the same SDK version.
Do not mix version v0.2.0 + with older versions, as it may cause significant conflicts.

Managing On-Screen Participants

1. If you want to automatically pin all the hosts/speakers, you can achieve this by listening to the onMeetingJoined callback and onParticipantModeChanged event. In these callbacks, you can pin and unpin participants based on their mode.

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

function MeetingView() {
  const mMeeting = useMeeting({});

  //Here a reference to the meeting object is used because
  //while referencing it in the callbacks its latest state has to be obtained.
  const mMeetingRef = useRef();

  useEffect(() => {
    mMeetingRef.current = mMeeting;
  }, [mMeeting]);

  const { localParticipant } = useMeeting({
    onMeetingJoined: () => {
      const localParticipant = mMeetingRef.current?.localParticipant;
      //Pin the participant if the mode is SEND_AND_RECV
      if (localParticipant.mode == Constants.modes.SEND_AND_RECV) {
        localParticipant.pin();
      } else {
        localParticipant.unpin();
      }
    },
    onParticipantModeChanged: ({ participantId, mode }) => {
      const localParticipant = mMeetingRef.current?.localParticipant;
      //Pin the participant if the mode is SEND_AND_RECV  else unpin them
      if (participantId == localParticipant.id) {
        if (localParticipant.mode == Constants.modes.SEND_AND_RECV) {
          localParticipant.pin();
        } else {
          localParticipant.unpin();
        }
      }
    },
  });
  return <>...</>;
}

2. When rendering the participant grid on the Speaker side, ensure that only participants in SEND_AND_RECV mode are displayed. You can filter the participants as shown in the example provided below.

const { participants } = useMeeting();
const speakers = [...participants.values()].filter((participant) => {
  return participant.mode == Constants.modes.SEND_AND_RECV;
});

API Reference

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

• pin
• unpin