【场景实践征文】快速实现一个Vue 互动白板demo

我正在参加「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

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

推荐阅读
作者信息
相关专栏
SDK 教程
141 文章
本专栏仅用于分享音视频相关的技术文章,与其他开发者和声网 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。