Joining with Preview

Attaching Preview and Error Listeners

It is important to attach preview listener and error listener before calling the preview function in order to get updates if preview got executed successfully or if it failed.

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

const build = () => {
    const hmsInstance = HMSSDK.build(); // save this hms instance

    hmsInstance.addEventListener(
        HMSUpdateListenerActions.ON_PREVIEW,
        onPreviewListener // function that will be called on Preview success
    );

    hmsInstance.addEventListener(
        HMSUpdateListenerActions.ON_JOIN,
        onJoinListener // function that will be called on Join success
    );

    hmsInstance.addEventListener(
        HMSUpdateListenerActions.ON_ERROR,
        onErrorListener // function that will be called on Preview or Join failure
    );
};

Calling Preview and Join functions

Preview screen is a frequently used UX element which allows users to check if their input devices are working properly and set the initial state (mute/unmute) of their audio and video tracks before joining. Once the listeners are attached we can call the preview function. After the preview function is called we have to wait for the preview or error callback before calling the join function.

import { HMSException } from '@100mslive/react-native-hms';

const preview = () => {
    hmsInstance.preview(config);
};

const onErrorListener = (data: HMSException) => {
    // this callback will be triggered if preview or join functions fails
};

const onPreviewListener = () => {
    // this callback will be triggered if preview is successful and then only we should call join
    hmsInstance.join(config);
};

const onJoinListener = () => {
    // this callback will be triggered if join is successful
};