本文主要讲述第三方 H5 接入互动白板如何实现状态同步。

接入流程

引入 SDK

同步数据

互动白板 SDK 通过信令通道透传 data 协议数据，并更新 data 至互动白板后台作为历史数据。目前 data 数据大小限制为6K。

window.TIWH5WebCtrl.syncData(data);

注意互动白板后台只记录最新的 data，为保证中途进入课堂的用户能恢复H5页面状态，请确保 data 为全量的状态数据。

接收数据

互动白板在以下两种情况回调 data 协议数据。1. 互动白板初始化并拉取历史数据成功回调最新的 data 协议数据。2. 互动白板收到实时传输的 data 协议数据。

window.TIWH5WebCtrl.on('TIW_H5WEB_DATA', function(data) {
});

权限变化

互动白板调用 setDrawEnable 接口后触发权限更新。

window.TIWH5WebCtrl.on('TIW_H5WEB_PERMISSION', function(data) {
});

事件移除

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. 测试页面源码，可在浏览器打开测试页面，通过鼠标右键”查看网页源代码”来查看。

腾讯云官网1折活动，限时活动，即将结束，速速收藏
同尘科技为腾讯云授权服务中心。
购买腾讯云产品享受折上折，更有现金返利。同意关联立享优惠