Join Live Stream - React Native

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

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()
• leave()
• requestPermission()

join()

• To join the live stream you can call the join() method which is the part of the useRoom hook of React Native SDK.
• This method can be called after the live stream is initialized from the RoomProvider.
• On Android, the SDK does not ask the user for camera and microphone access. Before a host calls join(), ask for it with requestPermission() of the useMediaDevice hook, as the example below does. With joinWithoutUserInteraction, ask before you render RoomProvider. Otherwise the camera and microphone do not start. iOS asks the user on its own.
• Audience members do not publish media, so they need this access only before they change to SEND_AND_RECV mode.
• Call join() once. Disable your join button until the call settles, so that a second tap does not start a second join.

caution

useRoom hook mentioned above is accessible within the RoomProvider only.

Events associated with the join() method

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

• The Local Participant will receive the onRoomJoined 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 {
  Constants,
  RoomProvider,
  useMediaDevice,
  useRoom,
} from "@videosdk.live/react-native-sdk";
import { View, TouchableOpacity, Text } from "react-native";

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

// isHost is true when the participant joins in SEND_AND_RECV mode
const LiveStreamView = ({ isHost }) => {
  //Event to determine if the live stream has been joined
  function onRoomJoined() {
    console.log("onRoomJoined");
  }

  //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 } = useRoom({
    onRoomJoined,
    onParticipantJoined,
  });
  const { requestPermission } = useMediaDevice();

  const handleJoinLiveStream = async () => {
    try {
      // On Android, the SDK does not ask hosts for camera and microphone access
      if (isHost) {
        await requestPermission(Constants.permission.AUDIO_AND_VIDEO);
      }
      // Joining Live Stream
      await join();
    } catch (err) {
      console.error("join failed:", err);
    }
  };

  return (
    <View>
      <TouchableOpacity onPress={handleJoinLiveStream}>
        <Text>Join Live Stream</Text>
      </TouchableOpacity>
    </View>
  );
};

leave()

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

note

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

Events associated with the leave() method

The following callbacks are received when a participant leaves the live stream.

• The Local Participant will receive the onRoomLeft 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 { RoomProvider, useRoom } from "@videosdk.live/react-native-sdk";
import { View, TouchableOpacity, Text } from "react-native";

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

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

  //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 } = useRoom({
    onRoomLeft,
    onParticipantLeft,
  });

  const handleLeaveLiveStream = async () => {
    // Leaving Live Stream
    try {
      await leave();
    } catch (err) {
      console.error("leave failed:", err);
    }
  };

  return (
    <View>
      <TouchableOpacity onPress={handleLeaveLiveStream}>
        <Text>Leave Live Stream</Text>
      </TouchableOpacity>
    </View>
  );
};

tip

RoomProvider leaves the room when it unmounts. Keep it mounted for as long as the call lasts.

API Reference

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

• RoomProvider
• join()
• requestPermission()
• onRoomJoined()
• onParticipantJoined()
• leave()
• onRoomLeft()
• onParticipantLeft()