CallControls

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.

Usage

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).