Remove Participant - React

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

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 live stream.

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-including all the hosts and audience members 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 session, and from the list of participants, choose the participant you wish to remove. Utilize the provided options to remove the selected participant from the session.

3. Using Rest API

• You can also remove a particular participant from the live stream using the REST API.
• To employ this method, you need the sessionId of the live stream 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()