The Fastboard SDK is the latest generation of the whiteboard SDK launched by Agora to help developers quickly build whiteboard applications. The Fastboard SDK simplifies the APIs of the Whiteboard SDK and adds UI implementations. These improvements enable you to join a room with just a few lines of code and instantly experience real-time interactive collaboration using a variety of rich editing tools. In addition, the Fastboard SDK integrates window-manager and extensions from netless-app, which allows developers to easily use extensions to extend the functionality of their whiteboard applications and enrich their users' collaboration experience.
This page introduces how to quickly join a whiteboard room and experience the interactive whiteboard features using the Fastboard SDK.
The following figure shows the workflow to join an Agora Interactive Whiteboard room:
When an app client requests to join an interactive whiteboard room, the app client and your app server interact with the Agora Interactive Whiteboard server in the following steps:
The app server sends a request with the SDK token to the Agora Interactive Whiteboard server to create a whiteboard room.
The Agora Interactive Whiteboard server returns the room UUID to the app server when a room is created successfully.
The app server generates a room token using the returned room UUID and sends the room token and UUID to the app client.
The app client calls createFastRoom
and join
of the Fastboard SDK to create a FastRoom
instance and join the interactive whiteboard room.
Before proceeding, make sure you meet the following requirements:
Xcode 10.10 or later
iOS 9.0 or later
The latest version of CocoaPods
A valid Agora account
An Agora project with the whiteboard service enabled. Get the app identifier and SDK token from Agora Console. See Enable and Configure Interactive Whiteboard Service.
Before an app client can join an interactive whiteboard room, your app server needs to call the Agora Restful APIs to create a room, get the room UUID, generate a room token, and pass the room UUID and room token to the app client.
Call /v5/rooms (POST) on your app server to create a room.
You can use the following Node.js script as a request example:
var request = require("request");
var options = {
"method": "POST",
"url": "https://api.netless.link/v5/rooms",
"headers": {
"token": "Your SDK Token",
"Content-Type": "application/json",
"region": "us-sv"
},
body: JSON.stringify({
"isRecord": false
})
};
request(options, function (error, response) {
if (error) throw new Error(error);
console.log(response.body);
});
If the request is successful, Agora's server for the whiteboard service returns information about the created room, including uuid
, which is the unique identifier of the room. You need to pass in this parameter when an app client joins the room.
The followings is a response example:
{
"uuid": "4a50xxxxxx796b", // The room UUID
"teamUUID": "RMmLxxxxxx15aw",
"appUUID": "i54xxxxxx1AQ",
"isBan": false,
"createdAt": "2021-01-18T06:56:29.432Z",
"limit": 0
}
After creating a room and getting the uuid
of the room, your app server needs to generate a room token and send it to the app client. When an app client joins a room, Agora's server uses the room token for authentication.
To generate a room token on your app server, you can use one of the following methods:
Use code. See Generate a Token from your app server. (Recommended)
Call the Interactive Whiteboard RESTful API. See Generate a room token (POST).
You can use the following Node.js script as a request example:
var request = require('request');
var options = {
"method": "POST",
// Replace <Room UUID> with the uuid of your room
"url": "https://api.netless.link/v5/tokens/rooms/<Room UUID>",
"headers": {
"token": "Your SDK Token",
"Content-Type": "application/json",
"region": "us-sv"
},
body: JSON.stringify({"lifespan":3600000,"role":"admin"})
};
request(options, function (error, response) {
if (error) throw new Error(error);
console.log(response.body);
});
If the request is successful, Agora's server returns a room token. The following is a response example:
"NETLESSROOM_YWs9XXXXXXXXXXXZWNhNjk" // Room token
The following sections show how to use the Agora Fastboard SDK to join a whiteboard room from your iOS app.
Follow these steps to create the environment necessary to add whiteboard functionality into your app:
Open Xcode, and click Create a new Xcode project.
Select iOS, select Single-View Application under Application, and click Next.
Fill in the following information for your new project, and click Next:
Product Name: The name of your app. This example uses ExampleFastboard
.
Team: If you have added a team, choose it from the pop-up menu. If not, you can see the Add account button. Click it, input your Apple ID, and click Next to add your team.
a. Organization Identifier: The identifier of your organization. If you do not belong to an organization, use any identifier you like.
b. Interface: Choose Storyboard.
c. Language: Choose Swift.
Select the storage directory for your project, and click Create.
Use the following steps to install the Agora Fastboard SDK:
In Terminal, go to the directory of your Xcode project. Run the following command to create a Podfile
, after which you can find the Podfile
under the project directory:
pod init
Add the following lines to the Podfile
:
platform :ios, '10.0'
use_frameworks!
target 'ExampleFastboard' do
pod 'Fastboard'
end
Run the following command to install the SDK:
pod install
After installation, open the xcworkspace
file for further editing.
To join the whiteboard room using the Fastboard SDK, do the following:
Call getFastboard
of the FastboardView
class to get the Fastboard
instance.
Call createFastRoom
of the Fastboard
class to create an instance of FastRoom
.
Add the view of the FastRoom
instance to the viewController
, and set the layout. fastRoomView
provides the whiteboard interface with user interfaces (UI) for common functions.
Call joinRoom
of the FastRoom
class to join the whiteboard room.
When calling createFastRoom
, you must pass the following properties in the config
parameter:
appIdentifier
: The App Identifier of the whiteboard project in Agora Console. See Get security credentials for your whiteboard project.
roomUUID
: The room UUID, the unique identifier of a whiteboard room. See Create a room.
roomToken
: The room token used for authentication. The room token must be generated using the room UUID above. See Generate a room token.
region
: The data center, which must be the same as the data center you chose when creating the room.
userUID
: The unique identifier of a user in string format. The maximum length is 1,024 bytes.
In ViewController.swift
, replace the content with the following code:
import UIKit
// Imports the Fastboard SDK
import Fastboard
class ViewController: UIViewController {
// Defines the fastRoom variable
var fastRoom: FastRoom!
override func viewDidLoad() {
super.viewDidLoad()
// Sets parameters of the whiteboard room
let config = FastRoomConfiguration(appIdentifier: "The App Identifier of your whiteboard project",
roomUUID: "The room UUID",
roomToken: "The room Token",
region: .US,
userUID: "The unique identifier of a user")
// Creates the FastRoom instance
let fastRoom = Fastboard.createFastRoom(withFastRoomConfig: config)
// Adds FastRoomView
view.addSubview(fastRoom.view)
// Joins the whiteboard room
fastRoom.joinRoom()
self.fastRoom = fastRoom
}
// Sets the layout of FastRoomView
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
fastRoom.view.frame = view.bounds
}
}
Build the project in Xcode, and run it on a simulator or a physical mobile device. If the project runs successfully, you can see the following page:
You can select the pencil, text, or shape tools on the left toolbar to write and draw on the whiteboard. When the current page is full, you can click the icon at the bottom to add a new page, and use the arrows to switch pages.
After experiencing the basic whiteboard functionality, you can call APIs of the Fastboard SDK to insert images, audio and video, and documents to the whiteboard. For detailed implementation instructions, see Display Files.