Skip to main content
Version: 2.x.x

Initialise Room - React Native

To configure a VideoSDK room you require two things, first the token which will be used for Authentication purpose and a roomId which will be used to specify where a participant will join. Examine each of the steps closely.

Generating Token​

You can generate a token in two ways:

  1. Temporary Token : You can visit Dashboard's API Key section and generate a temporary token from there.

  2. Server : You can set up JWT in your backend and make an API call to get the token from your server.

To learn more about Authentication and token in detail you can follow this guide.

With a temporary token:

const getToken = async () => {
  // Update the token here from the VideoSDK dashboard
  let token = "YOUR_TOKEN";
  return token;
};

With a token from your server:

const getToken = async () => {
  const response = await fetch(`http://localhost:3000/get-token`, {
    method: "GET",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
  });
  const { token } = await response.json();
  return token;
};

Generating Room Id​

With the token ready, you can now get the roomId from the VideoSDK's rooms API.

const getRoomId = async (token) => {
  try {
    //Use VideoSDK rooms API endpoint to create a roomId
    const VIDEOSDK_API_ENDPOINT = `https://api.videosdk.live/v2/rooms`;
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        // Pass the token in the headers
        Authorization: token,
      },
    };
    const roomId = await fetch(VIDEOSDK_API_ENDPOINT, options)
      .then(async (result) => {
        const { roomId } = await result.json();
        return roomId;
      })
      .catch((error) => console.log("error", error));

    //Return the roomId which we got from the response of the api
    return roomId;
  } catch (e) {
    console.log(e);
  }
};

Initialization of Room​

You can initialize the room using the RoomProvider from the React Native SDK. The RoomProvider is responsible for initializing the room with the provided configuration, which includes the token, roomId, participantId and many more.

Room Provider​

RoomProvider is React's Context.Provider that lets the components inside it subscribe to changes in the room.

You have to pass the initialization configuration for the room and the token in the RoomProvider.

tip

multiStream is true by default, so the camera that VideoSDK opens for you publishes several resolution layers. This suits rooms with many participants. For one-to-one rooms, you can set multiStream: false to publish a single layer. For more information on multiStream, refer to the multiStream documentation.

Take a deeper look at the available configuration options first.

<RoomProvider
  config={{
    roomId: "<Id-of-room>",
    participantName: "<Name-of-participant>", // optional, default: a random name
    micEnabled: true, // optional, default: true
    camEnabled: true, // optional, default: true
    participantId: "<Id-of-participant>", // optional, default: SDK will generate
    multiStream: true, // optional, default: true
    mode: "SEND_AND_RECV", // optional, default: "SEND_AND_RECV"
    preferredProtocol: "UDP_OVER_TCP", // optional, default: "UDP_OVER_TCP"
    codecSwitchEnabled: true, // optional, default: true
    enableBatching: true, // optional, default: true
  }}
  token={"token"}
  joinWithoutUserInteraction={false} // true = join automatically; if true, do not call join()
>
  <RoomView />
</RoomProvider>

  • roomId :

    • This is a unique identifier that allows participants to join a specific room.
    • It will be in the format of xxx-yyy-zzz and will be generated using the VideoSDK's Room API.

  • participantName:

    • This represents the name of the participant in the room.
    • It will accept String type value.
    • This is an OPTIONAL parameter. By default, VideoSDK picks a random 6-character name.

  • micEnabled:

    • This is a boolean flag, indicating whether a participant's microphone will be automatically enabled when they join a room.
    • This is an OPTIONAL parameter. By default, it is true.

  • camEnabled:

    • This is a boolean flag, indicating whether a participant's webcam will be automatically enabled when they join a room.
    • This is an OPTIONAL parameter. By default, it is true.

  • metaData:

    • If you want to provide additional details about a user joining a room, such as their profile image, you can pass that information in this parameter.
    • It has to be of Object type.
    • This is an OPTIONAL parameter.

  • defaultCamera:

    • This is an OPTIONAL parameter, It sets the initial camera configuration.
    • It accepts two distinct values : front or back.
    • By default, it's value is set to front.

  • participantId:

    • This is a unique identifier for the participant's inside the room.

      • It can be used to specify the unique identifier which can be linked with your own database service.
      • It has to be of String type.
      • This is an OPTIONAL parameter. By default, VideoSDK generates a unique id for each participant.

  • multiStream:

    • This is a boolean flag, indicating whether the camera that VideoSDK opens for you sends multiple resolution layers or a single resolution layer.
    • This is an OPTIONAL parameter. By default, it is true.

  • mode:

    • There are 3 modes, also available as Constants.Mode:

      1. SEND_AND_RECV : The participant sends and receives audio and video.

      2. RECV_ONLY : The participant receives audio and video but sends none.

      3. SIGNALLING_ONLY : The participant neither sends nor receives audio and video.

    • This is an OPTIONAL parameter. By default, it is SEND_AND_RECV.

  • customCameraTrack:

    • A camera track from createCameraVideoTrack() to publish instead of the default camera.
    • This is an OPTIONAL parameter. By default, VideoSDK opens the default camera.

  • customMicrophoneTrack:

    • A microphone track from createMicrophoneAudioTrack() to publish instead of the default microphone.
    • This is an OPTIONAL parameter. By default, VideoSDK opens the default microphone.

  • signalingBaseUrl:

    • If you use a proxy server with VideoSDK, set its base URL here.
    • It has to be of String type.
    • This is an OPTIONAL parameter.

  • preferredProtocol:

    • The network protocol to prefer for media: UDP_ONLY, UDP_OVER_TCP or TCP_ONLY. With UDP_OVER_TCP, UDP is tried first and TCP is used if UDP fails.
    • This is an OPTIONAL parameter. By default, it is UDP_OVER_TCP.

  • codecSwitchEnabled:

    • This is a boolean flag. When it is true, the video codec you send switches to VP8 when a remote participant cannot decode it, and onCodecChanged is called. See Video Codecs.
    • This is an OPTIONAL parameter. By default, it is true.

  • enableBatching:

    • This is a boolean flag. When it is true, notifications from the server are received in batches.
    • This is an OPTIONAL parameter. By default, it is true.

  • maxResolution:

    • It sets the size at which VideoSDK opens the camera: hd opens it at 1280x720 and sd at 960x540.
    • This is an OPTIONAL parameter. By default, it is hd.

  • dynaCast:

    • This is a boolean flag. When it is true, the quality of the webcam video you send is lowered while no other participant is watching its larger layers, and raised again when someone is. This saves upload bandwidth.
    • It works only with multiStream: true and the VP8 codec. See Simulcast.
    • This is an OPTIONAL parameter. By default, it is false.

  • autoConsume:

    • This is a boolean flag. When it is true, you receive each remote participant's microphone and webcam as soon as they turn them on. When it is false, you receive them only after you call consumeMicStreams() or consumeWebcamStreams() from useParticipant() for that participant.
    • consumeMicStreams(), consumeWebcamStreams(), stopConsumingMicStreams() and stopConsumingWebcamStreams() take effect only when the room was created with autoConsume set to false.
    • This is an OPTIONAL parameter. By default, it is true.

  • speakingLanguage:

    • The language this participant speaks, as a language code such as en. Realtime translation uses it as the source language for their speech. You can set it only here.
    • This is an OPTIONAL parameter.

  • translationLanguage:

    • The language this participant receives translated text in, as a language code such as es or en-GB. If you do not set it, this participant receives no translated text. To change it during the room, call changeTranslationLanguage() from useTranslation().
    • This is an OPTIONAL parameter.
