Call Control Actions

Call controls allow users to execute actions during a call (e.g., start recording) or before joining (e.g., mute/unmute). The built-in CallControls component displays controls based on user permissions. Each control is also available as a separate component.

Best Practices

Use CallControls for standard call UIs - it handles permissions automatically.
Use individual control components (e.g., ToggleAudioPublishingButton) for custom layouts.
Provide onLeave callback to handle post-call navigation.

General usage

CallControls displays available controls based on user permissions:

import "@stream-io/video-react-sdk/dist/css/styles.css";
import {
  Call,
  CallControls,
  StreamCall,
  SpeakerLayout,
} from "@stream-io/video-react-sdk";

const MyCallUI = () => {
  let call: Call;

  return (
    <StreamCall call={call}>
      <SpeakerLayout />
      <CallControls />
    </StreamCall>
  );
};

Props

`onLeave`

Type
`(err?: Error) => void` \| `undefined`

A callback invoked after leave attempt. On failure, it receives the thrown Error.

Built-in call controls

Each call control is available as a separate UI component. Each component takes care of authorization.

`AcceptCallButton`

This component is used in the ringing call component to accept an incoming call.

Props

Name	Description	Type
`disabled`	Set `true` to disable the button	`boolean` \| `undefined`
`onClick`	Event handler to override the default click behavior	`MouseEventHandler<HTMLButtonElement>` \| `undefined`
`onAccept`	Callback invoked after accept attempt (receives error on failure)	`(err?: Error) => void` \| `undefined`

`CancelCallButton`

This component can be used to leave a call or to reject an incoming/outgoing call.

Props

Name	Description	Type
`disabled`	Set `true` to disable the button	`boolean` \| `undefined`
`onClick`	Event handler to override the default click behavior	`MouseEventHandler<HTMLButtonElement>` \| `undefined`
`onLeave`	Callback invoked after leave attempt (receives error on failure)	`(err?: Error) => void` \| `undefined`

`CancelCallConfirmButton`

Use this component to leave a call or end it for all participants, only if the participant has OwnCapability.END_CALL.

Props

Name	Description	Type
`disabled`	Set `true` to disable the button	`boolean` \| `undefined`
`onClick`	Event handler to override the default click behavior	`MouseEventHandler<HTMLButtonElement>` \| `undefined`
`onLeave`	Callback invoked after leave/end attempt (receives error on failure)	`(err?: Error) => void` \| `undefined`

`ReactionsButton`

This component can be used to send reactions during a call. The following reactions are supported by default:

like 👍
raise hand ✋
fireworks 🎉

Props

Name	Description	Type
`reactions`	Override or extend the default reactions/emojis	`StreamReaction[]` \| `undefined`

`RecordCallButton`

This component can be used to start/stop call recording. It's also used as a visual indicator to let participants know if there is an ongoing call recording.

Props

Name	Description	Type
`caption`	The explanatory text displayed under the control button	`string` \| `undefined`

`RecordCallConfirmationButton`

This component can be used to start/stop a call recording. A confirmation will be shown to let the participant cancel or confirm to ending the recording that is in progress.

Props

Name	Description	Type
`caption`	The explanatory text displayed under the control button	`string` \| `undefined`

`ScreenShareButton`

This component can be used to start/stop screen sharing. It's also used as a visual indicator to let participants know if there is an ongoing screen share. This component only allows a single ongoing screen share.

Props

Name	Description	Type
`caption`	The explanatory text displayed under the control button	`string` \| `undefined`

Note:

In addition to caption, all of the device-toggle buttons below (ToggleAudioPreviewButton, ToggleAudioPublishingButton, ToggleAudioOutputButton, ToggleVideoPreviewButton, ToggleVideoPublishingButton) accept the following device-selector menu props:

Name	Description	Type	Default
`Menu`	The device-selector menu rendered next to the button	`ComponentType` \| `ReactElement` \| `null`	The matching device selector
`menuPlacement`	Where the menu is positioned relative to the button	`Placement`	`'top'`
`onMenuToggle`	Callback invoked when the menu is opened or closed	`(shown: boolean) => void` \| `undefined`	`undefined`