Video Huddle

This guide will help you migrate your Video Huddle implementation from SuperViz Video SDK v1.0 to v2.0. The main architectural change in v2.0 is the separation of Room functionality into a dedicated package, with VideoHuddle now part of a dedicated Video package.

Breaking Changes

• Package Structure: Room and Video functionality are now in separate packages (@superviz/room and @superviz/video)
• React Components: The <VideoConference /> React component is no longer available - use the class-based component from @superviz/video instead
• Configuration: collaborationMode and several other properties have been removed
• Permissions: All permission-related properties are now consolidated under a single permissions object
• Styling: styles property is replaced with the new brand configuration object
• Events: Some event names have changed - check the documentation for updated event names

Package Changes

v1.0 Package Structure

• @superviz/sdk - For vanilla JavaScript implementations
• @superviz/sdk-react - For React implementations

v2.0 Package Structure

• @superviz/room - Core Room functionality (framework-agnostic)
• @superviz/video - VideoConference and VideoHuddle components
• @superviz/react - Optional React SDK with Room provider and hooks

Note: In v2.0, the @superviz/room package is framework-agnostic and can be used with any JavaScript framework (React, Vue.js, Angular, etc.). The @superviz/react package is optional and provides React-specific bindings, hooks, and components for developers who prefer using React.

Dependencies

v1.0 (Before)

JavaScript

npm install @superviz/sdk

React dedicated SDK

npm install @superviz/sdk-react

v2.0 (After)

JavaScript

npm install @superviz/room
npm install @superviz/video

React dedicated SDK

npm install @superviz/react

Room

Initialization

v1.0 (Before)

JavaScript

import { SuperVizRoom } from '@superviz/sdk'

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

React dedicated SDK

import { SuperVizRoomProvider } from "@superviz/react-sdk";

<SuperVizRoomProvider
  developerKey="YOUR_DEVELOPER_TOKEN"
  group={{
    id: "GROUP_ID",
    name: "GROUP_NAME",
  }}
  participant={{
    id: "USER_ID",
    name: "USER_NAME",
  }}
  roomId="ROOM_ID"
>
  {/* Your application components go here */}
</SuperVizRoomProvider>

v2.0 (After)

JavaScript

import { createRoom } from '@superviz/room';

const room = await createRoom({
  developerToken: 'YOUR_DEVELOPER_TOKEN',
  roomId: 'YOUR_ROOM_ID',
  participant: {
    id: 'participant-id',
    name: 'Participant Name',
  },
  group: {
    id: 'GROUP_ID',
    name: 'GROUP_NAME',
  },
});

Important Changes:

• Import from @superviz/room instead of @superviz/sdk
• Use createRoom function instead of SuperVizRoom

React dedicated SDK

import { RoomProvider } from "@superviz/react";

const { joinRoom } = useRoom();

await joinRoom({
  participant: {
    id: "PARTICIPANT_ID",
    name: "PARTICIPANT_NAME",
  },
  group: {
    name: "GROUP_NAME",
    id: "GROUP_ID",
  },
  roomId: "ROOM_ID",
});

<RoomProvider developerToken="YOUR_DEVELOPER_TOKEN">
  {/* Your application components go here */}
</RoomProvider>

Important Changes:

• Import from @superviz/react instead of @superviz/react-sdk
• Initialize the room using the joinRoom function from the useRoom hook

Events

Version 2.0 serves the same events as v1.0. Some event names might have been changed. We recommend you to verify the event names in the @superviz/room documentation.

VideoHuddle Component

Initialization

v1.0 (Before)

JavaScript

import { VideoConference } from '@superviz/sdk';

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

React dedicated SDK

import { VideoConference } from "@superviz/react-sdk"

function Room() {
  const collaborationMode = {
    enabled: true,
  };

  return (
    <VideoConference
      participantType="host"
      collaborationMode={collaborationMode}
    />
  );
}

v2.0 (After)

JavaScript

import { VideoHuddle } from '@superviz/video';

const video = new VideoHuddle({
  participantType: "host",
});

Important Changes:

• Import from @superviz/video instead of @superviz/sdk

React dedicated SDK

import { VideoHuddle } from '@superviz/video';

const video = new VideoHuddle({
  participantType: "host",
});

Important Changes:

• Import from @superviz/video instead of @superviz/sdk
• No need to define collaborationMode as @superviz/video now includes both VideoConference and VideoHuddle components
• <VideoConference /> is not availble in version 2.0. Use the VideoConference component from the @superviz/video package.

Properties

JavaScript

Removed Properties:

• collaborationMode

• defaultToolbar

• devices

• offset (use styles instead)

• callbacks (use methods instead)

• skipMeetingSettings

• canShowAudienceList - This is now visible in the UI

• avatars

• defaultAvatars

New Properties:

• brand - Styling configuration
• i18n - Language settings
• permissions - Access control
• toggleMic - Microphone controls

Property Migrations:

Property	New location	New name
Styles	brand	No change
Language	i18n	No change
Permissions	permissions	No change
allowGuests	permissions	No change
camsOff	permissions	toggleCamera
chatOff	permissions	toggleChat
chatOff	permissions	toggleMic
screenshareOff	permissions	toggleScreenShare
enableRecording	permissions	toggleRecording
enableFollow	permissions	No change
enableGather	permissions	No change
enableGoTo	permissions	No change

React dedicated SDK

The <VideoConference /> React component is not available in version 2.0. Use the VideoConference class from @superviz/video package instead.

Events & callbacks

JavaScript

Version 2.0 serves the same events as v1.0. Some event names might have been changed. We recommend you to verify the event names in the @superviz/video documentation.

React dedicated SDK

You can choose to use events from the @superviz/video package or user the callbacks from the useHook hook.

Updated UI/UX

SuperViz Video SDK v2.0 comes with an improved UI and UX for VideoConference. The new design offers a better user experience while maintaining all the functionality from v1.0.

Example Implementation

JavaScript

We've prepared a complete example of implementing VideoConference with SuperViz 2.0. You can find the example implementation in the official tutorials repository.

React dedicated SDK

We've prepared a complete example of implementing VideoConference with SuperViz 2.0. You can find the example implementation in the official tutorials repository.