加入白板房间（使用 Fastboard SDK）

声网 Fastboard SDK 是声网为帮助开发人员快速构建白板应用推出的新一代白板 SDK。Fastboard SDK 在互动白板 SDK 的基础上增加了 UI 实现，只需几行代码即可加入房间，并立即使用各种丰富的编辑工具体验实时互动协作；Fastboard SDK 还集成了窗口管理器 window-manager，方便开发者快速添加插件，轻松扩展白板应用的功能，丰富用户的协作体验。

本文介绍如何建立一个简单的项目，使用声网 Fastboard SDK 加入房间并即刻体验互动白板的功能。

技术原理

下图展示了加入声网互动白板房间的基本流程：

当你的 app 客户端请求加入互动白板房间时：

1. 你的 app 服务端使用 SDK Token 向声网互动白板服务端发起创建房间的请求。
2. 成功创建房间后，声网互动白板服务端向你的 app 服务端返回新建房间的 room UUID。
3. 你的 app 服务端使用 room UUID 生成 room Token，并将 room UUID 和 room Token 发送给 app 客户端。
4. App 客户端调用 Fastboard SDK 的 createFastRoom 和 join 方法加入白板房间。

前提条件

• Android Studio
• Android SDK API level 19+
• 有效的声网开发者账号。
• 已在声网控制台开启互动白板服务并获取项目的 App Identifier 和 SDK Token。

服务端实现

在 app 客户端加入互动白板房间前，你需要在 app 服务端调用声网互动白板提供的 RESTful API 创建房间、获取 room UUID 和生成 room Token，并将 room UUID 和 room Token 传给 app 客户端。

1. 创建房间

调用互动白板服务端 RESTful API 创建一个房间。详见创建房间（POST）。

请求示例

你可以使用以下 Node.js 脚本发送请求：

var request = require("request");
var options = {
  "method": "POST",
  "url": "https://api.netless.link/v5/rooms",
  "headers": {
    "token": "你的 SDK Token",
    "Content-Type": "application/json",
    "region": "cn-hz"
  }
};
request(options, function (error, response) {
  if (error) throw new Error(error);
  console.log(response.body);
});

如果方法调用成功，声网互动白板服务端将返回新建房间的信息，其中的 uuid 是房间的唯一标识，app 客户端加入房间时需要传入该参数。

响应示例

{
    "uuid": "4a50xxxxxx796b", // 房间的 UUID
    "teamUUID": "RMmLxxxxxx15aw",
    "appUUID": "i54xxxxxx1AQ",
    "isRecord": true,
    "isBan": false,
    "createdAt": "2021-01-18T06:56:29.432Z",
    "limit": 0
}

2. 生成 Room Token

创建房间并获取新建房间的 uuid 后，你需要在 app 服务端生成 Room Token 并下发给 app 客户端。当 app 客户端加入房间时，声网互动白板服务端会使用该 Token 对其鉴权。

你可以通过以下方式在 app 服务端生成 Room Token：

• 使用代码生成 Room Token，详见在 app 服务端生成 Token。（推荐）
• 调用互动白板服务端 RESTful API 生成 Room Token，详见生成 Room Token（POST）。

下面以调用 RESTful API 的方式为例介绍如何生成 Room Token。

请求示例

你可以使用以下 Node.js 脚本发送请求：

var request = require('request');
var options = {
  "method": "POST",
  // 将 <房间的 UUID> 替换成你的房间 UUID
  "url": "https://api.netless.link/v5/tokens/rooms/<房间的 UUID>", 
  "headers": {
    "token": "你的 SDK Token",
    "Content-Type": "application/json",
    "region": "cn-hz"
  },
  body: JSON.stringify({"lifespan":3600000,"role":"admin"})

};
request(options, function (error, response) {
  if (error) throw new Error(error);
  console.log(response.body);
});

如果方法调用成功，声网互动白板服务端将返回生成的 Room Token。

响应示例

"NETLESSROOM_YWs9XXXXXXXXXXXZWNhNjk" // Room Token

客户端实现

项目设置

实现加入互动白板房间之前，参考如下步骤设置你的项目：

1. 如需创建新项目，在 Android Studio 里，依次选择 Phone and Tablet > Empty Activity，创建 Android 项目。

   创建项目后，Android Studio 会自动开始同步 gradle。请确保同步成功再进行下一步操作。

2. 在项目根目录的 settings.gradle 文件中添加 JitPack 仓库：

   dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
   
        maven { url 'https://jitpack.io' }
    }
   }

3. 在 /Gradle Scripts/build.gradle(Module: <projectname>.app) 文件的 dependencies 字段中添加如下行以添加 Fastboard SDK 依赖：

   dependencies {
    ...
    implementation 'com.github.netless-io:fastboard-android:1.2.0'
   }

   本文使用 Fastboard Android SDK 1.2.0 版本。更多版本详见发版说明。

实现用户界面

Fastboard SDK 提供带 UI 的白板界面 FastboardView，只需将其添加到项目的布局中，app 运行时即可看到白板界面。

将 /app/res/layout/activity_main.xml 文件中的内容替换成如下代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <io.agora.board.fast.FastboardView
        android:id="@+id/fastboard_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

实现加入房间

调用 Fastboard SDK 的如下方法加入白板房间：

1. 调用 FastboardView 类的 getFastboard 方法获取 Fastboard 对象。
2. 调用 Fastboard 类的 createFastRoom 方法创建 FastRoom 对象。调用该方法时，你需要通过 roomOptions 参数传入以下房间配置信息：
   • appId：String。互动白板项目的 App Identifier。详见获取互动白板项目的安全密钥。
   • uuid：String。房间的 UUID，详见创建房间。
   • token：String。用于鉴权的 Room Token。生成该 Room Token 使用的房间 UUID 必须和上面的房间 UUID 一致。详见生成 Room Token。
   • uid：String。用户 UID，即用户的唯一标识符，字符串格式，长度不能超过 1024 字节。
   • FastRegion：枚举。数据中心，必须和创建房间时设置的数据中心一致。

在 /app/java/com.example./MainActivity 文件中添加如下代码：

package com.example.fastboardquickstart

import android.content.pm.ActivityInfo
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import android.widget.Button
import io.agora.board.fast.FastboardView
import io.agora.board.fast.model.FastRegion
import io.agora.board.fast.model.FastRoomOptions
import java.lang.Exception

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // 横屏设置
        supportActionBar?.hide()
        requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
         setupFastboard()

    }

        private fun setupFastboard() {
        // 获取 fastboard 对象
        val fastboardView = findViewById<FastboardView>(R.id.fastboard_view)
        val fastboard = fastboardView.fastboard

        // 设置白板房间的参数
        val roomOptions = FastRoomOptions(
            "互动白板项目的 App Identifier",
            "房间的 UUID",
            "Room Token",
            "用户 UID",
           FastRegion.CN_HZ
        )

        // 创建 FastRoom 对象
        val fastRoom = fastboard.createFastRoom(roomOptions)
        // 加入房间
        fastRoom.join()
    }
}

运行项目

在 Android Studio 中编译并在模拟器或真机上运行项目。app 成功安装并启动后，你可以看到如下界面：

你可以选择右侧工具栏上的铅笔、文字或形状工具，在白板上写写画画；当前页面写满时，可以点击右下方的 图标，新增页面，并使用箭头切换页面。

后续步骤

体验完带 UI 的白板功能后，你可以调用 Fastboard SDK 的 API 并自定义 UI，以实现插入图片、播放音视频、演示文档等功能。详见展示文件。