Join Meeting - React

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• join()

Overview

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.

caution

Use exactly one of these two — setting the flag and calling join() together can create two meeting instances.

• There is a button inside MeetingProvider. Call join() from its click handler: from the event, never from an effect.
• There is no button, because the user already acted on an earlier screen — a device check, a room link, a button elsewhere in your app. Set joinWithoutUserInteraction to true as a prop on MeetingProvider, not a key inside config, and do not call join() at all.

With the flag set, the SDK makes the join() call itself, so there is no promise of yours to wrap in try / catch — the error handling in the sample does not apply. Subscribe to onError from useMeeting to catch a failed join and read its code.

MeetingProvider configures the token in its own effect, and React runs child effects before parent effects. A join() called from a mount effect inside the provider therefore runs before the token is configured, and fails with 4002 INVALID_TOKEN even when the token itself is valid. What matters is where the call runs, not what the user clicked to get there: a click on a previous screen does not make a mount effect safe.

Before joining the meeting, it has to be initialized. If you have not initialized a meeting yet, you can follow the guide here.

join()

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

caution

useMeeting hook mentioned above is accessible within the MeetingProvider only.

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

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

const MeetingView = () => {
  //Getting the join method from hook and assigning event callbacks
  const { join } = useMeeting();

  const handleJoinMeeting = async () => {
    // Joining Meeting
    try {
      await join();
    } catch (err) {
      console.error("join failed:", err);
    }
  };

  return (
    <>
      <button onClick={handleJoinMeeting}>Join Meeting</button>
    </>
  );
};

Events associated with the join() method

Following events are received when a participant successfully joins a meeting.

• The Local Participant will receive an onMeetingJoined event, when the meeting is successfully joined.
• The Remote Participant will receive an onParticipantJoined event with the newly joined Participant object from the event callback.

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

const MeetingView = () => {
  //Event to determine if the meeting 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,
  });

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

API Reference

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

• MeetingProvider
• join()
• onMeetingJoined()
• onParticipantJoined()