Manage On-Screen Participants - Javascript

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 Participant Class 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 Javascript SDK in Version v0.1.4

• 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.1.4 + 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 meeting-joined callback and participant-mode-changed event. In these callbacks, you can pin and unpin participants based on their mode.

let meeting;

// Initialize Meeting
meeting = VideoSDK.initMeeting({
  // ...
});

meeting.on("meeting-joined", () => {
  const localParticipant = meeting?.localParticipant;
  //Pin the participant if mode is conference
  if (localParticipant.mode == VideoSDK.Constants.modes.SEND_AND_RECV) {
    localParticipant.pin();
  } else {
    localParticipant.unpin();
  }
});

meeting.on("participant-joined", (participant) => {
  //Pin the participant if mode is conference else unpin them
  if (participantId == localParticipant.id) {
    if (localParticipant.mode == VideoSDK.Constants.modes.SEND_AND_RECV) {
      localParticipant.pin();
    } else {
      localParticipant.unpin();
    }
  }
});

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 = meeting.participants;
const speakers = [...participants.values()].filter((participant) => {
  return participant.mode == VideoSDK.Constants.modes.SEND_AND_RECV;
});

API Reference

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

• pin
• unpin