Skip to main content
白板本身是一个 H5 页面,绘制与协同逻辑都在 Web 端。接入方只需三步:拿到链接 → 用 WebView 加载 → 处理约定的交互事件
本页只讲 Android 端怎么把白板嵌进来。板子与频道的对应关系、白板何时被销毁、“谁开了白板”这个状态要怎么同步给其他人(SRTC 不会自动广播),见 电子白板

1. 白板链接的来源

白板链接由 SRTC 在加入频道成功时下发,通过 RTCClientEvent.onJoinSucceed 回调的 whiteBoard 参数返回:
接入方实现 RTCClientEvent(或继承 RTCClientSimpleEvent 只重写需要的方法),在回调里取出链接:
  • 链接形如 https://<接口域名>/white-board/?code=<会话凭证>&device_type=2&...每人的链接不同code 是各自的会话凭证,一次性、连接后失效),但指向同一块板(板子 ID 取频道名)—— 所以别把链接转给别人用。
  • whiteBoard 正常不为空:白板首次有人进入时自动创建,无需预先开通;为空说明线路配置异常,此时别打开页面。

2. 如何使用(用 WebView 加载)

2.1 WebView 必需配置

2.2 加载链接(追加控制参数)

加载时在链接后追加控制参数:
参数以 & 拼接,依赖链接本身已带 query。按需选择是否追加:不需要导出功能可不传 export_btn,需要展示白板自带菜单可不传 no_menu

2.3 注入 JS Bridge

白板通过一个固定名为 AndroidInterface 的 JS 接口与原生通信,必须在加载前注入:
JS Bridge 实现(可直接复用):

2.4 释放

页面销毁时释放 WebView:

3. 交互事件与指令

交互分三类:① 原生 → 白板(URL 参数)② 白板 → 原生(JS Bridge)③ 白板对 WebView 系统能力的调用

3.1 原生 → 白板:URL 控制参数

加载时通过 URL query 传入(见 2.2),用于控制白板 UI:

3.2 白板 → 原生:JS Bridge 事件

接口对象名固定为 AndroidInterface,白板侧调用方式为 window.AndroidInterface.<方法>(...) onExportImage 保存图片的参考实现:

3.3 白板对 WebView 系统能力的调用

白板”插入图片""上传图片”等功能会触发 WebView 的系统回调,需在 WebChromeClient 中处理:
提示:白板对图片有大小限制,建议接入方在回传前对图片做压缩(例如压到 1MB 以内),避免过大图片上传失败。