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 insertImage 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 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 /app/java/com.example.<projectname>/MainActivity, replace fastRoom.join() with the following code:

   
   

   _5

   // Joins the whiteboard room

   _5

   fastRoom.join { room ->

   _5

   // Calls `insertImage`, and pass in the URL, width, and height of the image

   _5

   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)

   _5

   }

   
   

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

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

The Fastboard integrates the media player extension and provides the insertVideo method for playing audio and video files. You can simply call insertVideo 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 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 /app/java/com.example.<projectname>/MainActivity, replace fastRoom.join() with the following code:

   
   

   _5

   // Joins the whiteboard room

   _5

   fastRoom.join { room ->

   _5

   // Calls insertVideo, and pass in the URL of the video file and the title of sub-window

   _5

   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")

   _5

   }

   
   

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.

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

Fastboard integrates the docs viewer and slide extensions and provides the insertDocs method for presenting documents. You can simply call insertDocs and pass in the information on a document conversion task, such as the task UUID and token, to present the 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 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. After joining the whiteboard room, call the insertDocs method, and pass the following information in the params parameter of the method:

   • taskUUID: String. The UUID of the file conversion task.

   • taskToken: String. The token of the file conversion task.

   • fileType: String. The file type .pdf represents a static document; .pptx represents a dynamic document.

   • title: String. The title of the sub-window.

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 the whiteboard room project:

1. Upload the PPTX source document to a third-party cloud storage service and call the Start file conversion (POST) API to create a dynamic-file conversion task that converts the PPTX file to HTML web pages.

2. Launch a file conversion task and get the UUID and token of the task.

3. In /app/java/com.example.<projectname>/MainActivity, replace fastRoom.join() with the following code:

   
   

   _17

   // Joins the whiteboard room

   _17

   fastRoom.join { room ->

   _17

   // Parameterts of the converted document

   _17

   val params = FastInsertDocParams(

   _17

   "Task UUID",

   _17

   "Task Token",

   _17

   "pptx",

   _17

   "My PPT"

   _17

   )

   _17

   // Calls insertDocs to insert the converted document, and register the callbacks to get call results

   _17

   room.insertDocs(params, object : FastResult<String> {

   _17

   override fun onSuccess(value: String) {

   _17

   }

   _17

   override fun onError(exception: Exception?) {

   _17

   }

   _17

   })

   _17

   }

   
   

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.