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
`() => void` \| `undefined`

A callback to be called after the call is left using the hangup button.

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`	Custom event handler to call after the call was joined	`() => 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`	Custom event handler to call after the call was left	`() => 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`	Custom event handler to call after the call was left	`() => 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`

`ToggleAudioPreviewButton`

This component can be used to toggle the initial audio state in the lobby preview.

Props

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

`ToggleAudioPublishingButton`

This component can be used to

mute/unmute the microphone during a call
select an audio input device during a call

Props

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

`ToggleAudioOutputButton`

This component can be used to select the audio output device (if the currently used browser supports audio output selection).

Props

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

`ToggleVideoPreviewButton`

This component can be used to toggle the initial video state in the lobby preview.

Props

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

`ToggleVideoPublishingButton`

This component can be used to

mute/unmute the camera during a call
select a video input device during a call

Props

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

`CallStatsButton`

The component can be used to show/hide the call statistics.

Props

None

Customization

You can create your own custom component using the built-in call controls as building blocks.

If you want to create custom call controls, follow the Call Controls UI Cookbook guide for more information.

Theme

Call recordings list