Notifications

Join Notification

Poor Connection Notification

Notifications can be used to display toast to user about activities happening in the room, such as peer join/leave or new messages. It can also be used to know about any mid call sdk level error.

In order to subscribe for notifications we can use the hmsNotifications object created in the integration step.


import { hmsNotifications } from './hms';

hmsNotifications.onNotification((notification) => {
    // This function will be called when a notification is received
    console.log('notification type', notification.type);

    // The data in notification depends on the notification type
    console.log('data', notification.data);
});


import { useHMSNotifications } from '@100mslive/react-sdk';

function Notification() {
    const notification = useHMSNotifications();

    useEffect(() => {
        if (!notification) {
            return;
        }

        // notification is a reactive object
        // this function will run everytime there is a new notification
        console.log('notification type', notification.type);

        // The data in notification depends on the notification type
        console.log('data', notification.data);
    }, [notification]);

    return <div>Notification: {notification?.type}</div>;
}

Notification types

The notification type is a string and can only take values from the list here. You can use it to check the type of the notification.

The data in notification depends on the notification type. You can use the switch construct to the handle the notification type.


import { hmsNotifications, HMSNotificationTypes } from '@100mslive/hms-video-store';

const unsubscribe = hmsNotifications.onNotification((notification) => {
    console.log('notification type', notification.type);
    console.log('data', notification.data);

    // you can use the following to show appropriate toast notifications for example
    switch (notification.type) {
        case HMSNotificationTypes.PEER_LIST:
            console.log(`${notification.data} are the peers in the room`); // received right after join
            break;
        case HMSNotificationTypes.PEER_JOINED:
            console.log(`${notification.data.name} joined`);
            break;
        case HMSNotificationTypes.PEER_LEFT:
            console.log(`${notification.data.name} left`);
            break;
        case HMSNotificationTypes.NEW_MESSAGE:
            console.log(
                `${notification.data.message} received from ${notification.data.senderName}`
            );
            break;
        case HMSNotificationTypes.ERROR:
            console.log('[Error]', notification.data);
            console.log('[Error Code]', notfication.data.code);
            break;
        case HMSNotificationTypes.RECONNECTING:
            console.log('[Reconnecting]', notification.data);
            break;
        case HMSNotificationTypes.RECONNECTED:
            console.log('[Reconnected]');
            break;
        case HMSNotificationTypes.NAME_UPDATED:
        case HMSNotificationTypes.METADATA_UPDATED:
        case HMSNotificationTypes.ROLE_UPDATED:
            console.log(`peer updated(${notification.type}), new peer=`, notification.data);
            break;
        case HMSNotificationTypes.TRACK_DEGRADED:
            console.log(`track - ${notification.data} degraded due to poor network`);
            break;
        case HMSNotificationTypes.TRACK_RESTORED:
            console.log(`track - ${notification.data} recovered`);
            break;
        case HMSNotificationTypes.ROOM_ENDED:
            console.log(`room ended, reason - ${notification.data.reason}`);
            break;
        case HMSNotificationTypes.REMOVED_FROM_ROOM:
            console.log(`removed from room, reason - ${notification.data.reason}`);
            break;
        case HMSNotificationTypes.DEVICE_CHANGE_UPDATE:
            console.log(`device changed - ${notification.data}`);
            break;
        default:
            break;
    }
});


import { useHMSNotifications, HMSNotificationTypes } from '@100mslive/react-sdk';

function Notification() {
    const notification = useHMSNotifications();

    React.useEffect(() => {
        if (!notification) {
            return;
        }

        console.log('notification type', notification.type);
        console.log('data', notification.data);

        // you can use the following to show appropriate toast notifications for example
        switch (notification.type) {
            case HMSNotificationTypes.PEER_JOINED:
                console.log(`${notification.data.name} joined`);
                break;
            case HMSNotificationTypes.PEER_LEFT:
                console.log(`${notification.data.name} left`);
                break;
            case HMSNotificationTypes.NEW_MESSAGE:
                console.log(
                    `${notification.data.message} received from ${notification.data.senderName}`
                );
                break;
            case HMSNotificationTypes.ERROR:
                console.log('[Error]', notification.data);
                console.log('[Error Code]', notfication.data.code);
                break;
            case HMSNotificationTypes.RECONNECTING:
                console.log('[Reconnecting]', notification.data);
                break;
            case HMSNotificationTypes.RECONNECTED:
                console.log('[Reconnected]');
                break;
            case HMSNotificationTypes.NAME_UPDATED:
            case HMSNotificationTypes.METADATA_UPDATED:
            case HMSNotificationTypes.ROLE_UPDATED:
                console.log(`peer updated(${notification.type}), new peer=`, notification.data);
                break;
            case HMSNotificationTypes.TRACK_DEGRADED:
                console.log(`track - ${notification.data} degraded due to poor network`);
                break;
            case HMSNotificationTypes.TRACK_RESTORED:
                console.log(`track - ${notification.data} recovered`);
                break;
            case HMSNotificationTypes.ROOM_ENDED:
                console.log(`room ended, reason - ${notification.data.reason}`);
                break;
            case HMSNotificationTypes.REMOVED_FROM_ROOM:
                console.log(`removed from room, reason - ${notification.data.reason}`);
                break;
            case HMSNotificationTypes.DEVICE_CHANGE_UPDATE:
                console.log(`device changed - ${notification.data}`);
                break;
            default:
                break;
        }
    }, [notification]);

    return <div>Notification: {notification?.type}</div>;
}

Listening to specific notifications

You can pass a single notification or array of notifications from one of HMSNotificationTypes.


import { hmsNotifications } from './hms';

const unsubscribe = hmsNotifications.onNotification((notification) => {
    console.log('notification type', notification.type);
    console.log('data', notification.data);
}, HMSNotificationTypes.PEER_JOINED);

const unsubscribePeerNotifications = hmsNotifications.onNotification(
    (notification) => {
        if (!notification) {
            return;
        }
        // this will be called when one of HMSNotificationTypes.PEER_JOINED, HMSNotificationTypes.PEER_LEFT is arrived
        console.log('notification type', notification.type);
        console.log('data', notification.data);
    },
    [HMSNotificationTypes.PEER_JOINED, HMSNotificationTypes.PEER_LEFT]
);


import { useHMSNotifications } from '@100mslive/react-sdk';

function Notification() {
    const notification = useHMSNotifications(HMSNotificationTypes.PEER_JOINED);
    const peerNotification = useHMSNotifications([
        HMSNotificationTypes.PEER_JOINED,
        HMSNotificationTypes.PEER_LEFT
    ]);

    React.useEffect(() => {
        if (!notification) {
            return;
        }

        console.log('notification type', notification.type);
        console.log('data', notification.data);
    }, [notification]);

    React.useEffect(() => {
        if (!peerNotification) {
            return;
        }
        console.log('notification type', notification.type);
        console.log('data', notification.data);
    }, [peerNotification]);

    return <div>Notification: {notification?.type}</div>;
}

Unsubscribing from notifications

You can unsubscribe to the notifications by calling the method returned by the hmsNotifications.onNotification function.


const unsubscribe = hmsNotifications.onNotification((notification) => {
    //...
});

unsubscribe();


// No code is required to unsubscribe from notifications
// Unmount the component that calls the `useHMSNotifications` hook

Ideas

You can create notifications with buttons in them, to make it easier for the end user to respond to those notifications. For example -

Screenshare Notification

Change Role Handling peerlist

Have a suggestion? Recommend changes ->