Set Participant Video Quality - React

This feature allows participants to set other participant's video quality during the meeting.

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• setQuality()

Set Quality

• setQuality method will accept low, med or high as string parameter.

import { useMeeting } from "@videosdk.live/react-sdk";

const MeetingView = () => {
  const { setQuality } = useParticipant(participantId);

  const onPressed = async () => {
    // Low Quality
    try {
      await setQuality("low");
    } catch (err) {
      console.error("setQuality failed:", err);
    }

    // Medium Quality
    try {
      await setQuality("med");
    } catch (err) {
      console.error("setQuality failed:", err);
    }

    // High Quality
    try {
      await setQuality("high");
    } catch (err) {
      console.error("setQuality failed:", err);
    }
  };
  return <>...</>;
};

note

If the quality is set to high, but there is not enough network bandwidth available, quality will reduce untill the newtwork quality improves.

Event

onVideoQualityChanged()

• onVideoQualityChanged() is a callback which gets triggered whenever a participant's video quality changes.

• currentQuality and prevQuality can have values HIGH | MEDIUM | LOW.

Example

import { useParticipant } from "@videosdk.live/react-sdk";

function onVideoQualityChanged(data) {
  const { currentQuality, prevQuality } = data;
}
const {
  displayName
  ...
} = useParticipant(participantId,{
  onVideoQualityChanged,
  ...
});