@StateObject var viewModel = CallViewModel()
public var body: some View {
ZStack {
YourRootView()
CallContainer(viewFactory: CustomViewFactory(), viewModel: viewModel)
}
}
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
:
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))
}