我正在参加「RTE 实时万象」征文活动

https://www.agora.io/cn/community/blog/25197

Agora 互动白板是一个很有意思的功能，基于Agora 互动白板的SDK，我们可以轻松实现一个你画我猜。除此之外，它还可以用于在线教育、互动游戏等场景。

开启和配置互动白板服务

首先我们需要一个实名认证的声网账号，进入控制台，在 Agora 控制台开启互动白板服务。

这里需要注意的是互动白板它是作为服务而显示的，而控制台中只是显示项目列表，并没有直接显示服务。

这时候我们就先创建一个项目，然后点击“配置”进入到项目详情中，在里面的页面就可以看到服务内容了。

这时候找到互动白板服务，点击开启就行。因为我的就已经开启了，所以显示的是配置按钮。

创建项目并使用互动白板SDK

• 本文是基于vue来实现一个互动白板demo的。
• 首先安装@vue/cli，执行命令：

npm i @vue/cli -g

• 然后创建一个vue项目，执行命令：

vue create whiteboard

• 项目配置：

• 编写demo页面，这里直接修改vue项目的HelloWorld.vue组件就行（编辑器有问题，只能这样贴html代码了o(╥﹏╥)o）

• 加入房间的逻辑

1. 调用 createFastboard 创建一个 FastboardApp 实例并加入白板房间。
2. 文档是用mount 方法把FastboardApp 实例挂载到网页元素中的，但是我看api提示说废弃了，推荐用createUI 方法。
3. 调用 createFastboard 方法时，你需要填入一些参数，详情参考下面的代码。

<script setup>
import { createFastboard, createUI } from "@netless/fastboard";
import { ref } from "vue";

const boardRef = ref();
const uid = ref("")
const uuid = ref("")
const token = ref("")

/**
 * @param {string} uid 用户的唯一标识符，字符串格式，长度不能超过 1024 字节。
 * @param {string} uuid 房间 UUID，即房间的唯一标识符。调用RESTful API获取。
 * @param {string} roomToken 用于鉴权的 Room Token。生成该 Room Token 使用的房间 UUID 必须和上面的房间 UUID 一致。调用RESTful API获取。
 */
async function mountFastboard(uid, uuid, roomToken) {
  const app = await createFastboard({
    sdkConfig: {
      appIdentifier: "互动白板项目的 App Identifier，在控制台的互动白板服务中可以复制",
      region: "cn-hz",
    },
    joinRoom: {
      uid,
      uuid,
      roomToken,
    },
    managerConfig: {
      cursor: true,
    },
  });

  return createUI(app, boardRef.value);
}

const joinRoom = () => {
  mountFastboard(uid.value, uuid.value, token.value);
}

</script>

**注意：在vue3项目中，需要用ref来绑定一个dom元素，然后获取其value值，调用createUI方法去创建一个白板。

• 添加互动白板SDK依赖

npm add @netless/fastboard @netless/window-manager white-web-sdk

各字段的含义如下：

• @netless/fastboard：Fastboard SDK。
• @netless/window-manager：窗口管理插件，用于实现和管理多窗口应用。
• white-web-sdk：提供互动白板核心功能的 SDK。

运行项目

• 运行下列命令运行项目：

npm run dev

• 成功运行后的样子：

然后根据uid生成我们的房间uuid以及房间token，本文通过请求获取了相关信息，并没有搭建token服务器，在实际应用中应该是要搭建自己的token服务器的。

• 输入相关数据，点击加入

uid

uuid

roomToken

• 最终便可以实现多用户共享一个画板了