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.

Calling Preview function

We can call preview method in HMSSDK Instance. it is advised to attach error listener and preview listener before calling that function in order to get updates if preview got executed successfully or if it failed.

import { HMSSDK, HMSUpdateListenerActions, } from '@100mslive/react-native-hms'; const hmsInstance = HMSSDK.build() hmsInstance.addEventListener( HMSUpdateListenerActions.ON_PREVIEW, onPreview, // function that will be called on Preview success ); // attach room and peer update listeners for current status hmsInstance?.addEventListener( MSUpdateListenerActions.ON_ROOM_UPDATE, onRoomListener, ); hmsInstance?.addEventListener( HMSUpdateListenerActions.ON_PEER_UPDATE, onPeerListener, ); hmsInstance.addEventListener(HMSUpdateListenerActions.ON_ERROR, onError);

once listeners are attached we can call preview method as shown in following snippet.

import { HMSConfig } from '@100mslive/react-native-hms'; // instance acquired from build() method const HmsConfig = new HMSConfig({ authToken, username }); hmsInstance.preview(HmsConfig); // to start preview