100ms Logo

100ms

Docs

Search docs
/

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 the screen.

We can pass video trackId, scaleType and mirror to HmsView 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} /> ...

Note: One HmsView component can only be connected with one video trackId. To display multiple videos you have to create multiple instances of HmsView component.

  • Once the requirement of that HmsView is finshed it should be disposed.

  • Every HmsView should be unique, which should be done by passing a key property and value as video trackId.

  • Recommended practice is to show maximum of 3 to 4 HmsView on a single page/screen of the app. This avoids network data consumption & video decoding resources of the device.

  • For listening to the audio you have to do absolutely nothing, it's automatically played once you join the room. To mute & unmute audio/ideo refer here. To set volume levels refer here.

Track Id

It is a required prop in the HmsView component. There are 2 types of peers - a localPeer & remotePeer, to extract trackId from peers use the 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;

Make sure the trackId passed in the HMSView is not null because once a trackId is linked to HMSView, it can not be unlinked.

You can make sure the trackId is not null by checking the onTrackListener type as TRACK_ADDED and track type as VIDEO of that peer.

If a null trackId is passed in HMSView you have to unmount the HMSView component and mount it with a new trackId.

This can be done using a key prop and passing trackId as its value in the HmsView component.

<HmsView key={trackId} trackId={trackId} />

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 the screen.

Scale Type

It is an 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

Mirror

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

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 peers' 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

Pro Tip: Always 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.

It's possible to create multiple instances of SDK which is required in some niche requirements.

In most cases, prefer to use a single instance of SDK. That means once you call the build method and get an hms instance, save the instance in a global state.

Do not call the build method again, as it will return a new hms instance every time.

So in this way you can ensure that only a single instance of the SDK is created.