Who-is-Online

The Who-is-On-line component allows you to see participants who are connected in a room.

Before we start

Before utilizing the Who-is-Online component, it is essential to initialize a room with a defined name and ID for the participant and the group.

How to use

To add a Who-is-Online component to a specific HTML element on your web page, use the following code:

import { WhoIsOnline } from "@superviz/sdk"

const whoIsOnline = new WhoIsOnline({
	position: "top-right"
});
room.addComponent(whoIsOnline);

Properties

See below the options object to use when initializing the Who-is-Online:

Name	Type	Description
position	string	Specifies the location where the component will be displayed. It can be: top-right, top-left, bottom-right, bottom-left, or an ID of an HTML element. Default value: top-right
disablePresenceControls	boolean	If true it won't open any dropdown menu by interacting with the participant profile image. Default value: false
disableGoToParticipant	boolean	Disables the GoTo option when clicking on another participant's avatar. Default value: false
disableFollowParticipant	boolean	Disables the Follow option when clicking on another participant's avatar. Default value: false
disablePrivateMode	boolean	Disables the Private Mode option when clicking on the current participant avatar. Default value: false
disableGatherAll	boolean	Disables the Gather All option. Default value: false
disableFollowMe	boolean	Disables the Follow Me option. Default value: false

GoTo and Follow options

The GoTo and Follow options allow you to navigate to a participant's location or follow their movements. It works automatically in 3D environments, such as the Matterport, ThreeJS, and Autodesk Viewer.

If you want to follow participants Mouse Pointers in a 2D environment, you will need to use a callback function when creating the Mouse Pointer component, like this:

const mousepointers = new MousePointers("#canvasId", {
	onGoToPresence: methodCallback 
});

function methodCallback(coordinates){
	console.log("X position: " + coordinates.x);
	console.log("Y position: " + coordinates.y);
}