Skip to main content

Buttons

CreateCallButton​

Button that constructs a new call via createCall and reports the result through the supplied setCall callback.

Used in

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

Props​

CreateCallButtonProps
classNamesButtonClassNames
Buttonstring
callOptions (required)CallOptions
setCall (required)unknown

DisableCameraButton​

Button that sets the media-stream controller's videoDisabled flag, disabling the camera track. Renders nothing when the camera is already disabled.

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

Props​

ButtonBaseProps
classNamesButtonClassNames
Buttonstring

DisableMicButton​

Button that sets the media-stream controller's audioDisabled flag, disabling the microphone track.

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

Props​

ButtonBaseProps
classNamesButtonClassNames
Buttonstring

EnableCameraButton​

Button that clears the media-stream controller's videoDisabled flag, enabling the camera track.

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

Props​

ButtonBaseProps
classNamesButtonClassNames
Buttonstring

EnableMicButton​

Button that clears the media-stream controller's audioDisabled flag, enabling the microphone track.

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

Props​

ButtonBaseProps
classNamesButtonClassNames
Buttonstring

EndBroadcastButton​

Button that disposes the broadcast read from useBroadcastAPI and invokes onDisposed once the broadcast's disposed event fires.

Used in

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

Props​

EndBroadcastButtonProps
classNamesButtonClassNames
Buttonstring
onDisposed (required)unknown

EndCallButton​

Button that disposes the call read from useCallAPI and invokes onDisposed once the call's disposed event fires.

Used in

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

Props​

EndCallButtonProps
classNamesButtonClassNames
Buttonstring
onDisposed (required)unknown

FullScreenButton​

Button that toggles the player's fullscreen state. Subscribes to the fullscreen event so the button re-renders when the state changes outside of a direct click.

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

Props​

ButtonBaseProps
classNamesButtonClassNames
Buttonstring

JoinCallButton​

Button that joins an existing call via joinCall and reports the result through the supplied setCall callback. Throws if callId is missing when the button is clicked.

Used in

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

Props​

JoinCallButtonProps
classNamesButtonClassNames
Buttonstring
callId (required)string
joinCallOptions (required)CallOptions
setCall (required)unknown

MuteAudioButton​

Button that mutes the player's audio output.

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

Props​

ButtonBaseProps
classNamesButtonClassNames
Buttonstring

PauseBroadcastButton​

Button that pauses the broadcast by swapping the camera feed for the active placeholder source. If the microphone was already disabled, it stays disabled; otherwise it transitions to the "placeholder" state.

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

Props​

ButtonBaseProps
classNamesButtonClassNames
Buttonstring

PausePlaybackButton​

Button that pauses the player.

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

Props​

ButtonBaseProps
classNamesButtonClassNames
Buttonstring

ResumePlaybackButton​

Button that resumes the player.

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

Props​

ButtonBaseProps
classNamesButtonClassNames
Buttonstring

StartBroadcastButton​

Button that starts a broadcast on the current call using the media-stream controller read from useMediaStreamControllerAPI, and reports the result through setBroadcast.

Used in

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

Props​

StartBroadcastButtonProps
classNamesButtonClassNames
Buttonstring
broadcastOptions (required)BroadcastOptions
audioProducerOptionsPeerProducerOptions
disposeControllerboolean
simulcastunknown
streamName (required)string
videoOnlyboolean
videoProducerOptionsPeerProducerOptions
zeroBitrateunknown
setBroadcast (required)unknown

ToggleCameraButton​

Stateful wrapper that renders DisableCameraButton when the camera is currently on and EnableCameraButton when it is off. Subscribes to the media-stream controller's videoDisabled event so the displayed button stays in sync.

Used in

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

Props​

ToggleCameraButtonProps
cameraDisabledobject
buttonPropsButtonBaseProps
childrenJSX.Element
cameraEnabledobject
buttonPropsButtonBaseProps
childrenJSX.Element

ToggleMicButton​

Stateful wrapper that renders DisableMicButton when the microphone is currently on and EnableMicButton when it is off. Subscribes to the media-stream controller's audioDisabled event so the displayed button stays in sync.

Used in

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

Props​

ToggleMicButtonProps
micDisabledobject
buttonPropsButtonBaseProps
childrenJSX.Element
micEnabledobject
buttonPropsButtonBaseProps
childrenJSX.Element

ToggleMuteButton​

Stateful wrapper that renders UnmuteAudioButton when the player is muted and MuteAudioButton when it is unmuted. Subscribes to the player's muted and unmuted events so the displayed button stays in sync.

Used in

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

Props​

ToggleMuteButtonProps
muteobject
buttonPropsButtonBaseProps
childrenJSX.Element
unmuteobject
buttonPropsButtonBaseProps
childrenJSX.Element

TogglePlayButton​

Stateful wrapper that renders ResumePlaybackButton when the player is paused and PausePlaybackButton when it is playing. Subscribes to the player's paused and playing events so the displayed button stays in sync.

Used in

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

Props​

TogglePlayButtonProps
pausedobject
buttonPropsButtonBaseProps
childrenJSX.Element
playingobject
buttonPropsButtonBaseProps
childrenJSX.Element

UnmuteAudioButton​

Button that unmutes the player's audio output.

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

Props​

ButtonBaseProps
classNamesButtonClassNames
Buttonstring

UnpauseBroadcastButton​

Button that unpauses the broadcast by stopping the active placeholder and clearing the media-stream controller's capturable field. Preserves the microphone's disabled state across the transition.

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

Props​

ButtonBaseProps
classNamesButtonClassNames
Buttonstring