100ms Logo



Search docs


Preview screen is a frequently used UX element which allows users to check if their input devices are working properly and set the initial state (mute/unmute) of their audio and video tracks before joining.

100ms SDKs provide an easy-to-use API to back this feature. Additionally, the SDK will try to establish a connection to 100ms server to verify there are no network issues and that the auth credentials are valid so that if everything is in order the subsequent room join will be much faster.

Create an object of HMSConfig class using the available join configurations

HMSConfig config = HMSConfig(authToken: token, userName: user);

To invoke the Preview API call -

HMSSDK hmsSDK = new HMSSDK(); hmsSDK.build(); hmsSDK.preview(onfig);

You need HMSConfig instance which you have created above.

Now you have started preview you need to listen to the updates. You get this via PreviewUpdateListener.

abstract class HMSPreviewListener { /// On success, when you want to preview listen to this callback /// /// - Parameters: /// - room: the room which was joined /// - localTracks: local audio/video tracks list void onPreview({required HMSRoom room, required List<HMSTrack>localTracks}); /// when an error is caught [onHMSError] will be called /// /// - Parameters: /// - error: error which you get. void onHMSError({required HMSError error}); /// This is called when there is a change in any property of the Room /// /// - Parameters: /// - 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 /// - Parameters: /// - 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 will pass an array of local tracks that you can display to the user (see Render Video and Mute sections for more details).

If however there was some error related to getting the input sources or some preflight check has failed delegate callback will be fired with the HMSException instance you can use the object to find what went wrong (see Error Handling).

Add the previewListener instance to