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.

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. Authentication Token: the client side authentication token generated by your Token Service.

Now that you have aforementioned data, you can proceed to join a room.

  1. First, generate an auth token using any http request package available on pub.dev we are using http package.

    Future<String> getToken({required String user, required String room}) async { http.Response response = await http.post(Uri.parse (Constant.getTokenURL), body: {'room_id': room, 'user_id': user, 'role': Constant.defaultRole}); var body = json.decode(response.body); return body['token']; }

    you need to do POST request at the endpoint generated which is present in your dashboard. You need three parameters to make POST request.

    room_id: room id. user_id: name you want. role: role you want.

  1. Next, create an object of HMSConfig class using the available joining configurations

    HMSConfig config = HMSConfig(authToken: token, userName: user);
  2. You'll want to handle the callbacks from joining the room by making your ViewModel, Presenter or whatever you're using to handle business logic implement the HMSUpdateListener interface and overriding the methods.

  3. Now, we are primed to join the room. All you have to do is pass the config object to join present in HMSSDK class.

    Create instance of HMSSDK -

    HMSSDK hmsSDK = new HMSSDK();

    Build HMSSDK -

    hmsSDK.build();

    Now join by passing config object created in previous step.

    hmsSDK.join(config);

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

Now, let's take a look at the listener class you have to implement.

/// 100ms SDK provides callbacks to the client app about any change or update happening in the room after a user has joined by implementing HMSUpdateListener. /// These updates can be used to render the video on screen or to display other info regarding the room. abstract class HMSUpdateListener { /// This will be called on a successful JOIN of the room by the user /// /// This is the point where applications can stop showing its loading state /// [room]: the room which was joined void onJoin({required HMSRoom room}); /// This is called when there is a change in any property of the Room /// /// [room]: the room which was joined /// [update]: the triggered update type. Should be used to perform different UI Actions void onRoomUpdate({required HMSRoom room, required HMSRoomUpdate update}); /// This will be called whenever there is an update on an existing peer /// or a new peer got added/existing peer is removed. /// /// This callback can be used to keep a track of all the peers in the room /// [peer]: the peer who joined/left or was updated /// [update]: the triggered update type. Should be used to perform different UI Actions void onPeerUpdate({required HMSPeer peer, required HMSPeerUpdate update}); /// This is called when there are updates on an existing track /// or a new track got added/existing track is removed /// /// This callback can be used to render the video on screen whenever a track gets added /// [track]: the track which was added, removed or updated /// [trackUpdate]: the triggered update type /// [peer]: the peer for which track was added, removed or updated void onTrackUpdate({required HMSTrack track, required HMSTrackUpdate trackUpdate, required HMSPeer peer}); /// This will be called when there is an error in the system /// and SDK has already retried to fix the error /// [error]: the error that occurred void onHMSError({required HMSException error}); /// This is called when there is a new broadcast message from any other peer in the room /// /// This can be used to implement chat is the room /// [message]: the received broadcast message void onMessage({required HMSMessage message}); /// This is called when someone asks for change or role /// /// for eg. admin can ask a peer to become host from guest. /// this triggers this call on peer's app void onRoleChangeRequest({required HMSRoleChangeRequest roleChangeRequest}); /// This is called every 1 second with list of active speakers /// /// ## A HMSSpeaker object contains - /// - peerId: the peer identifier of HMSPeer who is speaking /// - trackId: the track identifier of HMSTrack which is emitting audio /// - audioLevel: a number within range 1-100 indicating the audio volume /// /// A peer who is not present in the list indicates that the peer is not speaking /// /// This can be used to highlight currently speaking peers in the room /// [speakers] the list of speakers void onUpdateSpeakers({required List<HMSSpeaker> updateSpeakers}); ///when network or some other error happens it will be called void onReconnecting(); ///when you are back in the room after reconnection void onReconnected(); ///when someone requests for track change of yours be it video or audio this will be triggered /// [hmsTrackChangeRequest] request instance consisting of all the required info about track change void onChangeTrackStateRequest({required HMSTrackChangeRequest hmsTrackChangeRequest}); ///when someone kicks you out or when someone ends the room at that time it is triggered /// [hmsPeerRemovedFromPeer] it consists info about who removed you and why. void onRemovedFromRoom({required HMSPeerRemovedFromPeer hmsPeerRemovedFromPeer}); ///whenever a new audio device gets connected to the device or audio device is switched this is triggered void onAudioDeviceChanged( {HMSAudioDevice? currentAudioDevice, List<HMSAudioDevice>? availableAudioDevice}); }

HMSUpdateListener: A class conforming to HMSUpdateListener interface. The methods of HMSUpdateListener are invoked to notify updates happening in the room like a peer joins/leaves, a track got muted/unmutes, etc.

Add this updateListener instance to hmsSDK :

HMSSDK hmsSDK = new HMSSDK(); hmsSDK.build(); hmsSDK.addUpdateListener(updateListener);

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

If successful, the onJoin({required HMSRoom room}) method of HMSUpdateListener will be invoked with information about the room encapsulated in the HMSRoom object.

If failure, the onHMSError({required HMSException error}) method will be invoked with exact failure reason.