Skip to main content

Room Provider

The Room provider is the core element when adding Video Conference in your application. By adding a room provider, you create a virtual space where users, or "participants," can join a video conference room.

How to use

To add the Room provider, you can follow our quickstart guide.

<SuperVizRoomProvider
  developerKey={DEVELOPER_KEY}
  group={{
    id: "GROUP_ID",
    name: "GROUP_NAME",
  }}
  participant={{
    id: "USER_ID",
    name: "USER_NAME",
  }}
  roomId="ROOM_ID">

</SuperVizRoomProvider>
}

Properties

Name	Type	Description
`developerKey`	`string`	Required. Your Developer KEY. If you don’t have a Developer KEY, you can see how to obtain one on the developer portal in our "Setting Up Your Account" section in our documentation.
`roomId`	`string`	Required. This is a unique ID that you can create on your end. Using the same ID you will be able to enter the same room.
`group`	`Group`	Required. You can organize your participants into groups. Usually, a group is a company or organization. See the group section for more details.
`participant`	`Participant`	Required. User details of the participant in the room. See the Participant section for more details.
`debug`	`boolean`	Enable SDK logs in the browser console. Default value: `false`
`stopAutoStart`	`boolean`	Stops the room from starting automatically when the component is mounted. When using `true`, you'll need to start the room manually using the `startRoom`. Default value: `false`

Hooks

`useSuperViz`

`startRoom`

Type: () => void

It gives the user control over when to start the room and connects the local participant to the room.

To complement this, there is a parameter when creating the room provider, the stopAutoStart.

Example:

const { startRoom } = useSuperViz();

return <button onClick={startRoom}>Start Room</button>;

`stopRoom`

Type: () => void

It gives the user control over when to stop the room and disconnects the local participant from the room.

Example:

const { stopRoom } = useSuperViz();

return <button onClick={stopRoom}>Stop Room</button>;

`hasJoinedRoom`

Type: boolean

It returns a boolean value indicating whether the local participant has joined the room, indicating that the room is active.

Example:

const { hasJoinedRoom } = useSuperViz();

return <div>{hasJoinedRoom ? "Room is active" : "Room is not active"}</div>;

Events

`onParticipantLocalJoined`

Type: (participant: Participant) => void

This event will be dispatched when the local participant enters the room.

Example:

const onParticipantLocalJoined = (participant) => {
  console.log("Local participant joined", participant);
};

return (
  <SuperVizRoomProvider
    ...
    onParticipantLocalJoined={onParticipantLocalJoined}>

  </SuperVizRoomProvider>
)

`onParticipantLocalUpdated`

Type: (participant: Participant) => void

This event will be dispatched when there is any change to the local participant.

Example:

const onParticipantLocalUpdated = (participant) => {
  console.log("Local participant updated", participant);
};

return (
  <SuperVizRoomProvider
    ...
    onParticipantLocalUpdated={onParticipantLocalUpdated}>

  </SuperVizRoomProvider>
)

`onParticipantLocalLeft`

Type: (participant: Participant) => void

This event will be dispatched when the local participant leaves the room.

Example:

const onParticipantLocalLeft = (participant) => {
  console.log("Local participant left", participant);
};

return (
  <SuperVizRoomProvider
    ...
    onParticipantLocalLeft={onParticipantLocalLeft}>

  </SuperVizRoomProvider>
)

`onParticipantJoined`

Type: (participant: Participant) => void

This event is dispatched when any participant enters the room.

Example:

const onParticipantJoined = (participant) => {
  console.log("Participant joined", participant);
};

return (
  <SuperVizRoomProvider
    ...
    onParticipantJoined={onParticipantJoined}>

  </SuperVizRoomProvider>
)

`onParticipantListUpdated`

Type: (participant: Participant) => void

This event is dispatched whenever there is a change to the list of participants in the room.

Example:

const onParticipantListUpdated = (participant) => {
  console.log("Participant list updated", participant);
};

return (
  <SuperVizRoomProvider
    ...
    onParticipantListUpdated={onParticipantListUpdated}>

  </SuperVizRoomProvider>
)

`onParticipantLeft`

Type: (participant: Participant) => void

This event is dispatched when any participant leaves the meeting room.

Example:

const onParticipantLeft = (participant) => {
  console.log("Participant left", participant);
};

return (
  <SuperVizRoomProvider
    ...
    onParticipantLeft={onParticipantLeft}>

  </SuperVizRoomProvider>
)

Type Definitions

`Avatar`

Type: object

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

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

Example:

avatar: {
	"imageUrl": "https://<PATH>",
	"model3DUrl": "https://<PATH>",
}

tip

If you don’t have an avatar you can use the default avatars that we provide in the meeting setup, or you can create them on our Ready Player Me, as our code is optimized to work with their 3D models.

`ComponentNames`

Type: enum

List of possible components that a participant can be added to. This is a read-only property, to add a participant into a component, you should use the addComponent method of the room. The options are:

Name	Value	Component
`ComponentNames.COMMENTS`	`comments`	Contextual Comments
`ComponentNames.PRESENCE`	`presence`	Indicates that any presence component is active (Mouse-Pointers, Who-is-Online, or Real-time Data Engine).
`ComponentNames.PRESENCE_AUTODESK`	`presence3dAutodesk`	Presence 3D Autodesk
`ComponentNames.PRESENCE_MATTERPORT`	`presence3dMatterport`	Presence 3D Matterport
`ComponentNames.PRESENCE_THREEJS`	`presence3dThreejs`	Presence 3D Three.js
`ComponentNames.REALTIME`	`realtime`	Real-time Data Engine
`ComponentNames.VIDEO_CONFERENCE`	`videoConference`	Video Conference
`ComponentNames.WHO_IS_ONLINE`	`whoIsOnline`	Who-is-Online

`Group`

Type: object

You can organize your participants into groups, typically representing companies or organizations.

Name	Type	Description
`id`	`string`	Optional. A unique ID that identifies the group. Usually, this ID matches your internal ID of a specific company or organization.
`name`	`string`	Optional. The name of the group.

Example:

group: {
  id: "GROUP_ID",
  name: "GROUP_NAME",
}

`Participant`

Type: object

An object describing the participant information, like name and avatar.

Name	Type	Description
`id`	`string`	Required. Identifier of the participant who is entering the room. Usually, this ID matches the internal ID of your users.
`avatar`	`Avatar`	Participant avatar information.
`name`	`string`	Required. The name of the participant who will enter the room.

Example:

participant: {
  id: "USER_ID",
  name: "USER_ID",
  avatar: {
    imageUrl: "https://<PATH>",
    model3DUrl: "https://<PATH>"
  },
}

How to use
Properties
Hooks
- useSuperViz
Events
Type Definitions