100ms Logo

100ms

Docs

Search docs
/

Event Listeners

You can easily add or remove an event listener by using the addEventListener() or removeEventListener() method. HMSUpdateListenerActions is an enum class which has all the types of event listeners.

import { HMSSDK, HMSUpdateListenerActions, HMSException, HMSMessage, HMSLeaveRoomRequest, HMSSpeaker, HMSPeer, HMSTrack } from '@100mslive/react-native-hms'; const hmsInstance = await HMSSDK.build(); hmsInstance.addEventListener( HMSUpdateListenerActions.ON_PREVIEW, onPreviewListener ); const onPreviewListener = ({ previewTracks }) => { const videoTrack = previewTracks.videoTrack; const videoTrackId = videoTrack.trackId; // gets triggered when we call preview function. You can set your camera and mic on/off while joining. // perform action }; hmsInstance.addEventListener(HMSUpdateListenerActions.ON_JOIN, onJoinListener); const onJoinListener = ({ localPeer, remotePeers }) => { // gets triggered when join is successful. You can navigate to other screens. // use these objects to update your local and remote peers. }; hmsInstance.addEventListener( HMSUpdateListenerActions.ON_ROOM_UPDATE, onRoomListener ); const onRoomListener = ({ room, type, localPeer, remotePeers, }:{ room?: HMSRoom; type?: HMSRoomUpdate; localPeer: HMSLocalPeer; remotePeers: HMSRemotePeer[]; }) => { // gets triggered when room is muted or unmuted. // use these objects to update your local and remote peers. }; hmsInstance.addEventListener( HMSUpdateListenerActions.ON_PEER_UPDATE, onPeerListener ); const onPeerListener = ({ room, type, remotePeers, localPeer, peer, }: { room?: HMSRoom; type?: HMSPeerUpdate; localPeer: HMSLocalPeer; remotePeers: HMSRemotePeer[]; peer: HMSPeer; }) => { // gets triggered when peer leaves, joins, peer's audio or video is muted, starts or stops speaking, role is changed or becomes dominant speaker. // use these objects to update your local and remote peers. }; hmsInstance.addEventListener( HMSUpdateListenerActions.ON_TRACK_UPDATE, onTrackListener ); const onTrackListener = ({ track, peer, room, type, remotePeers, localPeer, }: { track: HMSTrack; peer: HMSPeer; room?: HMSRoom; type?: HMSTrackUpdate; localPeer: HMSLocalPeer; remotePeers: HMSRemotePeer[]; }) => { // gets triggered when track is added, removed, muted, unmuted, degraded and restored back. // use these objects to update your local and remote peers. }; hmsInstance.addEventListener( HMSUpdateListenerActions.ON_ERROR, onErrorListener ); const onErrorListener = (data: HMSException) => { // gets triggered whenever some error occours with a error description. You can either log it or navigate to some error screen. // data contains a error code and message due to which error occoured. }; hmsInstance.addEventListener( HMSUpdateListenerActions.ON_MESSAGE, onMessageListener ); const onMessageListener = (data: HMSMessage) => { // gets triggered whenever you receive a direct message, broadcasted message or role-based message. // whenever local peer receives a message this is triggered. Add the message to reducer. }; hmsInstance.addEventListener( HMSUpdateListenerActions.ON_SPEAKER, onSpeakerListener ); const onSpeakerListener = (data: HMSSpeaker[]) => { // gets triggered whenever someone speaks // an array of speakers is received. Use it to highlight the speakers. }; hmsInstance.addEventListener( HMSUpdateListenerActions.RECONNECTING, onReconnectingListener ); const onReconnectingListener = (data) => { // triggered whenever local peer is trying to reconnect to room i.e. bad network. }; hmsInstance.addEventListener( HMSUpdateListenerActions.RECONNECTED, onReconnectedListener ); const onReconnectedListener = (data) => { // triggered when local peer is reconnected to the room. }; hmsInstance.addEventListener( HMSUpdateListenerActions.ON_ROLE_CHANGE_REQUEST, onRoleChangeRequestListener ); const onRoleChangeRequestListener = (data: HMSRoleChangeRequest) => { // triggered when someone requests a role change for local peer. We can get data.requestedBy.name, data.suggestedRole.name // You can show a modal allowing user to accept or decline the role change request whenever this is triggered. }; hmsInstance.addEventListener( HMSUpdateListenerActions.ON_REMOVED_FROM_ROOM, onRemovedFromRoomListener ); const onRemovedFromRoomListener = (data: HMSLeaveRoomRequest) => { // triggered whenever someone removes local peer from the room or the room is ended. // You can navigate to home screen, clear all reducers and reset all the states whenever this is triggered }; hmsInstance.addEventListener( HMSUpdateListenerActions.ON_CHANGE_TRACK_STATE_REQUEST, onChangeTrackStateRequest ); const onChangeTrackStateRequest = (data: HMSChangeTrackStateRequest) => { // triggered when someone requests a unmute for local peer. We can get data.requestedBy.name, data.trackType // You can show a modal allowing user to accept or decline the role change request whenever this is triggered. }; hmsInstance?.addEventListener( HMSUpdateListenerActions.ON_LOCAL_AUDIO_STATS, onChangeLocalAudioStats, ); const onChangeLocalAudioStats = (data: { localAudioStats: HMSLocalAudioStats; track: HMSLocalAudioTrack; peer: HMSPeer; }) => { // This contains stats related to local audio track. }; hmsInstance?.addEventListener( HMSUpdateListenerActions.ON_LOCAL_VIDEO_STATS, onChangeLocalVideoStats, ); const onChangeLocalVideoStats = (data: { localVideoStats: HMSLocalVideoStats; track: HMSLocalVideoTrack; peer: HMSPeer; }) => { // This contains stats related to local video track. }; hmsInstance?.addEventListener( HMSUpdateListenerActions.ON_RTC_STATS, onChangeRtcStats, ); const onChangeRtcStats = (data: {rtcStats: HMSRTCStatsReport}) => { // This will contain the combined stats for the room. }; hmsInstance?.addEventListener( HMSUpdateListenerActions.ON_REMOTE_AUDIO_STATS, onChangeRemoteAudioStats, ); const onChangeRemoteAudioStats = (data: { remoteAudioStats: HMSRemoteAudioStats; track: HMSRemoteAudioTrack; peer: HMSPeer; }) => { // This contains stats related to remote audio track. }; hmsInstance?.addEventListener( HMSUpdateListenerActions.ON_REMOTE_VIDEO_STATS, onChangeRemoteVideoStats, ); const onChangeRemoteVideoStats = (data: { remoteVideoStats: HMSRemoteVideoStats; track: HMSRemoteVideoTrack; peer: HMSPeer; }) => { // This contains stats related to remote video track. };