Skip to main content
Version: 1.1.x

Set Viewport

When you are working with Video Calling, video quality is the most important part of communication. When a participant is shown on the screen, consuming multiple high quality although not required, will result in more memory and CPU usage of the device, eventually degrading quality.

The way to optimize around these situation is to consume the video quality which is required to fit the view of a particular participant, resulting in better quality, less usage of network bandwidth and providing a better experience.

Viewport is the size of window or visible area in which video for the participant is shown. We can optimize the consuming video quality based on the viewport size of the participant. For example if the viewport size of a particular participant view is 480x360, VideoSDK will download a 480x360 stream. If a participant on screen is present in bigger size, VideoSDK will provide a higher quality video for that particular participant only.


setViewPort() can be used to achieve the best optimization of the video. This method is called with the width and height of the participant view on the Participant object and VideoSDK will handle the rest.

  • width

    • type: int
    • Width of the participant view for which the quliaty of video is to be adjusted.
  • height

    • type: int
    • Height of the participant view for which the quliaty of video is to be adjusted.


class ParticipantTile extends StatefulWidget {
final Participant participant;
final bool isLocalParticipant;
const ParticipantTile(
{Key? key, required this.participant, this.isLocalParticipant = false})
: super(key: key);

State<ParticipantTile> createState() => _ParticipantTileState();

class _ParticipantTileState extends State<ParticipantTile> {
//create a widgetKey which can be used to refer the Video container
GlobalKey _widgetKey = GlobalKey();

Widget build(BuildContext context) {
return Container(
key: _widgetKey, //assign key to reference this view
child: <Your Widget Here for Displaying participant>

//call this method whenever the widget height of width gets changed.
//it can be during stream enabled, stream resume, etc
onViewPortChange() {
try {
//get the renderbox
final RenderBox renderBox =
_widgetKey.currentContext?.findRenderObject() as RenderBox;

//Get Size of the renderbox
final Size size = renderBox.size;

//apply setViewPort on the participant with height and width of view
widget.participant.setViewPort(size.width, size.height);
} catch (exception) {
log("Unable to set Viewport $exception");

Got a Question? Ask us on discord

Was this helpful?