CallView

The CallView lets you easily build UI when inside a call. It handles the state and actions of enabling and disabling audio, front/back camera or video, as well as information about the call participtants.

Usage

In order to create a CallView, you should provide a ViewFactory and a CallViewModel:

public var body: some View {
    CallView(viewFactory: DefaultViewFactory.shared, viewModel: viewModel)
}

If you are using our CallView to add calling support to your views, this view is automatically shown when the callingState in the CallViewModel is .inCall.

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

public func makeCallView(viewModel: CallViewModel) -> some View {
    CustomCallView(viewFactory: self, viewModel: viewModel)
}

CallView components

By using your own implementation of the ViewFactory, you can swap parts of the CallView with your own implementation.

Call Controls View

The call controls view by default displays controls for hiding/showing the camera, muting/unmuting the microphone, changing the camera source (front/back) and hanging up. If you want to change these controls, you will need to implement the makeCallControlsView(viewModel: CallViewModel) -> some View method:

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

Video Participants View

The video participants view slot presents the grid of users that are in the call. If you want to provide a different variation of the participants display, you will need to implement the makeVideoParticipantsView in the ViewFactory:

public func makeVideoParticipantsView(
    viewModel: CallViewModel,
    availableFrame: CGRect,
    onChangeTrackVisibility: @escaping @MainActor(CallParticipant, Bool) -> Void
) -> some View {
    VideoParticipantsView(
        viewFactory: self,
        viewModel: viewModel,
        availableFrame: availableFrame,
        onChangeTrackVisibility: onChangeTrackVisibility
    )
}

In the method, the following parameters are provided:

participants - the list of participants.
availableFrame - the available frame for the participants view.
onChangeTrackVisibility - callback when the track changes its visibility.

Video Participant View

If you want to customize one particular participant view, you can change it via the method makeVideoParticipantView:

public func makeVideoParticipantView(
    participant: CallParticipant,
    id: String,
    availableFrame: CGRect,
    contentMode: UIView.ContentMode,
    customData: [String: RawJSON],
    call: Call?
) -> some View {
    VideoCallParticipantView(
        participant: participant,
        id: id,
        availableFrame: availableFrame,
        contentMode: contentMode,
        customData: customData,
        call: call
    )
}

Additionally, you can change the modifier applied to the view, by implementing the makeVideoCallParticipantModifier:

public func makeVideoCallParticipantModifier(
        participant: CallParticipant,
        call: Call?,
        availableFrame: CGRect,
        ratio: CGFloat,
        showAllInfo: Bool
) -> some ViewModifier {
    VideoCallParticipantModifier(
        participant: participant,
        call: call,
        availableFrame: availableFrame,
        ratio: ratio,
        showAllInfo: showAllInfo
    )
}

Top View

This is the view presented in the top area of the call view. By default, it displays a back button (to go in minimized mode) and a button that shows the list of participants. You can swap this view with your own implementation, by implementing the makeCallTopView in the ViewFactory:

public func makeCallTopView(viewModel: CallViewModel) -> some View {
    CallTopView(viewModel: viewModel)
}

IncomingCallView

CallControls