Version: Latest

Video Conference

Overview

The Video Conference, a key feature of the SuperViz SDK, empowers you with the ability to connect multiple participants in video meetings.

Before we start

Prior to utilizing the Video Conference, it is essential to initialize the room with a defined name and ID for the participant and for the group.

How to use

To add a Video Conference to your web page, you can use the following code:

import { VideoConference } from "@superviz/sdk/lib/components";

video = new VideoConference({
  avatars: [
    {
      imageUrl: "https://<PATH>",
      model3DUrl: "https://<PATH>"
    }
  ],
  camsOff: false,
  chatOff: false,
	collaborationMode: {
    position: "right",
    modalPosition: "right",
    initialView: "list"
  },
  defaultAvatars: false,
  defaultToolbar: false,
  devices: {
    audioInput: false,
    audioOutput: false,
    videoInput: false
  },
  enableFollow: false,
  enableGather: false,
  enableGoTo: false,
  language: "en-US",
  locales: [ ],
  screenshareOff: false,
  skipMeetingSettings: false,
  offset: {
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
  },
  participantType: "host"
});

room.addComponent(video);

After being initialized, the Video Conference inserts a SuperViz-enabled iframe into the Document Object Model (DOM). Additionally, if necessary, it sends a request to the browser to consent access to the participant's camera and microphone.

With the necessary permissions consented, the participant can set up the input and output devices, like camera and microphone, and enter the meeting room.

Properties

The Video Conference properties can be divided into four contexts: layout, presence controls, behavior, and 3D plugins. Please find below the available parameters:

Layout and languages

Here are properties that influence the visual layout and positioning of elements within the component. It includes settings for the offset, camera positioning and color scheme.

Name	Type	Description
`collaborationMode`	`CollaborationMode`	In this object you can configure the how to position the Video Conference and modals experience, allowing the participants to act with other collaboration tools.
`language`	`string`	The `language` property sets the default language for the meeting interface. While it's possible to change it to a custom language, it's important to remember that you'll need to include this custom language in the list of available locales for it to take effect. Default value: `en`
`locales`	`Locale[]`	The `locales` property allows you to expand language options beyond the default English. Use this field to provide a list of languages available in the meeting overlay.
`offset`	`Offset`	Position the iframe of the video conference by passing top, bottom, left and right. Default value: `{0, 0, 0, 0}`
`participantType`	`ParticipantType`	This object is used to assign appropriate participant permissions within the room. Options are `host`, `guest` and `audience`. Default value: `guest`

Behavior

The behavior properties control the component's operational characteristics. These properties dictate behaviors such as turning off camera feeds, disabling screen sharing and the use of chat.

Name	Type	Description
`allowGuests`	`boolean`	When set to `true`, this flag removes all users from the meeting one minute after the host leaves and there are no other users who can take on the host role. Default value: `false`
`camsOff`	`boolean`	Disables the participant's camera and hides the cameras of other participants in the room. Default value: `false`
`chatOff`	`boolean`	Disables chat for the participant. Default value: `false`
`defaultToolbar`	`boolean`	When set as false, this will remove the toolbar that contains options to open modals like chat, settings, share screen, open or close camera and microphone and the leave button. Default value: `true`
`devices`	`DevicesOptions`	With this field, you have the capability to disable participant specific devices such as video input, audio input and output options when joining the meeting.
`screenshareOff`	`boolean`	Disables screen sharing for the participant. Default value: `false`
`skipMeetingSettings`	`boolean`	Decides whether to bypass the default meeting setup screen and immediately join a meeting. When set as true, participants will enter the meeting with their cameras and microphones disabled. Default value: `false`
`transcriptOff`	`boolean`	Disables the button on toolbar for enabling/disabling the meeting transcript. Default value: `true`

Presence controls

Presence control properties allow you to manage features related to participant interaction and engagement. These properties include options for enabling features like GoTo, Follow and Gather functionality.

