本项目主要用于转发白板的事件和属性到
iframe
, 管理iframe
的插入, 以及对白板的视角变化的跟随
注意,
iframe
只有在教具为选择工具
时候才能进行交互
# npm
npm install netless-iframe-bridge
# yarn
yarn add netless-iframe-bridge
import {WhiteWebSdk} from "white-react-sdk"
import {IframeBridge, IframeWrapper} from "@netless/iframe-bridge"
const sdk = new WhiteWebSdk({
// 其他参数
invisiblePlugins: [IframeBridge],
wrappedComponents: [IframeWrapper],
})
const room = await sdk.joinRoom()
let bridge;
bridge = room.getInvisiblePlugin(IframeBridge.kind) // bridge 插入一次后续会自动插入,所以需要先 get 防止重复插入
if (!bridge) {
bridge = await IframeBridge.insert({
room: room, // room 实例
url: "example.com", // iframe 的地址
width: 1280, // 课件的宽, 单位 px
height: 720, // 课件的高, 单位 px
displaySceneDir: "/example" // 自定义 h5 课件绑定的 scene 目录,切换到其他目录,课件会自动隐藏,注意,此目录需要用户在白板中自行创建
})
}
bridge.setIframeSize({ width: 1200, height: 700 }) // 修改 iframe 的宽高
attributes
是会在所有插件中同步的属性, 类似于白板中的 globalState
概念, 但是只是同步在所有的插件中
bridge.attributes
修改 attributes
, 并且会触发事件传递 attributes
到 iframe
中
readOnly
模式下不可用
bridge.setAttributes({ name: "bridge" })
监听 iframe``load
事件
import { DomEvents } from "@netless/iframe-bridge"
bridge.on(DomEvents.IframeLoad, (event) => {
// code
})
销毁插件
bridge.destroy()
- 插入自定义目录和页面至白板
const dir = "/example" // h5 课件在白板中的目录名称,可以自定义为任意名称,注意不要跟已有目录重复
const scenes = [{name: "第一页"}, { name: "第二页" }] // h5 课件有多少页可以创建多少个, 但并不是严格对应
room.putScenes(dir, scenes)
- 切换至自定义课件目录
room.setScenePath("/example/第一页") // 设置为课件目录的第一页
- 翻页
可以使用
sdk
封装的翻页,也可以自己调用白板的翻页 参考: 白板翻页
// 白板翻页
room.setSceneIndex(room.state.sceneState.index - 1); // 上一页
room.setSceneIndex(room.state.sceneState.index + 1) // 下一页
bridge.setAttributes({ url: "https://xxxx.com" })