本文主要讲述第三方 H5 接入互动白板如何实现状态同步。
接入流程
引入 SDK
<script src="https://res.qcloudtiw.com/board/third/h5webctrl/h5webctrl.min.js"></script>
同步数据
互动白板 SDK 通过信令通道透传 data 协议数据，并更新 data 至互动白板后台作为历史数据。目前 data 数据大小限制为6K。
window.TIWH5WebCtrl.syncData(data);
参数 | 类型 | 含义 |
data | object | 协议数据 |
注意
互动白板后台只记录最新的 data，为保证中途进入课堂的用户能恢复H5页面状态，请确保 data 为全量的状态数据。
接收数据
互动白板在以下两种情况回调 data 协议数据。
1. 互动白板初始化并拉取历史数据成功回调最新的 data 协议数据。
2. 互动白板收到实时传输的 data 协议数据。
window.TIWH5WebCtrl.on('TIW_H5WEB_DATA', function(data) {});
参数 | 类型 | 含义 |
data | object | 协议数据 |
权限变化
互动白板调用 setDrawEnable 接口后触发权限更新。
window.TIWH5WebCtrl.on('TIW_H5WEB_PERMISSION', function(data) {});
参数 | 类型 | 含义 |
enable | bool | 是否有操作权限 |
事件移除
window.TIWH5WebCtrl.off(name, function);
测试流程
1. 打开互动白板 DEMO（为演示同步效果，打开多个页面，以不同账号进入同一个房间）。
2. 进入房间后，在左侧工具中打开添加白板元素的面板，并在 H5元素tab中输入测试页面 https://tic-res-1259648581.cos.ap-shanghai.myqcloud.com/board/h5webctrl/h5web.html ，最后将白板工具切换为鼠标，即可体验 H5页面内容同步。
3. 测试页面源码，可在浏览器打开测试页面，通过鼠标右键"查看网页源代码"来查看。