Displayer
is an abstract interface and the parent interface of Room
and Player
. Its definition is as follows.
interface Displayer {
readonly callbacks: Callbacks<DisplayerCallbacks>;
readonly observerId: number;
readonly slice?: string;
readonly deviceType: DeviceType;
readonly screenType: ScreenType;
readonly state: DisplayerState;
readonly enableWriteNow: boolean;
readonly handToolKey: string | undefined;
handToolActive: boolean;
disableCameraTransform: boolean;
refreshViewSize(): void;
setCameraBound(cameraBound: CameraBound): void;
memberState(memberId: number): MemberState;
moveCamera(camera: Partial<Camera> & Readonly<{animationMode?: AnimationMode}>): void;
moveCameraToContain(rectangle: Rectangle & Readonly<{animationMode?: AnimationMode}>): void;
bindHtmlElement(element: HTMLDivElement | null): void;
convertToPointInWorld(point: {x: number, y: number}): {x: number, y: number};
scenePreview(scenePath: string, div: HTMLElement, width: number | undefined, height: number | undefined): void;
generateScreenshot(scenePath?: string, width?: number, height?: number): Promise<string>;
fillSceneSnapshot(scenePath: string, div: HTMLElement, width: number, height: number): void;
addMagixEventListener(event: string, listener: EventListener): void;
addMagixEventListener(event: string, listener: EventsListener, fireInterval: number): void;
removeMagixEventListener(event: string, listener?: EventListener): void;
waitMagixEvent(filter: EventFilter): Promise<Event>;
scalePptToFit(animationMode?: AnimationMode): void;
scenePathType(path: string): ScenePathType;
entireScenes(): SceneMap;
}
Callback method manager. The following methods can be used to register callback methods for specific events.
displayer.callbacks.on("onSliceChanged", function(slice) {
console.log("slice uuid change to: "+ slice);
});
You can also cancel the previously registered callback method.
function onSliceChanged(slice) {
console.log("slice uuid change to: "+ slice);
}
// Register callback method
displayer.callbacks.on("onSliceChanged", onSliceChanged);
// Logout callback method
displayer.callbacks.off("onSliceChanged", onSliceChanged);
It is also possible not to specify the callback method, and cancel all the callback methods registered before.
room.callbacks.off("onSliceChanged");
You can also register a one-time callback, which will automatically unregister itself after the first call.
displayer.callbacks.once("onSliceChanged", function(slice) {
console.log("slice uuid change to: "+ slice);
});
Represents the current user's own ID. For room.observerId
, every time you join a room, an observerId
will be assigned until it is released when you leave. If the room is disconnected and reconnected, may change.
For player.observerId
, the following formula is satisfied.
import {AdminObserverId} from "white-web-sdk";
// always print true
console.log(player.observerId === AdminObserverId);
For room.slice
, it means the uuid
of the segment where the real-time room content is being recorded at this moment. If automatic recording is not enabled in the current room, the value is a meaningless string.
For player.slice
, it means the uuid
of the recorded clip played at this moment. If player
does not switch to any recorded segment, it returns to undefined
.
The device type of the client, which is DeviceType, is defined as follows.
enum DeviceType {
// Desktop devices, such as PCs, laptops
Desktop = "desktop",
// Touch devices, such as smartphones, tablets
Touch = "touch",
// Devices that support keyboard, mouse and touch screen at the same time
Surface = "surface",
}
The screen type of the client. The definition of ScreenType is as follows.
enum ScreenType {
// Desktop screen, such as PC, laptop
Desktop = "desktop",
// smart phone
Phone = "phone",
// tablet
Pad = "pad",
// TV
TV = "tv",
}
The business state type, the meaning is inherited and overwritten by its instance.
Whether write operation is currently allowed. For room
, only in the case of obtaining the "writeable" permission and the room status room.phase
is RoomPhase.Connected
, the value is true
. For player
, it is always false
.
Hand tool hotkey. When this key is pressed, it will automatically switch to the hand tool (currentApplianceName="hand"
). After releasing it, it will switch back to the original tool. If not, turn off the function.
Whether it has entered the gripper state, modify it to adjust the current tool state.
Whether to prohibit the device from actively operating the viewing angle, modify it to prohibit/open the device operating viewing angle.
refreshViewSize(): void;
When the "Auto Fit Size" mode is turned on, this method has no effect. After closing, whenever the view size of the whiteboard changes, you must actively call displayer.refreshViewSize()
to adapt.
You can add disableAutoResize: true
to the first parameter when calling whiteWebSdk.joinRoom
or whiteWebSdk.replayRoom
to turn off the "auto-fit size" mode.
In actual operation, we often find that when the size of the browser changes, the size of the whiteboard will also change. If we turn off the "Auto Fit Size" function at this time, we need to add the following code to manually fit the size.
window.addEventListener("resize", function() {
displayer.refreshViewSize();
});
This method is only used for manual size mode. If your SDK is not lower than
2.9.11
, you can ignore this method, because your SDK can automatically adapt the size.
setCameraBound(cameraBound: CameraBound): void
Modify the viewing angle boundary. The user's viewing angle will be limited to this range, beyond this range, the viewing angle will be pulled back. Its type CameraBound
is defined as follows.
type CameraBound = {
// The damping size when the screen breaks through the boundary, the value range is 0.0 ~ 1.0
// The greater the damping, the greater the damping. When 1.0 is taken, no matter how you pull it, the angle of view cannot break through
// The smaller the value, the smaller the damping. When 0.0 is set, the angle of view can be pulled out of the boundary without resistance, and will bounce back only when you let go
// The default value is 0.75
readonly damping?: number;
// The x coordinate of the center point of the boundary in the world coordinate system
// The default value is 0.0
readonly centerX?: number;
// The y coordinate of the center point of the boundary in the world coordinate system
// The default value is 0.0
readonly centerY?: number;
// The width of the boundary in the world coordinate system. If Infinity is taken, it means that there is no restriction on the horizontal direction
// The default value is Infinity
readonly width?: number;
// The height of the boundary in the world coordinate system. If Infinity is taken, it means that there is no restriction on the vertical direction
// The default value is Infinity
readonly height?: number;
// Restricted mode of viewing angle zoom
// There is no limit for not filling
readonly maxContentMode: ContentMode;
// Restriction mode for viewing angle reduction
// There is no limit for not filling
readonly minContentMode: ContentMode;
}
Among them, ContentMode
is used to set the viewing angle's restriction on zooming, we can set it in the following way.
import sdk from "white-web-sdk";
// scale is 2.5
sdk.contentModeScale(2.5);
// Zoom to the point where the short side of the bounding rectangle just touches the screen
sdk.contentModeAspectFill();
// The short side of the bounding rectangle just touches the screen, and then scales it by 2.5 times on this basis
sdk.contentModeAspectFillScale(2.5);
// Zoom to the point where the complete bounding rectangle can be seen on the screen
sdk.contentModeAspectFit();
// Just to the extent that the complete bounding rectangle can be seen on the screen, on this basis, zoom in and out by 0.75 times
sdk.contentModeAspectFitScale(0.75);
// When the zoom is just enough to see the complete bounding rectangle on the screen, and 120 px of empty space is reserved around
sdk.contentModeAspectFitSpace(120);
memberState(memberId: number): MemberState;
Read the MemberState
of a specific user.
moveCamera(camera: Partial<Camera> & Readonly<{animationMode?: AnimationMode}>): void;
Move the viewing angle to the specified position. If the whiteboard is now fitting a certain visual rectangle, this operation will clear the visual rectangle.
The type of the parameter camera
is defined as.
{
// The x-axis coordinate of the point at the center of the viewing angle in the world coordinate system
readonly centerX: number;
// The y-axis coordinate of the point at the center of the viewing angle in the world coordinate system
readonly centerY: number;
// Angle of view zoom ratio
readonly scale: number;
// How the perspective is excessive (the default value is AnimationMode.Immediately)
readonly animationMode?: AnimationMode;
}
enum AnimationMode {
// Excessively move smoothly
Continuous = "continuous",
// Jump to the target in an instant
Immediately = "immediately"
}
moveCameraToContain(rectangle: Rectangle & Readonly<{animationMode?: AnimationMode}>): void;
Adjust the current viewing angle to fit the designated "visual rectangle". After adjusting this method, if the size of the whiteboard changes, the whiteboard will always fit the visual rectangle. However, it should be noted that the following operations will clear and terminate the whiteboard to fit the visual rectangle.
displayer.moveCamera((...))
methodThe type of the parameter rectangle
is defined as.
{
// The x-axis coordinate of the upper left corner of the visual rectangle in the world coordinate system
readonly originX: number;
// The y-axis coordinate of the upper left corner of the visual rectangle in the world coordinate system
readonly originY: number;
// The visual rectangle is wide in the world coordinate system
readonly width: number;
// The visual rectangle is high in the world coordinate system
readonly height: number;
// How the perspective is excessive (the default value is AnimationMode.Immediately)
readonly animationMode?: AnimationMode;
}
enum AnimationMode {
// Excessively move smoothly
Continuous = "continuous",
// Jump to the target in an instant
Immediately = "immediately"
}
bindHtmlElement(element: HTMLDivElement | null): void
This method will bind the whiteboard to a specific Dom node and display it.
The following code can display the whiteboard on the <div>
node with the ID my-whiteboard
.
displayer.bindHtmlElement(document.getElementById("my-whiteboard"));
The following code can unbind the whiteboard.
displayer.bindHtmlElement(null);
The bound <div>
node should not contain child elements, and don't bind multiple displayer
to the same <div>
node. Otherwise, it may cause unexpected consequences.
convertToPointInWorld(point: {x: number, y: number}): {x: number, y: number};
Convert the coordinates on the whiteboard into world coordinates. The coordinate system on the whiteboard is: the origin is the upper left corner of the whiteboard, the x-axis is horizontally to the right, and the y-axis is vertical and downward.
fillSceneSnapshot(scenePath: string, div: HTMLElement, width: number, height: number): void;
Take a snapshot of the specified scene scenePath
(can be regarded as a screenshot), and fill it into the DOM node corresponding to div
. The width of the snapshot is width
and the height is height
.
addMagixEventListener(event: string, listener: EventListener): void;
Add a listener to listen to a custom event named event
. The listener type EventListener
of this method is defined as follows.
type EventListener = (event: Event) => void;
type Event = {
// event name
readonly event: string;
// event payload
readonly payload: any;
// ID of the user who threw the event
readonly authorId: number;
}
addMagixEventListener(event: string, listener: EventsListener, fireInterval: number): void;
Add a listener to listen to a custom event named event
. And combine the events whose interval does not exceed fireInterval
milliseconds into an array and pack the callbacks. The listener type EventsListener
of this method is defined as follows.
type EventsListener = (events: Event[]) => void;
removeMagixEventListener(event: string, listener?: EventListener): void;
Remove the listener. If listener
is undefined
, delete all listeners named `ʻevent``.
waitMagixEvent(filter: EventFilter): Promise<Event>;
After the call, immediately start filtering each custom event received and pass it to filter
for testing. Once filter
returns true
, it means that an event that meets the conditions is found. This method returns a Promise<Event>
, wait until a qualified event is found, and then proceed to the next step. After finding the eligible events, stop filtering the received events, and the whole process ends.
The definition of EventFilter
is as follows.
type EventFilter = (event: Event) => boolean;
We can monitor an event through the following code.
var filter = function(event) {
return event.event === "foobar" && event.payload.count> 10;
};
displayer.waitMagixEvent(filter).then(function(event) {
// Get the custom event that meets the conditions, the process ends
});
scalePptToFit(animationMode?: AnimationMode): void;
If there is a PPT in the current scene, zoom the viewing angle to match the PPT (make the long side of the PPT just against the short side of the screen). If there is no PPT in the current scene, do nothing.
If this operation is successful, the screen will be locked with the rectangle where the PPT is located as the "visual rectangle". This method can pass parameters of type AnimationMode
, if not passed, the default value is AnimationMode.Immediately
. The type is defined as follows.
enum AnimationMode {
// Excessively move smoothly
Continuous = "continuous",
// Jump to the target in an instant
Immediately = "immediately"
}
scenePathType(path: string): ScenePathType;
Get the scene type whose address is path
. The return value type is ScenePathType
, defined as follows.
enum ScenePathType {
// The scene does not exist
None = "none",
// This is a scene group
Dir = "dir",
// this is a scene
Page = "page",
}
entireScenes(): SceneMap;
List all scenes. The return value type is SceneMap
, defined as follows.
type SceneMap = {
readonly [path: string]: Scene[];
}
type Scene = {
// Scene name
readonly name: string;
// How many components are in the current scene
readonly componentsCount: number;
// PPT description contained in the current scene
readonly ppt?: PptDescription;
}