appliance-plugin
中文文档
The plug-in is attached to the plug-in mechanism of white-web-sdk to achieve a set of whiteboard teaching AIDS, state synchronization, playback, scene switching and other functions still rely on white-web-sdk or window-manager.
Introduction
A whiteboard pencil drawing plugin based on SpriteJS as a rendering engine.
The following two demos are implemented in the example folder for reference only.
Principle
- The plugin is mainly based on the 2D functionality of SpriteJS, supports webgl2 rendering, and is backward compatible with downgrades to webgl and canvas2d
- The plugin uses the dual webWorker+offscreenCanvas mechanism to process the drawing calculation + rendering logic in a separate worker thread. Does not occupy cpu tasks of the main thread.
Plugin usage
Install
npm install @netless/appliance-plugin
Sign up for plugins
Plug-ins can support two scenarios, their access plug-in names are different:
- Multi-window 'ApplianceMultiPlugin'
import { ApplianceMultiPlugin } from '@netless/appliance-plugin';
- Single whiteboard 'ApplianceSinglePlugin'
import { ApplianceSinglePlugin } from '@netless/appliance-plugin';
workerjs file cdn deployment
We used two-worker concurrency to improve drawing efficiency, which improved it by more than 40% over single-thread efficiency. However, the common dependencies on the two worker files are repeated, so building directly into the package will greatly increase the package size. So we allow the workerjs file cdn deployment by simply deploying the file under @netless/appliance-plugin/cdn into the cdn and then configuring the c of the last two workerjs via the second parameter of getInstance in the plug-in, options.cdn The dn address is fine. This solves the problem of excessive package size
- The total package is about 300kB, and the two wokerjs are 600kB each If you need to consider the size of the package you are building, select Configure cdn.
Access mode reference
Multi-window mode (Interconnecting with window-manager)
import '@netless/window-manager/dist/style.css';
import '@netless/appliance-plugin/dist/style.css';
import { WhiteWebSdk } from "white-web-sdk";
import { WindowManager } from "@netless/window-manager";
import { ApplianceMultiPlugin } from '@netless/appliance-plugin';
import fullWorkerString from '@netless/appliance-plugin/dist/fullWorker.js?raw';
import subWorkerString from '@netless/appliance-plugin/dist/subWorker.js?raw';
const fullWorkerBlob = new Blob([fullWorkerString], {type: 'text/javascript'});
const fullWorkerUrl = URL.createObjectURL(fullWorkerBlob);
const subWorkerBlob = new Blob([subWorkerString], {type: 'text/javascript'});
const subWorkerUrl = URL.createObjectURL(subWorkerBlob);
const whiteWebSdk = new WhiteWebSdk(...)
const room = await whiteWebSdk.joinRoom({
...
invisiblePlugins: [WindowManager, ApplianceMultiPlugin],
useMultiViews: true,
})
const manager = await WindowManager.mount({ room , container:elm, chessboard: true, cursor: true, supportAppliancePlugin: true});
if (manager) {
await ApplianceMultiPlugin.getInstance(manager,
{
options: {
cdn: {
fullWorkerUrl,
subWorkerUrl,
}
}
}
);
}
Single whiteboard (interconnection with white-web-sdk)
import { WhiteWebSdk } from "white-web-sdk";
import { ApplianceSinglePlugin, ApplianceSigleWrapper } from '@netless/appliance-plugin';
import fullWorkerString from '@netless/appliance-plugin/dist/fullWorker.js?raw';
import subWorkerString from '@netless/appliance-plugin/dist/subWorker.js?raw';
const fullWorkerBlob = new Blob([fullWorkerString], {type: 'text/javascript'});
const fullWorkerUrl = URL.createObjectURL(fullWorkerBlob);
const subWorkerBlob = new Blob([subWorkerString], {type: 'text/javascript'});
const subWorkerUrl = URL.createObjectURL(subWorkerBlob);
const whiteWebSdk = new WhiteWebSdk(...)
const room = await whiteWebSdk.joinRoom({
...
invisiblePlugins: [ApplianceSinglePlugin],
wrappedComponents: [ApplianceSigleWrapper]
})
await ApplianceSinglePlugin.getInstance(room,
{
options: {
cdn: {
fullWorkerUrl,
subWorkerUrl,
}
}
}
);
About ’?raw‘ webpack configuration
module: {
rules: [
{
test: /\.m?js$/,
resourceQuery: { not: [/raw/] },
use: [ ... ]
},
{
resourceQuery: /raw/,
type: 'asset/source',
}
]
},
Call introduction
api introduction
The plugin re-implements some of the interfaces of the same name on room or Windows Manager, but internally we have re-injected them back into the original object via injectMethodToObject. No changes are required for external users. As follows:
injectMethodToObject(windowmanager, 'undo');
injectMethodToObject(windowmanager, 'redo');
injectMethodToObject(windowmanager,'cleanCurrentScene');
injectMethodToObject(windowmanager,'insertImage');
injectMethodToObject(windowmanager,'completeImageUpload');
injectMethodToObject(windowmanager,'lockImage');
injectMethodToObject(room,'getImagesInformation');
injectMethodToObject(room,'callbacks');
injectMethodToObject(room,'screenshotToCanvasAsync');
injectMethodToObject(room,'getBoundingRectAsync');
injectMethodToObject(room,'scenePreviewAsync');
injectMethodToObject(windowmanager.mainView,'setMemberState');
The following interfaces are involved:
- Interface on room
setMemberState
undo
redo
callbacks
insertImage
lockImage
completeImageUpload
getImagesInformation
cleanCurrentScene
- windowmanager upper interface
- The mainview interface of windowmanager
setMemberState
undo
redo
callbacks
insertImage
lockImage
completeImageUpload
getImagesInformation
cleanCurrentScene
- Customize
getBoundingRectAsync
screenshotToCanvasAsync
scenePreviewAsync
destroy
Configure parameters
getInstance(wm: WindowManager, adaptor: ApplianceAdaptor)
- wm: WindowManager\room\player. In multi-window mode, you pass WindowManager, and in single-window mode, you pass room or player(whiteboard playback mode).
- adaptor: configures the adapter.
Front-end debugging introduction
During the interconnection process, if you want to understand and track the internal status of the plug-in, you can view the internal data through the following console commands.
const applianPlugin = await ApplianceSinglePlugin.getInstance(...)
applianPlugin.CurrentManager
applianPlugin.CurrentManager.ConsoleWorkerInfo ()