@netless/window-manager v0.4.75
WindowManager
MainView
MainView
也就是主白板, 是垫在所有窗口下面的主白板
因为多窗口的原因,所以抽象出来一个主白板, 并且把以前部分对 room
的操作, 迁移到对 mainView
操作
快速开始
import { WhiteWebSdk } from "white-web-sdk";
import { WindowManager, BuiltinApps } from "@netless/window-manager";
import "@netless/window-manager/dist/style.css";
const sdk = new WhiteWebSdk({
appIdentifier: "appIdentifier",
useMobXState: true // 请确保打开这个选项
});
sdk.joinRoom({
uuid: "room uuid",
roomToken: "room token",
invisiblePlugins: [WindowManager],
useMultiViews: true, // 多窗口必须用开启 useMultiViews
disableMagixEventDispatchLimit: true, // 请确保打开这个选项
}).then(async room => {
const manager = await WindowManager.mount(
room,
container
// 完整配置见下方
);
});
containerSizeRatio
为了保证窗口在不同分辨率下显示效果, 白板在相同的比例区域才能进行同步
chessboard
当挂载的区域不完全符合比例时, 白板会在挂载的 dom 中划分一个符合比例的区域出来, 此时多出来的部分会默认显示为棋盘透明背景
collector
collector
就是窗口最小化时的图标, 默认大小width: 40px;
height: 40px;
光标同步
原本的
SDK
中的cursorAdapter
在多窗口中不可用, 如需要光标同步功能需要在manager
中开启cursor
选项
sdk.joinRoom({
// cursorAdapter: cursorAdapter, 原本开启 sdk 中的 cursorAdapter 需要关闭
userPayload: {
nickName: "光标名称",
avatar: "用户头像链接",
},
});
WindowManager.mount({
cursor: true, // 开启光标同步
});
APP
静态和动态 PPT 是作为 App
插入到白板, 并持久化到白板中
App
或会在页面刷新时自动创建出来, 不需要重复插入
如果 App
需要 scenePath
时,那么一个 scenePath
只能同时打开一个,要求为 App
实例唯一
添加静态/动态 PPT 到白板上
const appId = await manager.addApp({
kind: BuiltinApps.DocsViewer,
options: {
scenePath: "/docs-viewer",
title: "docs1", // 可选
scenes: [], // SceneDefinition[] 静态/动态 Scene 数据
},
});
添加音视频到白板
const appId = await manager.addApp({
kind: BuiltinApps.MediaPlayer,
options: {
title: "test.mp3", // 可选
},
attributes: {
src: "xxxx", // 音视频 url
},
});
设置跟随模式
只有广播端也就是老师需要设置跟随模式, 其他端的主白板都会跟随广播端的视角
注意
manager
的setViewMode
不能和room.setViewMode
同时使用
manager.setViewMode("broadcaster"); // 开启跟随模式
manager.setViewMode("freedom"); // 关闭跟随模式
获取当前的 broadcaster
ID
manager.broadcaster
设置所有 app
的 readonly
manager.setReadonly(true); // 所有窗口变成 readonly 状态
manager.setReadonly(false); // 解锁设置的 readonly, 注意如果当前白板的 isWritable 为 false 以白板的状态为最高优先级
切换 mainView
为可写状态
manager.switchMainViewToWriter();
切换 mainView
scenePath
切换主白板的 ScenePath
并把主白板设置为可写状态
manager.setMainViewScenePath(scenePath);
切换 mainView
sceneIndex
切换主白板的 SceneIndex
并把主白板设置为可写状态
manager.setMainViewSceneIndex(sceneIndex);
获取 mainView
scenePath
manager.getMainViewScenePath();
获取 mainView
sceneIndex
manager.getMainViewSceneIndex();
监听 mainView
的 mode
manager.emitter.on("mainViewModeChange", mode => {
// mode 类型为 ViewVisionMode
});
监听窗口最大化最小化
manager.emitter.on("boxStateChange", state => {
if (state === "maximized") {
// 最大化
}
if (state === "minimized") {
// 最小化
}
if (state === "normal") {
// 恢复正常
}
});
监听 broadcaster
变化
manager.emitter.on("broadcastChange", id => {
// broadcast id 进行了改变
})
关闭 App
manager.closeApp(appId);
手动销毁 WindowManager
manager.destroy();
开发流程
pnpm install
pnpm build
cd example
pnpm install
pnpm dev
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
3 years ago
4 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago