LocalVideoView

The LocalVideoView displays the video content of the local participant in a video call, both in a floating way or while the user is waiting for others to join. When it’s inside a CornerDragableView, the component can be moved around within its parent component bounds. The component can be used with any participant, but in our default components, it handles only the local participant.

Let’s see how to use the component.

Usage

In order to create the LocalVideoView as a standalone component, you should use the following code:

LocalVideoView(
    viewFactory: viewFactory,
    participant: localParticipant,
    callSettings: viewModel.callSettings,
    call: viewModel.call,
    availableFrame: availableFrame
)

The parameters for this view are as follows:

• viewFactory - the view factory used for creating the views
• participant - the local participant. Could be accessed from the CallViewModel
• callSettings - the local participant’s call settings
• call - the current call
• availableFrame - the available frame for the view.

If you want to use the floating version of the component, you need to create a CornerDraggableView and provide the LocalVideoView as a content:

CornerDraggableView(
    content: { availableFrame in
        LocalVideoView(
            viewFactory: viewFactory,
            participant: localParticipant,
            callSettings: viewModel.callSettings,
            call: viewModel.call,
            availableFrame: availableFrame
        )
    },
    proxy: reader
) {
    withAnimation {
        if participants.count == 1 {
            viewModel.localVideoPrimary.toggle()
        }
    }
}

The LocalVideoView is rotated by 180 degrees on the y-axis, since it feels more natural for the local user to see themselves as mirrored.