Switch Remote Participant Quality - React

This guide outlines the process of changing the camera resolution of a remote participant in a meeting. The method involves utilizing a pubsub mechanism to communicate resolution changes among participants and creating custom video tracks with the desired resolution.

For a clearer understanding, consider this scenario: If participant A wishes to change the camera resolution of participant B, participant A publishes a topic called CHANGE_RESOLUTION with either SD or HD as the value. Participant B subscribes to the CHANGE_RESOLUTION topic and receives the value shared by participant A. Following this, a custom video track is generated with the new resolution value, and this track is then passed into the changeWebcam() function.

Here's a visual representation to enhance the understanding:

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.

• publish()
• disableWebcam()
• changeWebcam()

Step 1 : Create a Pubsub Topic

• First create a pubsub topic called CHANGE_RESOLUTION in ParticipantView Component for publishing selected camera resolution value.

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

function ParticipantView({ participantId }) {
  //..
  const { publish } = usePubSub(`CHANGE_RESOLUTION_${participantId}`, {
    onMessageReceived: async ({ message }) => {
      console.log("message", message);
    },
    onOldMessagesReceived: async (messages, { isLast }) => {
      const newResolution = messages.map(({ message }) => {
        return { ...message };
      });
      newResolution.forEach((res) => {
        if (res.resolution) {
          console.log("resolution", res.resolution);
        }
      });
    },
  });
}

Step 2 : Create Switch Button in ParticipantView Component

• Next, create a switch button with SD and HD options on top of the participant grid item.

• Upon clicking the button, publish a pubsub topic with either the sd or hd value to communicate the desired resolution change.

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

function ParticipantView({ participantId }) {
  //..
  const {
    webcamOn,
    //..
  } = useParticipant(participantId);

  return (
    { webcamOn && (
      <div style={{ position: "absolute", top: "1", right: "10" }}>
        <div>
          {[{ value: "sd", label: "SD", res: "h480p_w640p" },
            { value: "hd", label: "HD", res: "h720p_w1280p" },
          ].map(({ value, label, res }) =>
            label === "SD" || label === "HD" ? (
              <button
                onClick={async (e) => {
                  try {
                    await publish(
                      {
                        resolution: value,
                        resolutionValue: res,
                      } 
                    );
                  } catch (error) {
                    console.log("Error while publishing:", error);
                  }
                  e.stopPropagation();
                }}
              >
                {label}
              </button>
            ) : null
          )}
        </div>
      </div>
    )}
  )
}

Step 3 : Create a ResolutionListener Component

Now, create a ResolutionListener component to subscribe to the CHANGE_RESOLUTION topic.

• Within this component, you will receive either SD or HD as the value. Based on this value, create a custom video track.

• After creating the custom video track with the received value, pass that track into the changeWebcam method to initiate the camera resolution change.

import {
  useMeeting,
  usePubSub,
  createCameraVideoTrack,
} from "@videosdk.live/react-sdk";
import { useEffect, useRef } from "react";
import { useMeetingAppContext } from "../context/MeetingAppContext";
import useMediaStream from "../hooks/useMediaStream";

const ResolutionListner = () => {
  const mMeeting = useMeeting();

  const { publish } = usePubSub(
    `CHANGE_RESOLUTION_${mMeeting?.localParticipant?.id}`,
    {
      onMessageReceived: async ({ message }) => {
        let customTrack;
        try {
          await await mMeeting?.disableWebcam();
        } catch (err) {
          console.error("disableWebcam failed:", err);
        }
        try {
          customTrack = await createCameraVideoTrack({
            encoderConfig: message.resolutionValue,
            optimizationMode: "motion",
            multiStream: false,
          });
        } catch (error) {
          console.log("error in creating custom video track", error);
        }

        try {
          await mMeeting.changeWebcam(customTrack);
        } catch (err) {
          console.error("changeWebcam failed:", err);
        }
      },
    }
  );

  useEffect(() => {
    const publishInitialResolution = async () => {
      try {
        await publish(
          {
            resolution: "sd",
            resolutionValue: "h480p_w640p",
          },
          {
            persist: true,
          }
        );
      } catch (error) {
        console.log("Error while publishing:", error);
      }
    };
    publishInitialResolution();
  }, []);

  return <></>;
};

export default ResolutionListener;

Step 4 : Place the ResolutionListener component in MeetingContainer

• Finally, render the ResolutionListener component in the MeetingContainer to facilitate the reception and transmission of camera resolution changes among participants.

function MeetingContainer() {
  //..
  return (
    <ResolutionListener />
    // ..
  );
}

API Reference

The API references for all the methods utilized in this guide are provided below.

• useParticipant
• useMeeting
• usePubSub()
• createCameraVideoTrack()
• changeWebcam()