• 根据 开通服务 获取 AppID 和 Token。

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

• 满足以下条件的计算机：

  • 安装最新版本的 Chrome 浏览器，并设置为默认浏览器。

  • 具备互联网连接。

1. 通过包管理工具 npm 下载 SDK。不指定版本表示下载最新版本。

npm i @volcengine/white-board-manage

2. 在实现功能的 js 文件中引入 SDK。

import Board from '@volcengine/white-board-manage';
javascript

1. 下载 lib 包。
2. 在实现功能的 js 文件中引入 SDK。

import Board from '${you_path}/lib/white-board-manage';
javascript

调用 createWhiteBoardRoom 创建一个本地 白板房间 对象。

const whiteBoardRoom = Board.createWhiteBoardRoom(
  'board',
  appId,
  roomId,
  userId,
  token,
);
javascript

• 参考 开通服务 获取 Token。
• 白板房间 roomId 不能与 RTC 房间 roomId 相同。以免影响白板房间和 RTC 房间内回调提醒相互影响。建议为白板房间名加上 whiteboard_ 前缀。
• 白板用户 userId 不能与 RTC userId 相同。

1. 调用 whiteBoardRoom.login 登录互动白板服务。

2. 监听 onLoginResult。

3. 成功后调用 whiteBoardRoom.joinRoom 加入房间。

    whiteBoardRoom.login();

    whiteBoardRoom.on(WhiteBoardRoomEventsTypes.onLoginResult, e => {
      if (e.code === Code.LOGIN_SUCCESS) {
        console.log('login success', e);
        whiteBoardRoom.joinRoom();
      } else {
        message.error(`${e.code}`, undefined);
      }
    });
javascript

白板服务在当前用户加入白板房间后开始计费，直到该用户调用 leaveRoom 退出房间后停止计费。建议在即将使用白板前创建白板实例。并结束使用后及时销毁白板实例。

4. 监听 onJoinRoomResult，进房成功后调用 whiteBoardRoom.getBoardInfo() 获取白板信息。

• boardInfo.boards 不为空，代表当前房间内已有白板，SDK 会自动创建相应白板实例。

• boardInfo.boards 为空，代表房间内没有白板，需要调用 whiteBoardRoom.createWhiteBoard 创建白板。

const boardConfig = {
  boardId: 888,  //白板ID
  //初始页信息
  initialPage: {
    pageId: 'wb_default',  //pageId
    bkInfo: {
      bkColor: 'rgba(126,126,126,255)',  //page 背景颜色（根据业务场景选填）
      bkImage: 'https://xxx.png',        //page 背景图（根据业务场景选填）
    },
    extra: '',
  },
  //白板信息
  boardBkInfo: {
    bkColor: 'rgba(126,126,126,255)',  //board 背景颜色（根据业务场景选填）
    bkImage: 'https://xxx.png',        //board 背景颜色（根据业务场景选填）
    bkImageFillType: BkFillType.kCenter,  //board 背景图填充的格式（根据业务场景选填）
  },
};
  
whiteBoardRoom.on(WhiteBoardRoomEventsTypes.onJoinRoomResult, async res => {
  if (res.error_code !== '') {
    message.error(res.message, undefined, () => leaveRoom());
    return;
  }

  const boardInfo = await whiteBoardRoom.getBoardInfo();

  if (boardInfo.boards.length === 0) {
    //没有白板信息，创建新白板，创建成功触发 onCreateWhtieBoard事件，创建失败 onError, 返回ErrCode: CREATE_BOARD_ERROR
    whiteBoardRoom.createWhiteBoard(
      boardConfig.boardId,
      [boardConfig.initialPage],
      boardConfig?.boardBkInfo,  // 根据业务场景选填
      `Board-${boardConfig.boardId}`,  //boardName，业务自定义
    );
  }
});
javascript

5. 监听事件回调
   根据实际应用需要，在初始化 WhiteBoard 后监听想要关注的事件回调。例如上个步骤中，在登陆成功后获取白板对象信息。又比如错误提醒、白板初始化成功、回放进度等。

whiteBoardRoom.on(WhiteBoardRoomEventsTypes.onVRTCError, (res: any) => {
  if (res.errorCode === 'DUPLICATE_LOGIN') {
    //根据业务场景处理
  }else{

  }
});

whiteBoardRoom.on(WhiteBoardRoomEventsTypes.OnJoinRoomResult, () => {});

whiteBoardRoom.on(WhiteBoardRoomEventsTypes.OnCreateWhiteBoard,({white_board, boardInfo}) => {});
    
whiteBoardRoom.on(WhiteBoardRoomEventsTypes.OnPlaybackWhiteBoardStateChanged,({state, data}) => {});
whiteBoardRoom.on(WhiteBoardRoomEventsTypes.OnPlaybackWhiteBoardProgressUpdate,({progress}) => {});
javascript

调用 WhiteBoard 类的 setEditType 方法设置工具类型，目前支持工具类型如下：

pointer           // 选取图元  TOOL_TYPE.POINTER
pencilBrush  //画笔  Constant.SHAPE_TYPE.PENCIL_BRUSH
textbox         // 文本 Constant.SHAPE_TYPE.TEXT
circle            // 圆 Constant.SHAPE_TYPE.CIRCLE
line               // 直线 Constant.SHAPE_TYPE.LINE
rect               // 矩形 Constant.SHAPE_TYPE.RECT
eraser          // 橡皮擦  TOOL_TYPE.ERASER

whiteBoard.setEditType(key);


//以画笔工具为例
import { IWhiteBoard, Constant } from '@volcengine/white-board-manage'

const [whiteBoard, setWhiteBoard] = setState<IWhiteBoard>()

whiteBoardRoom.on(WhiteBoardRoomEventsTypes.onCreateWhiteBoard,({ white_board }) => {
 setWhiteBoard(white_board);
});


//tool_bar.tsx
return(
   <button 
     onClick={()=>whiteBoard.setEditType(Constant.SHAPE_TYPE.PENCIL_BRUSH)}
    >
        画笔工具
    </button>
)

javascript

1. 调用 leaveRoom离开房间。

2. 调用 Board.destroyWhiteBoardRoom 销毁 createWhiteBoardRoom 创建的白板房间实例。

const leaveRoom = () => {
    if(boardRoom){
      boardRoom.leaveRoom();
      Board.destroyWhiteBoardRoom(boardRoom);
      whiteboardList.map(item => boardRoom.destroyWhiteBoard(item))
    }
    whiteboardViewList = [];
};
javascript