Show Audio Level

import {
    selectPeerAudioByID,
    selectDominantSpeaker,
    selectSpeakers
} from '@100mslive/hms-video-store';

const peerId = '..';
function updateAudioLevel(audioLevel) {
    console.log(`audio level for peer - ${peerID} is ${audioLevel}`);
}

hmsStore.subscribe(updateAudioLevel, selectPeerAudioByID(peerId));

console.log('all speakers', hmsStore.getState(selectSpeakers));

function activeSpeaker(peer, prevPeer) {
    console.log(`previous active speaker - ${prevPeer.name} with role - ${prevPeer.roleName}`);
    console.log(`current active speaker - ${peer.name} with role - ${peer.roleName}`);
}

hmsStore.subscribe(activeSpeaker, selectDominantSpeaker);

import {
    useHMSStore,
    useHMSActions,
    selectLocalPeer,
    selectPeerAudioByID,
    selectSpeakers,
    selectDominantSpeaker
} from '@100mslive/react-sdk';

const AudioLevelInfo = () => {
    /** get localpeer from store */
    const localpeer = useHMSStore(selectLocalPeer);
    /** get a given peer's audio level. */
    const peerAudioLevel = useHMSStore(selectPeerAudioByID(localpeer.id));
    console.log(`audio level for peer - ${localpeer.id} is ${peerAudioLevel}`);

    /** get all speakers. Gives back a list of all peers who are not muted. */
    const allSpeakers = useHMSStore(selectSpeakers);
    console.log('all speakers', allSpeakers);

    /** gets the active speaker */
    const dominantSpeaker = useHMSStore(selectDominantSpeaker);
    console.log(
        `current active speaker - ${dominantSpeaker.name} with role - ${dominantSpeaker.roleName}`
    );
    return (
        <>
            <h1>Active Speaker</h1>
            <span>
                {dominantSpeaker.name}: {dominantSpeaker.id}
            </span>
        </>
    );
};