Join Room

Joining a room is one of the most basic functionalities so we at 100ms have built an easy, developer friendly API to get you started.

A user can interact with participants of a room only after joining the room.

Setting up the HMS Instance

First, create an instance of HMSManager class. Store this instance as a property. We'll have to call build method, that method returns an instance of HMSManager class and the same is used to perform all the operations. Ensure that the SDK object is alive in memory so that you can receive event callbacks from SDK. Simplest way to do this is as follows -

import HmsManager from '@100mslive/react-native-hms'; const hmsInstance = await HmsManager.build();

Check Permissions

Now you can proceed to request Camera and Audio permissions if already not given.

// android import { PERMISSIONS, RESULTS, requestMultiple } from 'react-native-permissions'; requestMultiple([PERMISSIONS.ANDROID.CAMERA, PERMISSIONS.ANDROID.RECORD_AUDIO]).then((results) => { if ( results['android.permission.CAMERA'] === RESULTS.GRANTED && results['android.permission.RECORD_AUDIO'] === RESULTS.GRANTED ) { joinRoom(); } }); // ios joinRoom();

Add event listeners

Add event listeners for all the events such as onPreview, onJoin, onError etc. The actions can be found in HMSUpdateListenerActions class. The event handlers are the way of handling any update happening in hms.

import HmsManager, { HMSUpdateListenerActions } from 'react-native-hms'; // instance acquired from build() method hmsInstance.addEventListener( HMSUpdateListenerActions.ON_PREVIEW, onPreview // function that will be called on Preview success ); hmsInstance.addEventListener(HMSUpdateListenerActions.ON_ERROR, onError); hmsInstance.addEventListener(HMSUpdateListenerActions.ON_JOIN, onJoin);

Join the room

When user indicates that they want to join the room, your app should have -

  1. User Name, the name which should be displayed to other peers in the room
  2. User ID, a unique identifier for the user. Usually a UUID string.
  3. Room ID, the unique room identifier which would have been generated & passed to your app from the backend.
  4. Role, defines the set of permissions for a particular user (optional parameter).
  5. Authentication Token, the client side authentication token generated by your Token Service. You can read about how to generate this token here.

Joining the room connects you to the remote peer and broadcasts your stream to other peers, we need instance of HMSConfig in order to pass the details of room and user to join function

import HmsManager, { HMSUpdateListenerActions, HMSConfig } from '@100mslive/react-native-hms'; // instance acquired from build() method const HmsConfig = new HMSConfig({ authToken, userName }); hmsInstance.preview(HmsConfig); // to start preview // or hmsInstance.join(HmsConfig); // to join a room

Don't forget to add listeners before calling join or preview to receive an event callback which indicates if a call was a success or a failure.

That's it. You have joined a room successfully. 🥳

After calling join your app will be provided an update from the 100ms SDK.

If successful, the HMSUpdateListenerActions.ON_JOIN callback of HMSUpdateListener will be invoked with information about the room encapsulated in the HMSRoom object.

If failure, the HMSUpdateListenerActions.ON_ERROR callback will be invoked with exact failure reason.

Get Room

getRoom is an async function on HMSSDK which returns the currently joined room. Returns null if the peer is not in a room.

// instance acquired from build() method await hmsInstance.getRoom();