Render Video

It all comes down to this. All the setup so far has been done so that we can show live streaming video in our beautiful apps.

The React Native SDK provides a Component HmsView that renders the video on screen.

We can pass video trackId, scaleType and mirror to this component.

import { HMSVideoViewMode } from '@100mslive/react-native-hms'; ... // hms instance acquired from build method const HmsView = hmsInstance.HmsView; const styles = StyleSheet.create({ hmsView: { height: '100%', width: '100%', }, }); <HmsView trackId={trackId} scaleType={HMSVideoViewMode.ASPECT_FILL} style={styles.hmsView} mirror={true} /> ...

Track Id

It is a required prop in the HmsView component. There are 2 types of Peers remotePeers and a localPeer to extract trackId from peers we can use following code snippet. These track IDs can directly be passed to HmsView component

const localTrackId = hmsInstance.localPeer.videoTrack.trackId; const remoteTrackId = hmsInstance.remotePeers[index].videoTrack.trackId;

Scale Type

It is a optional prop in the HmsView component. By default value of scale type is set to HMSVideoViewMode.ASPECT_FILL. There are 3 scale types you can pass to render a video.

import { HMSVideoViewMode } from '@100mslive/react-native-hms'; const ASPECT_FILL = HMSVideoViewMode.ASPECT_FILL const ASPECT_FIT = HMSVideoViewMode.ASPECT_FIT const ASPECT_BALANCED = HMSVideoViewMode.ASPECT_BALANCED


It is a optional prop in the HmsView component. You can mirror the videos as well. By default the mirror prop is set to false. For an attractive rendering you can set mirror true for the videos rendered to the left of the camera.

A Pro tip: Try to render only 2 to 4 videos on a screen and set sink false for other videos. This will stop downloading video data of tiles which are not visible on screen.

Is Degraded

Sometimes people have bad internet connections but everyone deserves a good meeting.When the network is too slow to support audio and video conversations together, the 100ms SDK can automatically turn off downloading other peer's videos, which may improve the audio quality and avoid disconnections.If the network quality improves, the videos will be restored automatically as well. Show a black tile with avatar or initials when isDegraded is true.

const isDegraded: boolean = peer.videoTrack.isDegraded

A Pro tip: For fastest updates we can use ON_PEER_UPDATE and ON_TRACK_UPDATE listeners, these listeners get updated localPeer and remotePeers whenever there is any event related to these values.

HmsInstance.addEventListener( HMSUpdateListenerActions.ON_PEER_UPDATE, onPeerListener ); HmsInstance.addEventListener( HMSUpdateListenerActions.ON_TRACK_UPDATE, onTrackListener ); const onPeerListener = ({ remotePeers, localPeer, }: { peer: HMSPeer; room?: HMSRoom; type?: HMSPeerUpdate; localPeer: HMSLocalPeer; remotePeers: HMSRemotePeer[]; }) => { updateVideoIds(remotePeers, localPeer); // this function can be used to update local and remotePeers on React-Native side }; const onTrackListener = ({ remotePeers, localPeer, }: { peer: HMSPeer; track: HMSTrack; room?: HMSRoom; type?: HMSTrackUpdate; localPeer: HMSLocalPeer; remotePeers: HMSRemotePeer[]; }) => { updateVideoIds(remotePeers, localPeer); };

Troubleshooting in HmsView

If a video renders for the first time and then it doesn't appear at all this can be due to the usage of multiple instances.

However we will recommend you to use a single instance approach if possible, which means once you call a build method and get a hms instance from that save that instance in a global state. Do not call the build method again and again as it will return a new hms instance every time.

If you need to use a multiple instance approach according to your usage then we recommend you to use the HmsView from the instance as shown above. HmsView export from the package is deprecated after version 0.9.4.