note

On Android, the SDK does not ask the user for camera and microphone access. Request access before the room joins, as shown in Precall Setup. Without it, the camera and microphone do not start, even when camEnabled and micEnabled are true.

caution

You must ensure that the participantId is not repeated in the same room. This will enable VideoSDK to eliminate any participant associated with that participantId.

Other Options for Room Provider​

  • joinWithoutUserInteraction:

    • true — The participant joins the room automatically. Do not call join() manually.

    • false (default) — The participant does not join automatically. Your code must call join().

    • Use only one join mechanism. If you use join(), do not enable joinWithoutUserInteraction.

To know more about other properties, you can follow our API Reference.

With all the configuration options explained, here is how you will use the RoomProvider.

// importing
import { useEffect, useState } from "react";
import { RoomProvider, useRoom } from "@videosdk.live/react-native-sdk";

const getToken = async () => {
  ...
};
const getRoomId = async (token) => {
  ...
};

const App = () => {
  const [roomId, setRoomId] = useState(null);
  const [token, setToken] = useState(null);

  const fetchRoomIdAndToken = async () => {
    //Fetch the token and roomId and update it in the state
    const newToken = await getToken();
    const newRoomId = await getRoomId(newToken);
    setToken(newToken);
    setRoomId(newRoomId);
  };

  useEffect(() => {
    //Load the token and generate a room id and pass it to the Room Provider
    fetchRoomIdAndToken();
  }, []);

  // Init Room Provider
  return token && roomId ? (
    <RoomProvider
      config={{
        // Pass the generated room id
        roomId: roomId,
        participantName: "NAME HERE",
        micEnabled: true,
        camEnabled: true,
      }}
      // Pass the generated token
      token={token}
      // Joins automatically. On Android, request camera and microphone access before this renders.
      joinWithoutUserInteraction={true}
    >
      <RoomView />
    </RoomProvider>
  ) : (
    <></>
  );
};

const RoomView = () => {
  // Get the room state and methods using the useRoom hook
  const roomValue = useRoom();
  console.log("Room", roomValue);

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

React Hooks Support​

VideoSDK's React Native SDK provides hooks which can be used to access the state of the room and listen to the events happening in the room.

caution

All the hooks mentioned below are accessible within the RoomProvider only.

useRoom​

The useRoom hook gives you the room's state and events, such as a participant joining or leaving. To know more about the properties and events accessible by this hook, go through our API Reference.

useParticipant​

The useParticipant hook gives you one participant's state and events, such as their webcam and mic status. To know more about the properties and events accessible by this hook, go through our API Reference.

usePubSub​

The usePubSub hook sends and receives messages between the participants in the room. It can be used to develop features like Chat, Raise Hand etc. To know more about the usePubSub hook, take a look at detailed explanation of publish-subscribe mechanism.

API Reference​

The API references for all the methods utilised in this guide are provided below.

Got a Question? Ask us on discord

Last updated on by saksham-videosdk
Previous
Join Room
Next

Was this helpful?

Not helpfulHelpful