@netless/ppt-plugin v0.1.57
@netless/ppt-plugin
用于 white-web-sdk 的 ppt 播放插件.
与 white-web-sdk 内置播放器的差别
- @netless/ppt-plugin 会自动更新 netless-ppt.js 文件, 后者是 ppt 播放器的主要运行代码.
- @netless/ppt-plugin 附加了切页动画功能
用法
初始化
import { WhitePPTPlugin, Player } from "@netless/ppt-plugin";
const whiteWebSdk = new WhiteWebSdk({
..., // 其他配置
// WhitePPTPlugin 负责操作 ppt
invisiblePlugins: [WhitePPTPlugin],
// Player 作为展示 ppt 的 react 组件, 将添加到白板下层
wrappedComponents: [Player]
});
// 以下代码需在加入房间成功之后执行
let pptPlugin = room.getInvisiblePlugin(WhitePPTPlugin.kind) as WhitePPTPlugin;
if (!pptPlugin) {
await room.createInvisiblePlugin(WhitePPTPlugin, {});
}
pptPlugin = room.getInvisiblePlugin(WhitePPTPlugin.kind) as WhitePPTPlugin;
// 初始化插件
pptPlugin.setupConfig({
// ppt 资源 host
assetsDomain: "https://convertcdn.netless.link",
// white-web-sdk token
sdkToken: netlessToken.sdkToken,
loadConfig: {
// ppt 资源前缀
scheme: "https",
// 是否启用后端排版
useServerWrap: true,
},
});
// 插件的报错, 可以在这里监听
WhitePPTPlugin.eventHub.on(WhitePPTPlugin.EVENTS.ERROR, e => console.log(e));
ppt 操作
- 发起 ppt 转换任务
// 返回任务的 taskId
const taskId = await pptPlugin.convertPPT({
// ppt 源文件 url,
url: "",
// 转换进度回调, progress 为 0 - 100 的整数, 可选参数
onProgressUpdated: (progress: number) => {},
// 进度查询间隔, 单位 ms, 默认 500ms, 可选参数
checkProgressInterval: 500,
// 进度查询超时时间, 单位 ms, 如果查询时间超过超时限制, 则任务转换失败, 默认 15 分钟, 可选参数
checkProgressTimeout: 60 * 1000 * 15,
// 是否开启预览功能
preview: false,
})
- 加载 ppt
// 通过 ppt 转换任务的 taksId 加载 ppt
// 只有加载完成后才可以调用 pptPlugin.gotoSlide
await pptPlugin.loadPPT(taskId: string);
- ppt 操作
// ppt 下一步
pptPlugin.nextStep();
// ppt 上一步
pptPlugin.prevStep();
// 切页, 页码从 0 开始
pptPlugin.gotoSlide(no: number);
// 判断当前场景是否由 pptPlugin 管理, 返回 boolean 值.
// 当前场景由 pptPlugin 管理, 意味着
// 1. 正在显示 ppt
// 2. pptPlugin 会自动同步 ppt 页面和房间场景
pptPlugin.isHandleCurrentScene();
关于 ppt 页面管理
初次加载
WhitePPTPlugin 内部已经处理了与 white-web-sdk
场景相关的逻辑. 具体行为是,
- 加载 ppt 成功
- 根据 ppt 的页数, 为当前 ppt 生成场景组, 有多少页就有多少场景
其中并不会自动显示 ppt 第一页所以, 在初次加载 ppt 完成后, 需要你手动切换到第一页 pptPlugin.gotoSlide(0)
.
加载完成
ppt 第一页显示成功后, 房间内的场景就与 ppt 的页码完全绑定了。你有两种方式切换到下一页(注意,是直接切换到下一页, 而不是下一步)
调用
white-web-sdk
api, room.pptPreviousStep()
在你使用@netless/ppt-plugin
的情况下,white-web-sdk
已经不知道 ppt 的存在, 调用 pptPreviousStep 会直接场景到场景组中的下一个场景. 而后,@netless-ppt-plugin
监听到场景的变化, 会展示场景对应的 ppt 页面.调用
@netless/ppt-plugin
提供的pptPlugin.gotoSlide
.gotoSlide
会展示相应页面, 同时将房间场景的 path 值设置为 ppt 页面对应的值.
房间内刷新
在房间内, 如果刷新页面。 @netless/ppt-plugin
会根据房间数据, 自动恢复到刷新之前的场景.
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
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
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