Name	Type	Description
`enableFollow`	`boolean`	When set true, enables the Follow functionality, allowing participants to follow the leader in the 3D model. Default value: `false`
`enableGather`	`boolean`	When set true, enables the Gather functionality, which aligns all participants' views with host's, ensuring a shared perspective with a single click. Default value: `false`
`enableGoTo`	`boolean`	When set `true`, enables the GoTo functionality, allowing participants to quickly jump to another's position in the 3D model by clicking on their webcam, facilitating quick location of participants. Default value: `false`

info

This controls are only useful if you are utilizing any of the 3D Presence plugins.

3D plugins

These properties are related to the incorporation of 3D elements within the component. It includes options for default avatars and using a custom avatar per participant.

Name	Type	Description
`avatars`	`Avatar[]`	Provide your own custom avatars to the participant.
`defaultAvatars`	`boolean`	Enables the "Choose Avatar" step during the meeting setup. This step is automatically hidden if a participant has an avatar attached in the SDK initialization. Default value: `false`

info

This controls are only useful if you are utilizing any of the 3D Presence plugins.

Events

The Video Conference in SuperViz SDK offers a range of events that allow you to monitor and respond to several interactions and changes within the meeting. These events provide valuable insights into participant actions, meeting state transitions, and more.

For a comprehensive understanding of events associated with the Video Conference, please refer to the Video Conference Events documentation. This dedicated resource will provide you with detailed information on subscribing to, handling, and utilizing events specific to this component.

By visiting the component-specific documentation, you'll gain access to insights into events like participant join/leave notifications, meeting state changes, and other event-driven functionalities tailored to the Video Conference.

Methods

`subscribe()`

The subscribe method allows you to register your application to listen for specific events within the Video Conference. By subscribing to events, you can capture and respond to important interactions or changes that occur during a video conference session.

Example:

video.subscribe(MeetingEvent.MEETING_START, onStart);

function onStart() {
	// do something
}

Please refer to the Video Conference Events documentation for a list of available event names.

`unsubscribe()`

The unsubscribe method allows you to stop listening to a previously subscribed event within the Video Conference.

Example:

video.unsubscribe(MeetingEvent.MEETING_START, onStart);

`hangUp()`

This method allows you to end the video conference and disconnect from the meeting.

Example:

video.hangUp();

`toggleCam()`

Use this method to toggle participant’s camera on or off during the video conference.

Example:

video.toggleCam();

`toggleChat()`

This method allows you to hide or show the chat modal.

Example:

video.toggleChat();

`toggleMeetingSetup()`

Use this method to open or close the meeting setup options, such as input and output devices.

Example:

video.toggleMeetingSetup();

`toggleMicrophone()`

This method allows you to mute or unmute participant’s microphone during the video conference.

Example:

video.toggleMicrophone();

`toggleScreenShare()`

Use this method to enable or disable participant sharing the screen with other participants in the meeting. Once activated it will ask the participant to share their screen. If activated it stops sharing the screen in the meeting.

Example:

video.toggleScreenShare();

`toggleTranscript()`

This method toggles the transcript feature on and off, enabling you to use the AI Transcript API of the meeting's spoken content. When activated it will ask first for the meeting language before starting the transcript.

Example:

video.toggleTranscript();

Type Definitions

`Avatar[]`

Type: list of objects

While the SuperViz SDK provides a range of default 3D avatars for meetings, you have the flexibility to enrich this experience by adding your list of custom avatars for the meeting.

Name	Type	Description
`imageUrl`	`string`	Required. Path to thumbnail image. Supported formats: `.png` and `.jpg`.
`model3DUrl`	`string`	Path to a 3D model. Only applicable when using Presence3D components. Supported formats: `.glb` and `.gltf`.

Example:

avatars: [
	{
		imageUrl: "https://<PATH>",
		model3DUrl: "https://<PATH>", 
	}
]

`CamerasPosition`

Type: enum

In the CamerasPosition field, you can select from the following options: top, right, left, and bottom. This choice allows you to determine whether you prefer a vertical or horizontal camera layout. Values are:

left
right
top
bottom

Default value: right

For additional information, please refer to the documentation on collaboration mode.

`CollaborationMode`

Type: object

In this object you can configure the how to position the Video Conference and modals experience, allowing the participants to act with other collaboration tools.

