Event Listeners

Common Events Implementation Lifecycle

The below diagram shows an overview of which Events are emitted and at what time when you Join or Preview a Room.

You will start receiving event updates after you call preview or join method on HMSSDK instance.

All Available 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_PEER_UPDATE, onPeerListener);

const onPeerListener = ({ peer, type }: { peer: HMSPeer, type: HMSPeerUpdate }) => {
    // 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,
    type
}: {
    track: HMSTrack,
    peer: HMSPeer,
    type: HMSTrackUpdate
}) => {
    // 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);

hmsInstance.addEventListener(HMSUpdateListenerActions.ON_ROOM_UPDATE, onRoomListener);

const onRoomListener = ({ room, type }: { room: HMSRoom, type: HMSRoomUpdate }) => {
    // gets triggered when room is muted or unmuted.
};

const onReconnectingListener = (data) => {
    // triggered whenever local peer is trying to reconnect to room, that is 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.
};


hmsInstance?.addEventListener(
    HMSUpdateListenerActions.ON_SESSION_STORE_AVAILABLE,
    onSessionStoreAvailableListener,
);

const onSessionStoreAvailableListener = ({
    sessionStore,
  }: {
    sessionStore: HMSSessionStore;
}) => {
    // You can use the SessionStore object provided here according to your app logic
    // For example, below we are saving `sessionStore` reference in `Redux`
    dispatch(saveUserData({hmsSessionStore: sessionStore}));
};

Check out the Event Listener Enums docs to understand the Update Types emitted by the SDK for events like ON_PEER_UPDATE, ON_TRACK_UPDATE, ON_ROOM_UPDATE, etc.