Join Room

To join and interact with others in audio or video call, the user needs to join a 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. Authentication Token - the client side authentication token generated by the Token Service.

You can also optionally pass these fields -

  1. settings: {isAudioMuted, isVideoMuted} - you can use this to set the initial audio/video state at time of join.
  2. User metadata - this can be used to pass any additional metadata associated with the user.

We'll call the join method on hmsActions object with a config containing above fields to join the room.

join.js
import { hmsActions } from './hms'; const config = { userName: 'Jon Snow', authToken: '<Auth token>', // client-side token generated from your token service settings: { isAudioMuted: true, isVideoMuted: false }, metaData: JSON.stringify({city: 'Winterfell', knowledge: 'nothing'}), rememberDeviceSelection: true // remember manual device change }; hmsActions.join(config);

That's it. You have joined a room successfully 🥳. You should now be able to have an audio only call with this.

Getting Current Room State

You might want to hide your join form from the UI or navigate to another page when the join has completed. We provide some selectors which operate upon the room state to give the relevant information. One such selector is selectIsConnectedToRoom. Here's how to use it -

import { hmsStore } from './hms'; import { selectIsConnectedToRoom } from '@100mslive/hms-video-store'; // use getState to get the state at any time console.log("isConnected - ", hmsStore.getState(selectIsConnectedToRoom)) function onRoomStateChange(connected) { console.log("isConnected - ", connected) } // you can also subscribe to the state and get your function called whenever the state changes hmsStore.subscribe(onRoomStateChange, selectIsConnectedToRoom)

For more granular room states, use selectRoomState.