Set Viewport - Flutter

Receiving a participant's video at a higher quality than its tile needs costs memory, CPU and network bandwidth. Set the viewport so each participant's video is received at the size it is shown.

The viewport is the size of the visible area in which a participant's video is shown. For example if the viewport size of a particular participant view is 480x360, VideoSDK will download the smallest video layer that covers 480x360. If a participant on screen is present in bigger size, VideoSDK will provide a higher quality video for that particular participant only.

setViewPort()

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.

• It applies to the camera video you receive from a remote participant. It does nothing for the local participant, or while the participant has no video stream.
• It returns a Future that throws a VideoSDKError when the SDK refuses the call, so await it inside try/catch.

Parameters

• width

  • type: int
  • Width of the participant view for which the quality of video is to be adjusted, in physical pixels.

• height

  • type: int
  • Height of the participant view for which the quality of video is to be adjusted, in physical pixels.

Flutter measures widgets in logical pixels. Multiply the size by the device pixel ratio and round it to an int, as the example below does.

Example

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

  @override
  State<ParticipantTile> createState() => _ParticipantTileState();
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
        key: _widgetKey, //assign key to reference this view
        child: const Placeholder(), // your widget that displays the participant
    );
  }

  //call this method whenever the widget height or width gets changed.
  //it can be during stream enabled, stream resume, etc
  Future<void> onViewPortChange() async {
    //get the renderbox
    final RenderBox? renderBox =
        _widgetKey.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox == null) return;

    //Get Size of the renderbox, in physical pixels
    final double pixelRatio = MediaQuery.of(context).devicePixelRatio;
    final int width = (renderBox.size.width * pixelRatio).round();
    final int height = (renderBox.size.height * pixelRatio).round();

    try {
      //apply setViewPort on the participant with height and width of view
      await widget.participant.setViewPort(width, height);
    } on VideoSDKError catch (error) {
      log("Unable to set Viewport ${error.code} ${error.name}");
    }
  }
}