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.
The Agora Fastboard SDK provides the [insertImg
]/en/whiteboard/fastboard_api_ios?platform=iOS#insertimg) method for inserting and displaying an image in the main window of the whiteboard. You can call this method and pass in the URL, width, and height of the image to display a specified image.
Before you start, make sure you meet the following requirements:
Integrate the Agora Fastboard SDK in your project, and join the room. See Join a Whiteboard Room.
Prepare the URL of the image. Make sure that your app clients can access the URL; otherwise, the image cannot be displayed properly.
Make sure that the image is in PNG, JPG/JPEG, or WEBP format.
The following steps show how to implement inserting an image in the Join a Whiteboard Room project:
In ViewController.swift
, replace fastRoom.joinRoom()
with the following code:
fastRoom.joinRoom() {
// Calls insertImg, and passes in the URL, width, and height of the image
fastRoom.insertImg(URL(string: "https://test.aliyuncs.com/cloud-storage/2022-xx/15/e3xxda.png")!,
imageSize: .init(width: 100, height: 100))
}
Run the project. You can see the inserted image on the whiteboard after the app refreshes.
The Fastboard SDK does not provides a UI for insertImage. You need to implement the UI yourself.
insertImg
. You need to implement the UI yourself.The Agora Fastboard SDK integrates the media player extension and provides the insertMedia
method for playing audio and video files. You can simply call insertMedia
and pass in the URL of the audio or video file and the title of the sub-window play the audio and video in a sub-window on the whiteboard.
Before you start, make sure you meet the following requirements:
Integrate the Agora Fastboard SDK in your project, and join the room. See Join a Whiteboard Room.
Prepare the URL of the audio or video. Make sure that your app clients can access the URL; otherwise, the audio and video cannot be loaded properly.
Make sure that the audio and video files are in MP3 or MP4 format.
The following steps show how to implement playing a video in the Join a Whiteboard Room project:
In ViewController.swift
, replace fastRoom.join()
with the following code:
fastRoom.joinRoom(){
// Calls insertMedia, and passes in the URL of the video file and the title of sub-window
fastRoom.insertMedia(URL(string: "https://test.aliyuncs.com/cloud-storage/2022-xx/15/52xxx37.mp4")!,
title: "test1.mp4",
completionHandler: nil)
}
test1.mp4
after the app refreshes. Click the start button to play the video.insertMedia
. You need to implement the UI yourself.The Agora Fastboard SDK integrates the docs viewer and slide extensions and provides the insertStaticDocument
and insertPptx
methods for presenting documents. You can simply call insertStaticDocument
or insertPptx
and pass in the information on the converted files to present a document in a paginated format in a sub-window on the whiteboard. The implementation workflow is as follows:
Upload the source document to a third-party cloud storage service, and call the Start file conversion (POST) API to create a file conversion task. When the call succeeds, the Agora server returns uuid in the response body, which is the unique identifier (UUID) of the file conversion task.
Call the Generate a task token (POST) API, and pass the uuid in the request path to generate a task token for the file conversion task.
Call the Query file conversion progress (GET) API, and pass in the UUID and token of the conversion task to get the information on the converted files, that is, the value of the convertedFileList
parameter in the response body.
After joining the whiteboard room, call insertStaticDocument
or insertPptx
depending on the document type, and pass in the following parameters:
pages
: The list of converted files. You need to convert convertedFileList
to a WhitePptPage
array yourself.
title
: The title of the sub-window.
completionHandler
: The callback that reports the call results. Passing in nil
means not registering the callback.
Before you start, make sure you meet the following requirements:
Integrate the Agora Fastboard SDK in your project, and join the room. See Join a Whiteboard Room.
Understand and enable the file-conversion service.
The following steps show how to implement presenting an animated PPTX document in the Join a Whiteboard Room project:
Successfully launch a dynamic-document conversion task, and call the Query file conversion progress (GET) API to get the list of converted files.
In ViewController.swift
, add the following line after import Fastboard
:
import UIKit
import Fastboard
// Imports the Whiteboard SDK
import Whiteboard
In ViewController.swift
, replace fastRoom.join()
with the following code:
fastRoom.joinRoom(){
// Defines the value of convertedFileList in the file conversion result as a jsonStr variable
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"
},
{
"width": 1280,
"height": 720,
"conversionFileUrl": "pptx://convertcdn.netless.link/dynamicConvert/3ce728e0954f11ec997c6580ac31fd96/2.slide",
"preview": "https://convertcdn.netless.link/dynamicConvert/3ce728e0954f11ec997c6580ac31fd96/preview/2.png"
},
{
"width": 1280,
"height": 720,
"conversionFileUrl": "pptx://convertcdn.netless.link/dynamicConvert/3ce728e0954f11ec997c6580ac31fd96/3.slide",
"preview": "https://convertcdn.netless.link/dynamicConvert/3ce728e0954f11ec997c6580ac31fd96/preview/3.png"
}]
"""
// Converts jsonStr to a WhitePptPage array
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!))
}
// Calls `insertPptx` to insert and display the document
fastRoom.`insertPptx`(pages, title: "My PPT")
return
}
Run the project. You can see the sub-window named My PPT
after the app refreshes. Click the arrow on the window to show your document page by page.