Join Live Stream - React

Once, the live stream is configured, the next step is to join it. With our React SDK, you can choose to manually call the join() method or leave it up to the VideoSDK to automatically call it when the MeetingProvider is rendered. If you have not initialized the live stream yet, you can follow the guide here.

join()

• To join the live stream you can call the join() method which is the part of the useMeeting hook of React SDK.
• This method can be called after the live stream is initialized from the MeetingProvider.

caution

useMeeting hook mentioned above is accessible within the MeetingProvider only.

Events associated with the join() method

Following events are received when a participant successfully joins the livestream.

• The Local Participant will receive the onMeetingJoined event, when the live stream is successfully joined.
• All the Remote Participants—including all the hosts and audience members—will receive the onParticipantJoined event with the newly joined Participant object from the event callback.

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

const App = () => {
  //... Meeting Provider code
};

const LiveStreamView = () => {
  //Event to determine if the live stream has been joined
  function onMeetingJoined() {
    console.log("onMeetingJoined");
  }

  //Event to determine some other participant has joined
  function onParticipantJoined(participant) {
    console.log(" onParticipantJoined", participant);
  }

  //Getting the join method from the hook and assigning event callbacks
  const { join } = useMeeting({
    onMeetingJoined,
    onParticipantJoined,
  });

  const handleJoinLiveStream = () => {
    // Joining Live Stream
    join();
  };

  return (
    <>
      <button onClick={handleJoinLiveStream}>Join Live Stream</button>
    </>
  );
};

leave()

• To leave the live stream you can call the leave() method which is the part of the useMeeting hook of React SDK.

note

This method can be called only after the live stream is joined successfully.

Events associated with the leave() method

Following callbacks are received when a participant leaves the live stream.

• The Local Participant will receive the onMeetingLeft event, once they have successfully left the livestream.
• All the Remote Participants—including all the hosts and audience members—will receive the onParticipantLeft event with the Participant object of the user who left the livestream.

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

const App = () => {
  //... Meeting Provider code
};

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

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

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

  const handleLeaveLiveStream = () => {
    // Leaving Live Stream
    leave();
  };

  return (
    <>
      <button onClick={handleLeaveLiveStream}>Leave Live Stream</button>
    </>
  );
};

tip

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

API Reference

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

• MeetingProvider
• join()
• onMeetingJoined()
• onParticipantJoined()
• leave()
• onMeetingLeft()
• onParticipantLeft()