CallContainer

The easiest way to setup a screen that shows incoming, outgoing and active call screens which contain the current participants video feeds and the call controls is to use the CallContainer.

CallContainer sets up the following functionality by connecting multiple components:

• OutgoingCall: When the user is calling other people. Shows other participants avatars and controls for switching audio/video and canceling the call.
• IncomingCall: When the user is being called by another person. Shows the incoming call screen.
• ActiveCall: When the user is in an active call.

In this section we will cover this higher level component which enables you to quickly implement a Video Call app.

Usage

CallContainer is a container for the different types of calling screens. It is a bound component that automatically handles Incoming/Outgoing and Active call components and states. All you have to do is pass it a ViewFactory and the CallViewModel:

@StateObject var viewModel = CallViewModel()

public var body: some View {
    ZStack {
        YourRootView()
        CallContainer(viewFactory: CustomViewFactory(), viewModel: viewModel)
    }
}

The ViewFactory parameter is used for customizing the different view slots in the call container. You can find more information about the available slots here.

In these slots, you can both replace the UI components and customize the behaviour of the buttons and actions displayed in the screens.

If you want to use our default UI Components and behaviour, you can just pass our default view factory in the creation of the CallContainer:

CallContainer(viewFactory: DefaultViewFactory.shared, viewModel: viewModel)

The viewModel parameter is the CallViewModel object that is responsible for managing the state of the calls. We recommend creating it as a StateObject in the view that will use the CallContainer.

CallModifier

Another way of adding video call support to your views is attaching the CallModifier to them. With the call modifier, you get the call capabilities to any view, while the logic with the CallContainer is encapsulated in the modifier, making the video call support a one-line code.

Here’s an example usage:

@StateObject var viewModel = CallViewModel()

var body: some View {
    YourRootView()
        .modifier(CallModifier(viewModel: viewModel))
}

Optionally, you can also pass a ViewFactory to the CallModifier, if you need to customize the default UI components:

var body: some View {
    YourRootView()
        .modifier(CallModifier(viewFactory: CustomViewFactory(), viewModel: viewModel))
}