Skip to main content

Media & Display

Video​

Video element bound to the usePlayerAPI player from context. Merges the supplied class-name overrides with the default Video styles before rendering through VideoBase.

Used in

const Video: React.ForwardRefExoticComponent<intersection>

VideoBase​

Underlying video element used by Video. Attaches the player to the video element, applies the pillarbox mainVideo styles when available, and renders an exit-fullscreen overlay button when the player has custom fullscreen handlers active.

const VideoBase: React.ForwardRefExoticComponent<intersection>

ConnectionError​

Surfaces a failed call or broadcast on the page. The lifecycle hooks (useCreateCall / useJoinCall / useBroadcast) never throw into render — a failure is reported as status === "error" plus an error value — so without something like this the failure is silent. Drop it next to the hook to make the error visible.

Renders nothing unless status === "error". Restyle via className / style, or replace the contents entirely with children.

import { ConnectionError } from '@video/video-client-react';
function ConnectionError(props: ConnectionErrorProps): Element | literal

Props​

ConnectionErrorProps
childrenReact.ReactNode
error (required)unknown
labelstring
status (required)string

EchoPillarboxVideo​

Re-exports EchoPillarboxVideo.

Used in

import { EchoPillarboxVideo } from '@video/video-client-react';
function EchoPillarboxVideo(props: EchoPillarboxVideoProps): Element

Attributes

  • propsEchoPillarboxVideoPropsRequired

EchoPillarboxWrapper​

Re-exports EchoPillarboxWrapper.

Used in

import { EchoPillarboxWrapper } from '@video/video-client-react';
function EchoPillarboxWrapper(props: EchoPillarboxWrapperProps): Element

Attributes

  • propsEchoPillarboxWrapperPropsRequired

PeerMutedBadge​

Badge that reflects the active audio state of the first stream on the usePeerAPI peer. Renders one class when the peer has audio and another when it is muted; falls back to the textual labels "Muted" / "Unmuted" when no children are supplied.

Used in

import { PeerMutedBadge } from '@video/video-client-react';
function PeerMutedBadge(props: PeerMutedBadgeProps): Element

Props​

PeerMutedBadgeProps
classNamesPeerMutedBadgeClassNames
PeerMutedBadgeHasAudiostring
PeerMutedBadgeNoAudiostring

PeerVideo​

Renders one remote participant's video. Drop the entries from useCallPeers straight in. Children render over the video inside the peer + player contexts.

import { PeerVideo } from '@video/video-client-react';
function PeerVideo(props: PeerVideoProps): Element | literal

Props​

PeerVideoProps
classNamesVideoClassNames
exitFullscreenButtonstring
FullScreenVideoContainerstring
Videostring
childrenReact.ReactNode
peerStream (required)unknown
requestPlayerOptionsRequestPlayerOptions

PeerVideoBase​

Unstyled PeerVideo. Requests a player for the peer's stream and provides the peer + player contexts; renders null while the player spins up.

import { PeerVideoBase } from '@video/video-client-react';
function PeerVideoBase(props: PeerVideoProps): Element | literal

Props​

PeerVideoProps
classNamesVideoClassNames
exitFullscreenButtonstring
FullScreenVideoContainerstring
Videostring
childrenReact.ReactNode
peerStream (required)unknown
requestPlayerOptionsRequestPlayerOptions

PosterImage​

Displays a poster image for the current player. Reads the poster URL from the player's sourceMeta.posterUrl and re-renders whenever the source metadata changes. Typically used as a static preview frame for a video before playback starts.

import { PosterImage } from '@video/video-client-react';
function PosterImage(props: PosterImageProps): React.ReactNode

Attributes

  • propsPosterImagePropsRequired