Version: Version 2.0

Video Conference

The Video Conference component enables you to integrate a reliable video conferencing solution into your web application.

How to use

To initialize the Video Conference component, you must initialize a room with a defined name and ID for both the participant and the group.

Usage

To add a video conference to your room, use the following code:

import { VideoConference } from "@superviz/video";

const video = new VideoConference({
  participantType: 'host',
});

room.addComponent(video);

Properties

Name	Type	Description
`participantType`	`ParticipantType`	This property is used to assign appropriate participant permissions within the room. Options are `host`, `guest`, and `audience`. Default value: `guest`
`brand`	`Brand`	An object specifying branding options such as logos and custom styles for the video conference component..
`permissions`	`Permissions`	An object describing participant permissions within the video conference component..
`i18n`	`i18n`	An object specifying translation settings for the video conference component..

Methods

`subscribe()`

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

Example:

video.subscribe(VideoEvent.PARTICIPANT_JOINED, (participant) => {
  console.log('participant.joined', participant);
})

`unsubscribe()`

The unsubscribe method allows you to stop listening to a previously subscribed event during the call.

Example:

video.unsubscribe(VideoEvent.PARTICIPANT_JOINED);

`hangup()`

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

Example:

video.hangup();

`toggleCam()`

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

Example:

video.toggleCam();

`toggleChat()`

Use this method to toggle open/close the chat window.

Example:

video.toggleChat();

`toggleMeetingSetup()`

Use this method to open or close the meeting setup modal.

Example:

video.toggleMeetingSetup();

`toggleMicrophone()`

Use this method to mute or unmute the participant’s microphone during the video conference.

Example:

video.toggleMicrophone();

`toggleScreenShare()`

Use this method to enable or disable participants sharing the screen with other participants in the meeting. When activated, it prompts the participant to share their screen. If already active, it stops the screen sharing.

Example:

video.toggleScreenShare();

`toggleRecording()`

This method toggles the recording feature on and off, enabling you to use the AI Meeting Insights API of the meeting's spoken content and to get the video recording using the Recordings API.

Example:

video.toggleRecording();

Events

`VideoEvent`

You can subscribe to the following Video events:

Event	String Equivalent	Description
`HOST_CHANGED`	`'host.changed'`	Triggered when the host changes.
`PARTICIPANT_JOINED`	`'participant.joined'`	Triggered when a participant joins the meeting.
`MEETING_STATE_UPDATE`	`'meeting.state.update'`	Triggered when the meeting state updates.
`PARTICIPANT_LEFT`	`'participant.left'`	Triggered when a participant leaves the meeting.
`PARTICIPANT_LIST_UPDATE`	`'participant.list.update'`	Triggered when there is any change in the participant list.
`PARTICIPANT_KICKED`	`'participant.kicked'`	Triggered when a participant is kicked from the meeting.

_{^*
Note for CDN Users: Use the string equivalent directly in room.subscribe().}