Show Audio Levels

Getting Audio Levels for all speaking peers

We can find the currently speaking peers by subscribing to HMSUpdateListenerActions.ON_SPEAKER event as follows -

import { HMSUpdateListenerActions, HMSSpeaker } from '@100mslive/react-native-hms';

// `onSpeaker` function will be invoked whenever active speaker changes in room
const onSpeaker = (data: HMSSpeaker[]) => {
    // data is the list of `HMSSpeaker` objects
    data.forEach((speaker: HMSSpeaker) => console.log('speaker audio level: ', speaker.level));
};

// hmsInstance obtained by build method
hmsInstance.addEventListener(HMSUpdateListenerActions.ON_SPEAKER, onSpeaker);

Let's look at the HMSSpeaker class:

interface HMSSpeaker {
    level: Number;
    peer: HMSPeer;
    track: HMSTrack;
}

Let's understand the properties of HMSSpeaker class:

1. level : Number -> The level of the audio. It may vary from 0-100. A higher value indicates a higher speaking volume.
2. peer : HMSPeer -> The peer who was speaking. This may be null if the peer has left before the update information has reached the other person.
3. track : HMSTrack -> The audio track corresponding to this speaker. It may be null when the speaker who was speaking loudly, leaves.

Where can we use Active Speakers Updates

Active Speaker Views

To maintain an active speaker view, such as the default view in the Basic Sample App, you need to keep track of active speakers over time. We'll be using the Active Speakers list which we get in function subscribed to HMSUpdateListenerActions.ON_SPEAKER event as mentioned above and then building something that attempts to show all the active speakers while minimizing re-ordering the list.

For advanced usage, do refer our fully featured Example App here.

Dominant Speaker - the loudest speaker

The Active Speakers list which we get in function subscribed to HMSUpdateListenerActions.ON_SPEAKER event is already in descending order based on the audio level. So, the first element of the list will be loudest speaker.