Preview

Create HMSSDK instance

First, create an instance of HMSSDK using the build function.

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

// create HMSSDK instance using the build function

/**
 * Important Note: Don't build new `HMSSDK` instance before destroying the previous one.
 * for more info checkout {@link https://www.100ms.live/docs/react-native/v2/how--to-guides/install-the-sdk/hmssdk#what-does-destroy-method-do}
 */
const hmsInstance = await HMSSDK.build();

Generate Auth Token

You need Authentication Token to preview 100ms rooms. The recommended way to generate Auth Tokens is by using getAuthTokenByRoomCode method on HMSSDK instance. You can learn more about this method in Getter Methods docs

// Use Room Code for your room here
const roomCode = 'abc-defg-hij'; // Sample Room Code

const token = await hmsInstance.getAuthTokenByRoomCode(roomCode);

Attach Event Listeners

It is advised to attach Event Listeners for HMSUpdateListenerActions.ON_ERROR and HMSUpdateListenerActions.ON_PREVIEW before calling the preview function to get updates if preview got executed successfully or if it failed.

const onPreview = (data: { room: HMSRoom, previewTracks: HMSTrack[] }) => {
    // You can use `previewTracks` to render preview for the local peer
    console.log(data.previewTracks);
};

// add Event Listeners to subscribe to Preview Success or Failure updates
hmsInstance.addEventListener(HMSUpdateListenerActions.ON_ERROR, onError);
hmsInstance.addEventListener(HMSUpdateListenerActions.ON_PREVIEW, onPreview);

Create HMSConfig object

Next, create an object of HMSConfig class using the available joining configurations.

const config = new HMSConfig({
    authToken: token, // client-side token generated from `getAuthTokenByRoomCode` method
    username: 'John Appleseed'
});

Invoke Preview function

Now, you are primed to preview the room and local tracks. All you have to do is call the preview method on HMSSDK object with a HMSConfig object.

hmsInstance.preview(config);

After calling preview your app will be provided an update from the 100ms SDK.

✅ If successful, the onPreview function which is listening for HMSUpdateListenerActions.ON_PREVIEW event will be invoked with information about the Room and Local Audio & Video tracks.

❌ If failure, the onError function which is listening for HMSUpdateListenerActions.ON_ERROR event will be invoked with exact failure reason.

Render Preview Tracks

In case of preview success, onPreview provides an array of local tracks in the parameter previewTracks.

You can use local audio track to change and show audio track mute status.

You can use trackId from local video track to Render Video of local peer, change and show video track mute status.

Refer to Mute and Unmute Guide to know how to check and change mute status.

// Get Local Audio Track from preview tracks
const regularAudioTrack = previewTracks.find((previewTrack) => {
    return (
        previewTrack.source === HMSTrackSource.REGULAR && previewTrack.type === HMSTrackType.AUDIO
    );
});

// Get Local Video Track from preview tracks
const regularVideoTrack = previewTracks.find((previewTrack) => {
    return (
        previewTrack.source === HMSTrackSource.REGULAR && previewTrack.type === HMSTrackType.VIDEO
    );
});

// If we have regular video track, then we can render it
if (regularVideoTrack) {
    return (
        <HmsView
            trackId={regularVideoTrack.trackId} // Render Video track by using its' trackId
            scaleType={HMSVideoViewMode.ASPECT_FILL}
            style={styles.hmsView}
            mirror={true}
        />
    );
}

Receive Room Updates

To receive the Room updates like number of peers in the room or when new peer joins the room, You can also add listener for HMSUpdateListenerActions.ON_ROOM_UPDATE as follows -

const onRoomUpdate = (data: { room: HMSRoom, type: HMSRoomUpdate }) => {
    console.log(data.room.peerCount); // Number of peers inside Room
    console.log(data.room.peers); // list of peers inside Room
};

// This listener is called when there is a change in any property of the Room
hmsInstance.addEventListener(HMSUpdateListenerActions.ON_ROOM_UPDATE, onRoomUpdate);

Remove Preview event listener

When you are ready to Join Room or navigating away from preview, you don't need to keep listening to preview updates.

To stop receiving preview updates, we can remove the preview event listener as follows -

hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_PREVIEW);