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 on your page, you can 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);
}