Display files using Fastboard

The Agora Fastboard SDK supports inserting and displaying multiple types of files on the whiteboard, such as images, audio and video, and documents. This enables users to quickly share information in compelling ways in order to create an immersive experience.

This page describes how to call the Fastboard SDK's APIs to insert images, present documents, and play audio and video on the whiteboard.

Understand the tech

Fastboard provides APIs for displaying files in the whiteboard main window or sub-windows.

Prerequisites

Integrate Fastboard in your project and join the room. See Join the whiteboard room.
Prepare publicly accessible asset URLs.
Make sure file formats are supported, and enable file conversion before presenting documents.

Project setup

Insert Images

Fastboard provides the insertImage method for inserting and displaying an image in the main window of the whiteboard.

fastRoom.join { room ->
    room.insertImage(
        "https://flat-storage.oss-accelerate.aliyuncs.com/cloud-storage/2022-02/15/ebe8320a-a90e-4e03-ad3a-a5dc06ae6eda/ebe8320a-a90e-4e03-ad3a-a5dc06ae6eda.png",
        512,
        512
    )
}

Play audio and video

Fastboard integrates the media player extension and provides the insertVideo method.

fastRoom.join { room ->
    room.insertVideo(
        "https://flat-storage.oss-accelerate.aliyuncs.com/cloud-storage/2022-02/15/55509848-5437-463e-b52c-f81d1319c837/55509848-5437-463e-b52c-f81d1319c837.mp4",
        "test1.mp4"
    )
}

Present documents

Fastboard integrates the docs viewer and slide extensions and provides the insertDocs method.

fastRoom.join { room ->
    val params = FastInsertDocParams(
        "Task UUID",
        "Task Token",
        "pptx",
        "My PPT"
    )
    room.insertDocs(params, object : FastResult<String> {
        override fun onSuccess(value: String) {
        }
        override fun onError(exception: Exception?) {
        }
    })
}

Reference

Run the project. You can see the inserted image, media window, or converted document on the whiteboard after the app refreshes.

Understand the tech

Fastboard provides APIs for displaying files in the whiteboard main window or sub-windows.

Prerequisites

Integrate Fastboard in your project and join the room. See Join the whiteboard room.
Prepare publicly accessible asset URLs.
Make sure file formats are supported, and enable file conversion before presenting documents.

Project setup

Insert Images

Fastboard provides the insertImg method.

fastRoom.joinRoom() {
    fastRoom.insertImg(
        URL(string: "https://test.aliyuncs.com/cloud-storage/2022-xx/15/e3xxda.png")!,
        imageSize: .init(width: 100, height: 100)
    )
}

Play audio and video

Fastboard integrates the media player extension and provides the insertMedia method.

fastRoom.joinRoom() {
    fastRoom.insertMedia(
        URL(string: "https://test.aliyuncs.com/cloud-storage/2022-xx/15/52xxx37.mp4")!,
        title: "test1.mp4",
        completionHandler: nil
    )
}

Present documents

The Agora Fastboard SDK provides the insertStaticDocument and insertPptx methods.

import UIKit
import Fastboard
import Whiteboard

fastRoom.joinRoom() {
    let jsonStr =
"""
    [{
        "width": 1280,
        "height": 720,
        "conversionFileUrl": "pptx://convertcdn.netless.link/dynamicConvert/3ce728e0954f11ec997c6580ac31fd96/1.slide",
        "preview": "https://convertcdn.netless.link/dynamicConvert/3ce728e0954f11ec997c6580ac31fd96/preview/1.png"
    }]
"""
    let dic = try! JSONSerialization.jsonObject(with: jsonStr.data(using: .utf8)!) as! [[String: Any]]
    let pages = dic.map { item -> WhitePptPage in
        let url = item["conversionFileUrl"] as? String
        let pre = item["preview"] as? String
        let w = item["width"] as? Int
        let h = item["height"] as? Int
        return WhitePptPage(src: url!, preview: pre!, size: .init(width: w!, height: h!))
    }
    fastRoom.insertPptx(pages, title: "My PPT")
}

Integrate Fastboard in your project and join the room. See Join the whiteboard room.
Prepare publicly accessible asset URLs.
Make sure file formats are supported, and complete file conversion before presenting documents.

Project setup

Insert Images

Fastboard provides the insertImage method.

await app.insertImage(
    "https://web-cdn.agora.io/website-files/images/interactive-whiteboard-text-tab-1.png"
);

Play audio and video

Fastboard integrates the media player extension and provides the insertMedia method.

await app.insertMedia(
    "test1.mp4",
    "https://beings.oss-cn-hxxxou.aliyuncs.com/test/aaa59xxxxxxxc695def4/1606277539701637%E7%9A%84%E5%89%AF%E6%9C%AC.mp4"
);

Present documents

Fastboard integrates the docs viewer and slide extensions and provides the insertDocs method.

var response = {
    "uuid": "01xxxx82",
    "type": "dynamic",
    "status": "Finished",
    "progress": {
        "totalPageSize": 3,
        "convertedPageSize": 3,
        "convertedPercentage": 100,
        "convertedFileList": [
            {
                "width": 1280,
                "height": 720,
                "conversionFileUrl": "pptx://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/01612xxx882/1.slide",
                "preview": "https://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/01612xxx882/preview/1.png"
            }
        ],
        "currentStep": "Packaging"
    }
};

var btn = document.getElementById("addPPT");
btn.onclick = async function addPPT() {
    await app.insertDocs("My PPT", response);
};

Reference

Run npm run dev. You can see the inserted image, media window, or document window after the page opens.

Display files using Fastboard

Understand the tech

Prerequisites

Project setup

Insert Images

Play audio and video

Present documents

Reference

Understand the tech

Prerequisites

Project setup

Insert Images

Play audio and video

Present documents

Reference

Understand the tech

Prerequisites

Project setup

Insert Images

Play audio and video

Present documents

Reference

Contact Us

Contact Us