Fastboard quickstart
The Fastboard SDK is the latest generation of the Interactive Whiteboard SDK launched by Agora to help developers quickly build whiteboard applications. The Fastboard SDK simplifies the APIs of the Interactive 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 extend the functionality of their whiteboard applications and enrich their users' collaboration experience.
This page explains how to quickly join a whiteboard room and experience the interactive whiteboard features using the Fastboard SDK.
Understand the tech
The following figure shows the workflow to join a whiteboard room:
When an app client requests to join an interactive whiteboard room, the app client and your app server interact with the Interactive Whiteboard server in the following steps:
-
The app server sends a request with the SDK token to the Interactive Whiteboard server to create a whiteboard room.
-
The 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
createFastboard
of the Fastboard SDK to create aFastboardApp
instance and join the interactive whiteboard room.
Prerequisites
Before proceeding, make sure you meet the following requirements:
-
A web browser that meets the minimum version requirements in Supported platforms.
-
A valid Agora account.
-
An Agora project with the Interactive Whiteboard enabled. Get the App Identifier and SDK token from Agora Console. See Enable and configure Interactive Whiteboard.
Implementations on your app server
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.
Create a whiteboard room
Call /v5/rooms (POST) on your app server to create a room.
You can use the following Node.js script as a request example:
If the request is successful, Agora's Interactive Whiteboard server 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 following is a response example:
Generate a room token
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:
If the request is successful, Agora's server returns a room token. The following is a response example:
Implementations on the app client
The following sections show how to use the Fastboard SDK to join a whiteboard room from your web app.
Create a basic web application
Create a new directory named fastboard_quickstart
. For a minimal web app client, create the following files in the directory:
-
package.json
: Install and manage the dependencies of your project. To create thepackage.json
file, you can navigate to thefastboard_quickstart
directory on the command line and runnpm init
. -
index.html
: The visual interface with the user. -
main.js
: The programmable interface to implement the client logic.
Add dependencies
- In the project root directory, run the following line to install the latest version of the Fastboard SDK and other dependencies:
The meaning of each field is as follows:
-
@netless/fastboard
: The Fastboard SDK. -
@netless/window-manager
: The window management plugin for implementing and managing a whiteboard application with multiple windows. -
white-web-sdk
: The Interactive Whiteboard SDK for web, which provides the core functionality of the interactive whiteboard.
In package.json
, add the latest version of the Fastboard SDK and its version number to the dependencies
field.
To run and package the project, you need to specify the build tool. This quickstart uses Vite. In package.json
, add vite
to the devDependencies
field and define the command line for running the project in the scripts field:
Create the user interface (UI)
In index.html
, add the following code to include the app logic in the UI:
Make sure you set the width and height for the HTML element that mounts the whiteboard; otherwise, the whiteboard can be invisible.
Join the whiteboard room
To join the Interactive Whiteboard room, do the following:
-
Call
createFastboard
to create aFastboardApp
instance and join the whiteboard room. -
Call
mount
to mount theFastboardApp
instance to the HTML element.
When calling createFastboard
, you must pass in the following parameters:
-
SDK configuration parameters in
sdkConfig
:-
appIdentifier
: The App Identifier of the whiteboard project in Agora Console. See Get security credentials for your whiteboard project. -
region
: The data center, which must be the same as the data center you chose when creating the room.
-
-
Room configuration parameters in
joinRoom
:-
uid
: The unique identifier of a user in string format. The maximum length is 1,024 bytes. -
uuid
: 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.
-
Open main.js
and add the following code:
Test your app
- To install dependencies, run the following command:
- To run the project, run the following command:
A local web server automatically opens in your browser. You see the following page:
You can select the pencil, text, or shape tools on the left toolbar to write and draw on the whiteboard. You can click the plugin icon at the bottom of the toolbar to browse plugins. When the current page is full, you can click the icon with a plus sign at the bottom right to add a new page, and use the arrows to switch pages.
Next steps
After experiencing the basic whiteboard functionality, you can call APIs of the Fastboard SDK to add images, audio, video, and documents to the whiteboard.