Leave or End Meeting - React

A participant can choose to leave a meeting without removing all the other participants. This is typically done using the Leave Meeting functionality.

Alternatively, if the participant is the host or the last person remaining in the session, they can choose to End Meeting by removing all other participants, which will end the session for everyone.

leave()

To leave the meeting without removing all the participants you need to call the leave() method which is a part of the useMeeting hook of React SDK.

end()

To end the meeting by removing all the participants you need to call the end() method which is a part of the useMeeting hook of React SDK.

note

These methods can be called only after the meeting is joined successfully.

Example

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

const MeetingView = () => {
  //Getting the leave and end method from hook and assigning event callbacks
  const { leave, end } = useMeeting({
    onMeetingLeft,
    onParticipantLeft,
  });

  const handleLeaveMeeting = () => {
    // Leaving Meeting
    leave();
  };

  const handleEndMeeting = () => {
    // Ending Meeting
    end();
  };

  return (
    <>
      <button onClick={handleLeaveMeeting}>Leave Meeting</button>
      <button onClick={handleEndMeeting}>End Meeting</button>
    </>
  );
};

tip

You should call the leave() method on the unmount of your main meeting component so that meeting is left once the view is unmounted.

Events associated with the leave() method

Following callbacks are received when a participant leaves the meeting.

• The Local Participant will receive a callback onMeetingLeft of the useMeeting() hook.
• All Remote Participants will receive a callback onParticipantLeft with the Participant object.

Events associated with the end() method.

Following callbacks are received when a participant ends the meeting.

• All remote participants and the local participant will receive a callback onMeetingLeft of the useMeeting() hook.

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

const MeetingView = () => {
  //Event to determine if the meeting has been left
  function onMeetingLeft() {
    console.log("onMeetingLeft");
  }

  //Event to determine if some other participant has left
  function onParticipantLeft(participant) {
    console.log(" onParticipantLeft", participant);
  }

  //Getting the leave and end method from hook and assigning event callbacks
  const { leave, end } = useMeeting({
    onMeetingLeft,
    onParticipantLeft,
  });

  return <>...</>;
};

API Reference

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

• leave()
• end()
• onMeetingLeft()
• onParticipantLeft()