The WhiteWebSdk
object is the beginning of everything. Using it, you can indirectly construct room
and player
objects. In business code, it should be constructed in singleton mode.
var whiteWebSdk = new WhiteWebSdk({
appIdentifier: "$APP_IDENTIFIER",
...{otherConfiguration},
});
Among them, appIdentifier
is required. You can read 《AppIdentifier|Project and Permission》 to learn how to get the appIdentifier
.
In addition, the constructor format of WhiteWebSdk
is as follows.
class WhiteWebSdk {
constructor(configuration: WhiteWebSdkConfiguration);
}
WhiteWebSdkConfiguration
is the parameter of the WhiteWebSdk
constructor, which is defined as follows.
type WhiteWebSdkConfiguration = {
readonly appIdentifier: string;
readonly useMobXState?: boolean;
readonly deviceType?: DeviceType;
readonly screenType?: ScreenType;
readonly renderEngine?: RenderEngine;
readonly fonts?: UserFonts;
readonly handToolKey?: string;
readonly fontFamily?: string;
readonly preloadDynamicPPT?: boolean;
readonly loggerOptions?: LoggerOptions;
readonly reconnectionOptions?: Partial<ReconnectionOptions> | false;
readonly onlyCallbackRemoteStateModify?: boolean;
readonly pptParams?: PptParams;
readonly urlInterrupter?: (url: string) => string;
readonly onWhiteSetupFailed?: (error: Error) => void;
readonly plugins?: Plugins;
readonly invisiblePlugins?: ReadonlyArray<InvisiblePluginClass<string, any>>;
readonly wrappedComponents?: WrappedComponents;
};
The parameters obtained from the management console are used to allow Netless to identify which account the client belongs to which project, so that it can handle permissions and billing related matters. You can read 《AppIdentifier|Project and Permission》 to learn how to get the appIdentifier
After setting it to true
, displayer.state
will become a MobX observable object, and its member variables are read-only, which is equivalent to being decorated with @observable
. This means that when its members change, you can use MobX to monitor its changes and respond automatically.
MobX is a transparent functional responsive programming library for the JavaScript community, you can read [《@observable》](https://cn.mobx.js. org/refguide/observable.html) to understand what observable object means.
If the value is left blank or false
, then displayer.state
is a normal JavaScript object.
The device type of the client determines how the SDK handles mouse events and touch events. If the input is wrong, the SDK response behavior to the device input will not meet expectations. If it is not filled in, the type of equipment will be automatically determined according to the internal logic.
Its type is DeviceType
, 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 is used to adjust the gesture recognition parameters, the default is ScreenType.Desktop
. Its type ScreenType
is defined as follows.
enum ScreenType {
// Desktop screen, such as PC, laptop
Desktop = "desktop",
// smart phone
Phone = "phone",
// tablet
Pad = "pad",
// TV
TV = "tv",
}
For the rendering mode of the screen, the default value is RenderEngine.Canvas
. The definition of its type RenderEngine
is as follows.
enum RenderEngine {
// Render graphics in the form of SVG
SVG = "svg",
// Render graphics in the form of Canvas
Canvas = "canvas",
}
There is no difference between the two rendering modes. The performance of RenderEngine.Canvas
is better. We strongly recommend that you use this mode to render the picture.
Provide custom font files for PPT. If you use the PPT to web service, and use non-default fonts in the PPT, and display the converted files in the room, you must configure this field correctly to make the PPT display correctly.
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.
Set the font of the text tool (currentApplianceName="text"
). If not, the text tool will display the browser default font.
Whether to preload the PPT to the webpage, the default is false
.
How the SDK handles log reporting. By default, automatic reporting is enabled. For more information about the log, please refer to 《Online Log》. Its type is LoggerOptions
, defined as.
type LoggerOptions = {
// Whether to prohibit log reporting, false if not filled
readonly disableReportLog?: boolean;
// Report the filtering level. If it is lower than this level, it will not be reported. The default is "info"
readonly reportLevelMask?: Level;
// The filtering level of printing to the console. If it is lower than this level, it will not be printed. The default is "info"
readonly printLevelMask?: Level;
};
// Log level, increasing from left to right
type Level = "debug" | "info" | "warn" | "error";
Disconnect reconnect setting, if you pass in false
or {disableReconnect: true}
, you can turn off disconnect reconnect. Automatic disconnection and reconnection is enabled by default. You can refer to 《Real-time Room State Management》 to learn more about state changes related to disconnection and reconnection.
The default is true
. After enabling this function, if you actively call the method of the room
object to modify the value of room.state
, causing the value to change, the callback method will not be called to notify that ``room.state'' has changed of.
After closing this function, whenever room.state
changes, it will call back.
How to determine if it is actively modifying room.state
? If you call these methods: room.setGlobalState
, room.setMemberState'',
room.setViewMode'', room.setScenePath'',
room.setSceneIndex'', room.moveCamera
, room.moveCameraToContain
, room.putScenes
, room.removeScenes
, room.moveScene
. Then the changes in the fields themselves modified by calling these methods are all changes caused by active modification.
Intercept and replace URLs of resources such as pictures in the whiteboard. For example, the following code can automatically add a suffix to all image URLs.
var whiteWebSdk = new WhiteWebSdk({
appIdentifier: "$APP_IDENTIFIER",
urlInterrupter: function(url) {
return url + "?token=bm1n4pisugWrWK";
},
});
Callback used to handle ``WhiteWebSdk'' initialization failure.
var whiteWebSdk = new WhiteWebSdk({
appIdentifier: "$APP_IDENTIFIER",
onWhiteSetupFailed: function(error) {
console.error(error);
},
});
If the construction fails due to parameters, an error will be thrown when calling new WhiteWebSdk({...})
. This callback is only used to handle error handling when the network is involved or authentication fails.
List of plugins.
List of invisible plugins.
The default value is []
. This is an array filled with React.ComponentType
type, used to package the whiteboard view. You can use it to customize the whiteboard view. For example, use the following code.
import React from "react";
class WrappedCompnent extends React.Component {
render() {
return (
<div>
<span>hello world</span>
{this.props.children}
</div>
);
}
}
var whiteWebSdk = new WhiteWebSdk({
appIdentifier: "$APP_IDENTIFIER",
wrappedComponents: [WrappedCompnent],
});