Preview

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 is instant.

To invoke this API call

const config = { userName: 'Jon Snow', authToken: '<Auth token>', // client-side token generated from your token service settings: { // initial states isAudioMuted: true, isVideoMuted: false }, metaData: JSON.stringify({city: 'Winterfell', knowledge: 'nothing'}), rememberDeviceSelection: true, // remember manual device change captureNetworkQualityInPreview: false, // whether to measure network score in preview }; await hmsActions.preview(config);

You would need the same config object that you would pass to join API. The interface to render video, mute/unmute etc. remains the same.

Note that if you use preview, there is no need of maintaining any state on your side for settings(device id, audio, video on). Selections during preview will be moved across to the join call.

Post Preview call

Once you have made the preview call, these things will happen -

  • SDK will connect with the 100ms backend to ensure that the token is correct and fetch the permissions for the role.
  • Network speed will be measured and a connection score will be notified to the UI if turned on.
  • One peer for the local peer will be added to the store, accessible via selectLocalPeer selector.
  • Permission prompt will be given to the user for camera/mic if permissions are not there
  • Audio, Video tracks will be created as per the role permissions.
  • The video can be rendered similarly as post join.
  • Audio Level will start reflecting for the microphone, this can be used to verify that the microphone is working properly.
  • User will be able to see and modify input/output devices.

When you do join

When join is done after the preview call, changes done by the user during preview such as changing device or muting their tracks will be carry forwarded when user enters the room.

Limitations

  • You can't preview and join with two different roles, in case you do need to do this, you can call leave and wait on the promise to resolve before calling join.

Know Others in the room

It's also possible to know about the room state and other peers in the room, if the permission to receive room state is given for the role in dashboard. The peers present in the room can be known by using the selectPeers selector as given here.

Network Quality in preview

Follow this section to get a sense of user's network quality in preview.