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 videos in our beautiful app.

To render video you will use HMSVideoView. To use it we will need a few things:

  1. HMSTrack: HMSVideoView will render video using trackId from HMSTrack.
  2. HMSVideoView will use viewSize to get the height and width of the rendered video. If not passed, it will take whatever size is available to the widget.

How to get HMSTrack

HMSTrack is used to render video in HMSVideoView.Single HMSVideoView can be attached to only one HMSVideoTrack.

For resetting the track or updating any property in HMSVideoView it is required to use the new HMSVideoView widget.

And you can get all tracks by listening to HMSUpdateListener.onTrackUpdate

Add a check on these tracks to see if they are video tracks or audio tracks.

HMSSDK automatically handles audio tracks. So they are not required to be set in the application. Although mute/unmute or set audio volume features are provided by SDK.

For example -

/// check if the track is video or audio /// For Audio track.kind == HMSTrackKind.kHMSTrackKindAudio /// For Video track.kind == HMSTrackKind.kHMSTrackKindVideo

Now, you can pass the video track to HMSVideoView to get your live video on the screen.

Render Video

To display video tracks HMSSDK provides the HMSVideoView widget.

class HMSVideoView extends StatelessWidget { /// This will render video with trackId present in track and it will have height = 50 and width = 50 //[track] - track to be displayed final HMSVideoTrack track; //[matchParent] - to match the size of parent widget final matchParent; //[scaleType] - To set the video scaling final ScaleType scaleType; //[setMirror] - To set mirroring of video //Generally true for local peer and false for a remote peer final bool setMirror; }

HMSVideoView also accepts Key as an optional parameter but it is recommended to always pass Key to HMSVideoView So that it can be disposed of and reset correctly during rebuilds.

Let's understand the ScaleType property a bit more. The ScaleType property decides how much space the video will take from the available space.

enum ScaleType { //Video maintains the aspect ratio so it only occupies space based on the aspect ratio SCALE_ASPECT_FIT, //Video occupies all the available space and may get cropped SCALE_ASPECT_FILL, //Video aspect ratio is balanced similar to SCALE_ASPECT_FIT SCALE_ASPECT_BALANCED }

🔑 Note: SCALE_ASPECT_FIT is the default scaleType for HMSVideoView

Dispose HMSVideoView to conserve bandwidth and cleanup elements

Remove the HMSVideoView from UI and it will not render its video & conserve network bandwidth.

It is always advised to stop rendering video when it is not required to save bandwidth consumption. This is done in the example app by setting the isOffscreen property of PeerTrackNode as true when the peer tile is off-screen. So that app does not download the video track when the tile is off-screen.

Limit the number of HMSVideoView on-screen at a time

HMSVideoView internally uses SurfaceView in android and UiKitView in iOS.It is recommended to render at most 4-6 videos at a time on-screen and rest should be paginated for better performance.

For a full example try out our Example app here.