100ms Logo

100ms

Docs

Search docs
/

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 { HMSSDK } from '@100mslive/react-native-hms'; const hmsInstance = await HMSSDK.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 { 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 { 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.

Joining room audio/video muted

There are 2 ways to join the room with muted state. First one is with change role which does not require mic and camera permissions. Second one is calling mic and camera mute in onPreview and onJoin which asks for camera and mic permissions.

To join room with audio & video muted using change role, you need to create 2 roles. First role with no audio & video permissions. Second role with audio & video permissions. Join the room using viewer role. Since viewer doesn’t have permissions no need to preview, directly call join and navigate to meeting screen. Once you have joined the room and now you need to speak or share video, call change role API. How to call change role API here.

Viewer Audio & Video Publish Settings

If you want to join the room with preview, call setMute on localPeer's audio and video tracks in the onPreview event listener which is called after the preview is successful.

const onPreview = () => { // instance acquired from build() method hmsInstance?.localPeer?.localVideoTrack()?.setMute(true); hmsInstance?.localPeer?.localAudioTrack()?.setMute(true); }

If you want to join the room directly without preview, call setMute on localPeer's audio and video tracks in the onJoin event listener which is called after the join is successful.

const onJoin = () => { // instance acquired from build() method hmsInstance?.localPeer?.localVideoTrack()?.setMute(true); hmsInstance?.localPeer?.localAudioTrack()?.setMute(true); }

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();