Call Control Actions

Call control actions allow users to execute actions during a call (for example, start recording), and/or before joining (for example, mute/unmute microphone). The built-in CallControls component displays all relevant call controls during a call. Each call control is available to use as separate component.

General usage

The CallControls component displays the available call 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`

This component can be used to leave a call or end the call for all participants but only if the particpant has the requiredGrants 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 show to let the particpant 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