Skip to main content


The CallControls component lets you display any number of controls on the UI, that trigger different actions within a call. We provide default actions, such as changing the audio and video mute state or turning on the speakerphone and leaving the call.

On top of these actions, you can provide a custom set of actions through the API.

Let's see how to use it.


The default CallControlsView is created by passing the CallViewModel:

public var body: some View {
CallControlsView(viewModel: viewModel)

If you want to customize (or completely replace) the CallControlsView, you should use the ViewFactory method makeCallControlsView:

public func makeCallControlsView(viewModel: CallViewModel) -> some View {
CustomCallControlsView(viewModel: viewModel)

Next, let's see the CustomCallControlsView:

struct CustomCallControlsView: View {

@ObservedObject var viewModel: CallViewModel

var body: some View {
HStack(spacing: 32) {
VideoIconView(viewModel: viewModel)
MicrophoneIconView(viewModel: viewModel)
ToggleCameraIconView(viewModel: viewModel)
HangUpIconView(viewModel: viewModel)
.frame(maxWidth: .infinity)
.frame(height: 85)

In this example, we are building a custom call controls view, using buttons from the SDK, for muting video/audio, toggling camera and hanging up. You can easily add your own UI elements in the HStack above. You can use the CallViewModel for the standard call-related actions, or use the Call object directly for custom events and reactions (as described here, and for permissions related actions (as described here).

Did you find this page helpful?