Name	Type	Description
`position`	`CamerasPosition`	In this field, you can select from the following options: `top`, `right`, `left`, and `bottom`. This choice allows you to determine whether you prefer a vertical or horizontal camera layout. Default value: right
`modalPosition`	`LayoutPosition`	You have the flexibility to select the positioning of the meeting modals layout, like chat or settings, by choosing either `left`, `right`, or `center`. Default value: right
`initialView`	`LayoutMode`	You can change the layout mode of the video conference before initializing it, by selecting either `list` or `grid`. Default value: list

Example:

collaborationMode: {
  position: "right",
  modalPosition: "right",
  initialView: "list"
}

For additional information, please refer to the documentation on collaboration mode.

`DevicesOptions`

Type: object

With this field, you have the capability to disable participant specific devices such as video input, audio input and output options when joining the meeting.

The DevicesOptions are represented for three values of boolean.

Name	Type	Description
`audioInput`	`boolean`	You can choose if the application will ask the participant to use an audio input device. When set `true`, it will ask user browser to consent access to its microphone. Default value: `true`
`audioOutput`	`boolean`	You can choose if the application will use the participant audio output device. Default value: `true`
`videoInput`	`boolean`	You can choose if the application will ask the participant to use a video input device. When set `true`, it will ask the user browser to consent access to its video camera. Default value: `true`

Example:

devicesOptions: {
	audioInput: true;
	audioOutput: true;
	videoInput: true;
}

`LayoutMode`

Type: enum

You can change the layout mode of the video conference before initializing it, by selecting one of the following values:

list
grid

Default value: list

For additional information, please refer to the documentation on collaboration mode.

`LayoutPosition`

Type: enum

You have the flexibility to select the positioning of the meeting modals layout, like chat or settings, by choosing either left, right, or center. Values are:

left
right
center

Default value: right

For additional information, please refer to the documentation on collaboration mode.

`Locale`

Type: object

This allows you to expand language options beyond the default English. Use this field to provide a list of languages available in the meeting overlay. For additional information on how, please refer to the documentation on how to internacionalize your application.

`Offset`

Type: object

Position the iframe of the video conference by passing top, bottom, left and right.

Name	Type	Description
`top`	`number`	Specifies the distance between the iframe and the top of the page in pixels. Default value: `0`
`bottom`	`number`	Specifies the distance between the iframe and the bottom of the page in pixels. Default value: `0`
`left`	`number`	Specifies the distance between the iframe and the left edge of the page in pixels. Default value: `0`
`right`	`number`	Specifies the distance between the iframe and the right edge of the page in pixels. Default value: `0`

Example:

offset: {
  top: 0,
  bottom: 0,
  left: 0,
  right: 0
}

`ParticipantType`

Type: enum

User ParticipantType to assign appropriate participant permissions within the room. Values are:

host can modify the grid mode and remove users from the room.
guest can participate in the room with camera or voice.
audience can watch the meeting, but won’t be able to activate their camera and unmute themselves. Typically used in broadcast rooms.

Default value: guest

Video Conference

Overview​

Before we start​

How to use​

Properties​

Layout and languages​

Behavior​

Presence controls​

3D plugins​

Events​

Methods​

subscribe()​

unsubscribe()​

hangUp()​

toggleCam()​

toggleChat()​

toggleMeetingSetup()​

toggleMicrophone()​

toggleScreenShare()​

toggleTranscript()​

Type Definitions​

Avatar[]​

CamerasPosition​

CollaborationMode​

DevicesOptions​

LayoutMode​

LayoutPosition​

Locale​

Offset​

ParticipantType​

Overview

Before we start

How to use

Properties

Layout and languages

Behavior

Presence controls

3D plugins

Events

Methods

`subscribe()`

`unsubscribe()`

`hangUp()`

`toggleCam()`

`toggleChat()`

`toggleMeetingSetup()`

`toggleMicrophone()`

`toggleScreenShare()`

`toggleTranscript()`

Type Definitions

`Avatar[]`

`CamerasPosition`

`CollaborationMode`

`DevicesOptions`

`LayoutMode`

`LayoutPosition`

`Locale`

`Offset`

`ParticipantType`