Skip to main content

Collaboration mode

Overview​

Collaboration mode is a feature that allows participants to interact with the content loaded on the web page while still on a Video meeting. It provides a huddle-like experience where a video meeting is overlaid on the same page. In this article, you will learn how to enable, disable, and configure this mode.

How to enable or disable Collaboration mode​

The enabled flag controls the activation of collaboration mode. By default, this mode is enabled, providing a huddle-like experience. If the collaboration mode is turned off, the video conference will occupy the entire page with a familiar experience of video conferencing, altering the user experience.

collaborationMode: {
    enabled: true,
}

Options for Collaboration mode​

Depending on the page you are building, you will need to have the freedom to adjust your layout by setting position for the camaras, layouts and more. In this section, you will learn how to use the position, initialView, and modalPosition to better suit your application.

tip

If the collaboration mode is disabled, the position, initialView, and modalPosition fields will be ignored.

Camera Position​

Camera position refers to the location where the video feed from the participant's camera is displayed on the screen during a video conference.

Choose your preferred camera layout by changing the position property: vertical, with camera positions on the left or right, or horizontal, with positions at the top or bottom. The default value is set to the camera to the right.

Possible values for Camera Position

The example below places the cameras at the top of the layout:

collaborationMode: {
    enabled: true,
    position: "left"
}

A modal refers to a secondary window or pop-up that appears on top of the main screen during a video meeting. This can be used to display meeting settings, or other interactive elements without navigating away from the main screen.

You have the flexibility to select the positioning of the meeting settings and meeting modals layout by changing the modalPosition property: either left, right, or center. The default value is to position on the right.

Possible values for Modal Position

The example below places the modal on the right side of the screen:

collaborationMode: {
    enabled: true,
    modalPosition: "right"
}

Working with both Modal Position and Camera Position​

You can combine both the camera position and modal position settings in a variety of ways to suit your application's needs.

For example, you might choose to have the camera feed display on the bottom of the screen, while the modal pops up on the right. Or, you could have both the camera and the modal display on the same side for a more unified layout.

Please be aware, that in a few scenarios, the camerasPosition value will be given priority, like when choosing camerasPosition: left and layoutPosition: right,

Here you have samples for every scenario allowed:

Possible values for Modal Position when Camera is on Top

Initial View​

It determines how the video feeds from the participants are displayed on the screen when the Video Conference starts.

The initialView property can be set to either list or grid. In the list view, the focus is on the collaboration tools of the page and chat with the meeting participants. In grid view, the layer of cameras expands over the entire screen, prioritizing the conversation between the meeting participants. The host of the video meeting can change the view at any time.

By default, the initialView will be set to list.

The example below places the modal on the right side of the screen:

collaborationMode: {
    enabled: true,
    initialView: "list"
}