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.

Fastboard provides the 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 Fastboard in your project, and join the room. See Join the 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 the whiteboard room project:

1. 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))
   

   }
   
2. Run the project. You can see the inserted image on the whiteboard after the app refreshes.

Fastboard does not provide a UI for insertImg. You need to implement the UI yourself.

Fastboard 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 Fastboard in your project, and join the room. See Join the 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 the whiteboard room project:

1. 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)
   

   }
   

2. Run the project. You can see the sub-window named test1.mp4 after the app refreshes. Click the start button to play the video.

The Fastboard SDK does not provides a UI for 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:

1. 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.

2. 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.

3. Call the Query file conversion progress, 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.

4. 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 Fastboard in your project and join the room. See Join the 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:

1. Successfully launch a dynamic-document conversion task, and call the Query file conversion progress to get the list of converted files.

2. In ViewController.swift, add the following line after import Fastboard:

   import UIKit
   

   import Fastboard
   

   // Imports the Whiteboard SDK
   

   import Whiteboard
   

3. 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
   

   }
   

4. 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.