Remove Participant - React

When hosting a meeting, it's essential for the host to have the capability to to remove a participant from the meeting. This can be useful in various scenarios where a participant is causing disturbance, behaving inappropriately, or is not following meeting guidelines. This guide focuses on this very aspect of removing a particpant from a meeting.

VideoSDK provides three ways to do so:

1. Using SDK
2. Using VideoSDK Dashboard
3. Using Rest API

1. Using SDK

remove()

The remove() method allows for the removal of a participant during an on-going session. This can be helpful when moderation is required in a particular meeting.

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

const ParticipantView = () => {
  // Get specific participant instance
  const { remove } = useParticipant("<participant-id>");

  const handleRemoveParticipant = () => {
    // Remove participant from active session
    // This will emit an event called "onParticipantLeft" to that particular participant
    remove();
  };
  return (
    <>
      <button onClick={handleRemoveParticipant}>Remove Participant</button>
    </>
  );
};

Events associated with remove()

Following callbacks are received when a participant is removed from the meeting.

• The participant who was removed from the meeting will receive a callback on the onMeetingLeft event of the useMeeting() hook.
• All other remote participants will receive a callback on the onParticipantLeft event with the Participant object.

2. Using VideoSDK Dashboard

• For removing a participant using the VideoSDK Dashboard, navigate to the session page on VideoSDK Dashboard. Select the specific meeting, and from the list of participants, choose the participant you wish to remove. Utilize the provided options to remove the selected participant from the meeting.

3. Using Rest API

• You can also remove a particular participant from the meeting using the REST API.
• To employ this method, you need the sessionId of the meeting and the participantId of the individual you intend to remove.

API Reference

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

• remove()
• onMeetingLeft()
• onParticipantLeft()