Skip to main content
Android
iOS
Web

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:

  1. The app server sends a request with the SDK token to the Interactive Whiteboard server to create a whiteboard room.

  2. The Interactive Whiteboard server returns the room UUID to the app server when a room is created successfully.

  3. The app server generates a room token using the returned room UUID and sends the room token and UUID to the app client.

  4. The app client calls createFastboard of the Fastboard SDK to create a FastboardApp instance and join the interactive whiteboard room.

Prerequisites

Before proceeding, make sure you meet the following requirements:

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:

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);
});
Copy

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:

{
"uuid": "4a50xxxxxx796b", // The room UUID
"teamUUID": "RMmLxxxxxx15aw",
"appUUID": "i54xxxxxx1AQ",
"isBan": false,
"createdAt": "2021-01-18T06:56:29.432Z",
"limit": 0
}
Copy

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:

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);
});
Copy

If the request is successful, Agora's server returns a room token. The following is a response example:

"NETLESSROOM_YWs9XXXXXXXXXXXZWNhNjk" // Room token
Copy

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 the package.json file, you can navigate to the fastboard_quickstart directory on the command line and run npm init.

  • index.html: The visual interface with the user.

  • main.js: The programmable interface to implement the client logic.

Add dependencies

  1. In the project root directory, run the following line to install the latest version of the Fastboard SDK and other dependencies:
    npm add @netless/fastboard @netless/window-manager white-web-sdk
    Copy

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:

{
"name": "fastboard_quickstart",
"private": true,
"scripts": {
"build": "vite build",
"dev": "vite --open"
},
"dependencies": {
"@netless/fastboard": "latest",
"@netless/window-manager": "latest",
"white-web-sdk": "latest"
},
"devDependencies": {
"vite": "latest"
}
}
Copy

Create the user interface (UI)

In index.html, add the following code to include the app logic in the UI:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>

<body>
<div id="app" style="width: 600px; height: 400px; border: 1px solid;"></div>
<script type="module" src="/main.js"></script>
</body>

</html>
Copy

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:

  1. Call createFastboard to create a FastboardApp instance and join the whiteboard room.

  2. Call mount to mount the FastboardApp instance to the HTML element.

When calling createFastboard, you must pass in the following parameters:

  • SDK configuration parameters in sdkConfig:

  • 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:

import { createFastboard, mount } from "@netless/fastboard";

let app;
async function mountFastboard(div) {
app = await createFastboard({
sdkConfig: {
appIdentifier: "Your App Identifier",
region: "cn-hz",
},
joinRoom: {
uid: "User ID",
uuid: "Room UUID",
roomToken: "Room Token",
},
managerConfig: {
cursor: true,
},
});
window.app = app;
return mount(app, div);
}

mountFastboard(document.getElementById("app"));
Copy

Test your app

  1. To install dependencies, run the following command:
    npm install
    Copy
  2. To run the project, run the following command:
    npm run dev
    Copy

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.

Running the web app through a local server (localhost) is for testing purposes only. In production, ensure that you use the HTTPS protocol when deploying your project.

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.

vundefined