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) => {
    if (!notification) {
        return;
    }

    // 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/hms-video-react';

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 { HMSReactiveStore } from '@100mslive/hms-video-store';

const manager = new HMSReactiveStore();
const hmsNotifications = manager.getNotifications();

const unsubscribe = hmsNotifications.onNotification((notification) => {
    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 eg.
    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;
        default:
            break;
    }
});

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

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 eg.
        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;
            default:
                break;
        }
    }, [notification]);

    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 e.g. -

Screenshare Notification

Preview Error Handling