The React component responsible for rendering a participant’s video or screen-share stream.
OptionalintersectionObserverOptions: { root?: Element; rootMargin?: string; threshold?: number | number[] }Optional configuration for the IntersectionObserver used to track component visibility.
Optionalroot?: ElementThe element used as the viewport for visibility checks.
OptionalrootMargin?: stringMargin around the root element.
Optionalthreshold?: number | number[]A single number or an array of numbers indicating visibility thresholds.
OptionaldebounceDelay: numberOptional debounce delay (in milliseconds) to limit how frequently observer callbacks are triggered.
A React component enhanced with adaptive observer-based quality handling.
import React, { useMemo } from "react";
import { withAdaptiveObservers } from "@videosdk.live/react-sdk";
const CustomVideoPlayer = ({ participantId, type }) => {
return <></>;
};
function App() {
const AdaptiveVideoPlayer = useMemo(
() => withAdaptiveObservers(CustomVideoPlayer),
[]
);
return <AdaptiveVideoPlayer participantId="abc" type="video" />;
}
This method can be used to wrap a video player component with adaptive quality observers.
It automatically adjusts stream quality based on the rendered component’s visibility and dimensions to optimize bandwidth usage and performance.