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.
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.
Important Changes React Native SDK in Version v0.2.0
- The following modes have been deprecated:
CONFERENCE
has been replaced bySEND_AND_RECV
VIEWER
has been replaced bySIGNALLING_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
- If you want to automatically pin all the hosts/speakers, you can achieve this by listening to the
onMeetingJoined
callback andonParticipantModeChanged
event. In these callbacks, you canpin
andunpin
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 <>...</>;
}
- 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.
Got a Question? Ask us on discord