Set Viewport - React Native

Receiving a higher quality than a participant's view needs uses more memory and CPU on the device, which in the end lowers quality.

To avoid this, receive only the video quality that fits each participant's view. This uses less bandwidth.

Viewport is the size of window or visible area in which video for the participant is shown. You can match the received video quality to the viewport size of the participant. For example, if a participant's view is 480x360 pixels, VideoSDK receives the smallest published layer that covers that size, such as 640x360, instead of the full-quality one. If a participant is shown at a bigger size, VideoSDK receives a higher-quality layer for that participant only.

setViewPort()

Call setViewPort() with the width and height of the participant's view. VideoSDK then sends you the video quality that fits that size.

caution

setViewPort() chooses between the quality layers that the participant's camera publishes, so it has no effect on a camera that publishes a single layer. The camera that VideoSDK opens for a participant publishes a single layer when multiStream is false in the config of their RoomProvider. It defaults to true. To learn more, see Simulcast.

Parameters

• width

  • type: number
  • Width of the participant view in pixels. onLayout reports density-independent pixels, so convert them with PixelRatio.getPixelSizeForLayoutSize().

• height

  • type: number
  • Height of the participant view in pixels. Convert it the same way.

Example

import { PixelRatio } from "react-native";
import {
  useParticipant,
  MediaStream,
  RTCView,
} from "@videosdk.live/react-native-sdk";

const { isLocal, webcamStream, setViewPort } = useParticipant(
  participantId,
  {}
);

//update your RTCView with onLayout as shown below
<RTCView
  onLayout={(event) => {
    const { width, height } = event.nativeEvent.layout;
    if (!isLocal && webcamStream) {
      setViewPort(
        PixelRatio.getPixelSizeForLayoutSize(width),
        PixelRatio.getPixelSizeForLayoutSize(height)
      );
    }
  }}
  streamURL={
    webcamStream
      ? new MediaStream([webcamStream.track]).toURL()
      : undefined
  }
  objectFit={"cover"}
  style={{
    flex: 1,
  }}
/>;