前提条件

你可以通过阅读密钥说明了解更多 Token 相关。

集成SDK
Maven 方式
  1. 在根目录下的 build.gradle 文件中,配置 maven 仓库地址,如下所示:
allprojects {
    repositories {
        ...
        maven { url "https://artifact.bytedance.com/repository/Volcengine/" }
        
    }
}
groovy
  1. 为模块配置构建配置。在 app/build.gradle 文件中添加配置和依赖。
dependencies {
    ...
    implementation 'com.volcengine:VolcEngineWhiteboard:1.3.0'
    
}
groovy
离线方式
  1. 将工程视图修改为 Project 模式,下载 VolcEngineWhiteboard ,复制粘贴到 app/libs/ 目录下。

alt

  1. 在 app 模块的 build.gradle 文件中,增加如下 dependencies,引入 libs 目录下的 aar。
implementation fileTree(dir: 'libs', include: ['*.jar', '*.aar'])
groovy
实现功能
基础白板使用 API 时序图

alt

1. 调用前置 API
  1. 调用 setEnv 指定为正式环境。
WhiteBoardRoomManager.setEnv(WhiteBoardDefine.Env.PRODUCT);
java
  1. 绑定设备 ID,方便定位和排查问题。
WhiteBoardRoomManager.setDeviceID(deviceID); 
java
2. 创建和初始化白板房间
  1. 创建 WhiteBoardRoomManager 来创建和管理 WhiteBoardRoom。
WhiteBoardRoomManager  whiteboardRoomManager = WhiteBoardRoomManager.create(getBaseContext(), appid, roomManagerEventHandler);
java
  1. 创建 WhiteBoardRoom
    调用 createWhiteBoardRoom 创建 WhiteBoardRoom。
WhiteBoardRoom  whiteboardRoom = whiteboardRoomManager.createWhiteBoardRoom(roomID, userID, token, roomEventHandler);
java
3. 加入白板房间
  1. 调用 joinRoom 加入白板房间。
whiteboardRoom.joinRoom();
java

白板服务在当前用户加入白板房间后开始计费,直到该用户调用 leaveRoom 退出房间后停止计费。建议在即将使用白板前创建白板实例。并结束使用后及时销毁白板实例。
2. 成功加入房间后,将触发 onJoinRoomResult。 你可以在此回调中处理首次加入房间,重连加入房间的事件。

public void onJoinRoomResult(String roomID, String userID, int errCode, boolean isRejoin){}
java
  1. 获取房间内所有白板的信息。
    加入房间后,SDK 将通过 IWhiteBoardRoomEventHandler 的 onGetAllBoardInfo 回调所有白板的信息、当前活跃的白板 ID、当前房间是否活跃,请及时保存需要的信息。
    如果房间内白板数量为 0,需要我们 WhiteBoardRoom 的 createWhiteBoard 方法创建白板。
@Override
public void onGetAllBoardInfo(List<BoardInfo> boardInfos, int activeBoardId, boolean isRoomActive) {
    super.onGetAllBoardInfo(boardInfos, activeBoardId, isRoomActive);
    this.isRoomActive = isRoomActive;
    runOnUiThread(() -> {
        if (boardInfos == null || boardInfos.isEmpty()) {
            if (whiteboardRoom != null) {
                whiteboardRoom.createWhiteBoard(888, null, null, "default");
            }
        }
    });
}
java
  1. 成功加入房间后,将自动创建白板,并触发 onCreateWhiteBoard 回调。
    该回调返回了白板对象,调用白板对象类的接口,实现编辑在内的各种操作。
public void onCreateWhiteBoard(WhiteBoard whiteBoard, int elapsed){}
java
  1. 监听白板回调 IWhiteBoardEventHandler,包括页面的创建和状态变化的回调。
whiteboard.setEventHandler(boardEventHandler);
java
绑定白板视图容器
  1. 调用 bindToWindow 绑定白板视图容器。
    绑定后,白板会填满绑定的 UI 控件。根据业务的需求指定 UI 控件尺寸和比例。注意,各端的 UI 比例必须保持一致,否则将导致各端显示效果有差异。例如,老师端和学生端白板都是固定 4:3 比例。
whiteboard.setEditMode(WhiteBoardDefine.EditMode.EDIT_ALL);//画板是否可以编辑
whiteboard.bindToWindow(new WindowConfig(viewGroup));
java
public void onCreateWhiteBoard(WhiteBoard whiteboard, int elapsed) {
    runOnUnitThread(() -> {
        if (activity = null || activity.isFinishing())
            return;
        whiteboard = whiteBoard;
        whiteboard.setEventhandler(boardEventHandler);
        whiteboard.setEditMode(boardToolBar.getCurrentEditMode());
        whiteboard.bindToWindow(new WindowConfig(videGroup)); //viewGroup 是你需要传入的  UI 视图容器,例如FrameLayout
        Toast.makeText(activity, text: "创建白板成功", Toast.LENGTH_SHORT).show();
    });
}
java
  1. 绑定成功后将触发 onWhiteBoardAttachedToWindow 回调。在该回调中实现需要在绑定视图后处理的逻辑。
public void onWhiteBoardAttachedToWindow() {}
java
使用白板

选择编辑模式后。触摸白板容器可以使用编辑功能,详见 EditType。

whiteboard.setEditType(editType);
java
结束使用白板

在结束白板使用时,释放资源的步骤如下。

  1. 调用 unBindFromWindow 解绑白板视图。
whiteboard.unBindFromWindow();
java

成功调用 unBindFromWindow 后会触发 [onWhiteBoardDetachedToWindow](131850#onwhiteboarddetachedtowindow) 解绑白板视图回调,在该回调中实现解绑视图后处理的逻辑。

public void onWhiteBoardDetachedToWindow() {}
java
  1. 销毁白板 whiteboardRoom。
whiteboardRoom.destroyWhiteBoard(whiteboard);
java
  1. 离开房间和销毁房间。
    whiteboardRoom.leaveRoom();
    whiteboardRoomManager.destroyWhiteBoardRoom(whiteboardRoom);
java
  1. 销毁引擎。
if (whiteboard != null) {
    whiteboard.unBindFromWindow();
    whiteboardRoom.destroyWhiteBoard(whiteboard);
    whiteboard = null;
}
if (whiteboardRoom != null) {
    whiteboardRoom.leaveRoom();
    whiteboardRoomManager.destroyWhiteBoardRoom(whiteboardRoom);
    whiteboardRoom = null;
}
whiteboardRoomManager = null;
WhiteBoardRoomManager.destroy();
java