Quickstart

This guide will help you quickly integrate the SuperViz Video SDK into your application, enabling powerful video conferencing capabilities.

JavaScript Quickstart

Follow these steps to add the Video Conference component to your application:

1

Before we start

Ensure your development environment is set up with Node.js (v14 or more recent) and either npm or yarn for package management.

2

Install the package

Install the SDK package with the npm package:

npm install --save @superviz/sdk

3

Import the Room

After installation, import SuperVizRoom and VideoConference from the SDK into your application code:

import {
  SuperVizRoom,
  VideoConference
} from '@superviz/sdk'

4

Initialize a Room

Next, initialize a room using your DEVELOPER_KEY and an options object. The room serves as the main access point for all collaboration features, with various methods to add components.

For details on the options object, refer to our API Reference page.

async function initializeSuperVizRoom() {
  const room = await SuperVizRoom(DEVELOPER_KEY, {
    roomId: "ROOM_ID",
    group: {
      id: "GROUP_ID",
      name: "GROUP_NAME",
    },
    participant: {
      id: "USER_ID",
      name: "USER_NAME"
    },
  })

  return room
}

5

Add the Video Conference Component

Initialize the VideoConference component by specifying the participantType and disable the collaborationMode.

Finally, add the component to the room to initiate the video conference component:

collaboration Mode

When collaborationMode is enabled, the video cameras are displayed in a list view, which facilitates collaboration on shared content instead of occupying the entire screen.

const video = new VideoConference({
  participantType: "host",
  collaborationMode: {
    enabled: false,
  },
});

room.addComponent(video);

6

Next steps

You are now all set! See how you can configure the video huddle:

JavaScript Quickstart​