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