展示文件

声网 Fastboard SDK 支持在白板中插入和展示多种形式的文件，例如图片、音视频和文档，帮助用户快速分享丰富多元的信息，创造沉浸式的互动体验。

本文介绍如何调用 Fastboard SDK 的 API 插入图片、演示文档和播放音视频。

插入图片

声网 Fastboard SDK 提供 insertImg 方法，用于在白板主窗口中插入并展示图片。你只需调用该方法，并传入图片的 URL、宽和高，即可在白板上展示指定图片。

开始前，请确保满足以下条件：

• 在项目中集成声网 Fastboard SDK 并加入房间。详见加入白板房间。
• 准备好图片的 URL 地址并确保 App 客户端能够访问该 URL，否则图片无法正常展示。
• 确保图片的格式为 PNG、JPG 或 JPEG 。

下面在加入白板房间的示例项目基础上添加代码，展示如何在白板中插入一张图片。

1. 在 ViewController.swift 文件中，用如下代码替换 fastRoom.joinRoom()：

   Swift

   fastRoom.joinRoom {
   // 调用 insertImg 并传入图片的 URL 和尺寸
   fastRoom.insertImg(
       URL(string: "https://test.aliyuncs.com/cloud-storage/2022-xx/15/e3xxda.png")!,
       imageSize: .init(width: 100, height: 100))
   }

2. 运行项目。App 重启后，可以在白板页面看到插入的图片。

注意

目前 Fastboard SDK 没有为插入音视频功能提供 UI，你需要自行实现。

播放音视频

声网 Fastboard SDK 集成了内置插件 MediaPlayer，用于播放音视频文件。你只需调用 Fastboard SDK 的 insertMedia 方法，传入音视频文件的 URL 地址和窗口标题，即可在白板子窗口中播放音视频。

开始前，请确保满足以下条件：

• 在项目中集成声网 Fastboard SDK 并加入房间。详见加入白板房间。
• 准备好音频或视频文件的 URL 地址并请确保 App 客户端能够访问该 URL，否则音视频文件无法播放。
• 确保音视频文件的格式为 MP3 或 MP4。

下面在加入白板房间的示例项目基础上添加代码，展示如何在白板中插入并播放音视频文件。

1. 在 ViewController.swift 文件中，用如下代码替换 fastRoom.joinRoom()：

   Swift

   fastRoom.joinRoom {
   // 调用 insertMedia 并传入音视频文件的 URL 和子窗口标题
   fastRoom.insertMedia(
       URL(string: "https://test.aliyuncs.com/cloud-storage/2022-xx/15/52xxx37.mp4")!,
       title: "test1.mp4",
       completionHandler: nil)
   }

2. 运行项目。App 重启后，可以在白板页面上看到名为 test1.mp4 的子窗口，点击开始按钮，即可播放视频。

注意

目前 Fastboard SDK 没有为插入音视频功能提供 UI，你需要自行实现。

演示文档

声网 Fastboard SDK 集成了内置插件 DocsViewer，用于展示文档。成功使用声网文档转服务完成文档转换后，只需调用 Fastboard SDK 的 insertPptx 或 insertStaticDocument 方法，并传入转换后的文件信息，即可在白板子窗口中分页演示文档。

开始前，请确保满足以下条件：

• 在项目中集成声网 Fastboard SDK 并加入房间。详见加入白板房间。
• 了解并开通文档转换服务。

具体实现步骤如下：

1. 将源文件上传至第三方云存储，调用发起文档转换，创建一个文档转换任务。请求成功后，声网服务端会在响应包体中返回 uuid，即文档转换任务的 Task UUID。
2. 调用生成 Task Token API 并在请求路径中传入 uuid，为文档转换任务生成一个 Task Token。
3. 调用查询转换任务进度 并传入该转换任务的 Task Token 和 Task UUID，获取转换后的文件信息，即响应包体中 convertedFileList 参数的值。
4. 加入白板房间后，根据文档的类型，调用 insertPptx 或 insertStaticDocument 方法，并传入如下参数：
   • pages：转换后的文件信息。你需要自行将 convertedFileList 转换为 WhitePptPage 数组。
   • title：窗口标题。
   • completionHandler：方法调用结果回调。传入 nil，表示不注册回调。

下面在加入白板房间的示例项目基础上添加代码，展示如何插入并展示一个带动画效果的 PPTX 文件。

1. 成功完成了动态文档转换，并调用查询转换任务进度 获取了转换后的文件信息。

2. 在 ViewController.swift 文件中添加如下行，导入 Whiteboard SDK：

   Swift

   import UIKit
   import Fastboard
   // 导入 Whiteboard SDK
   import Whiteboard

3. 在 ViewController.swift 文件中，用如下代码替换 fastRoom.joinRoom()：

   Swift

   fastRoom.joinRoom {
   // 将文档转换结果中 convertedFileList 的值定义为 jsonStr 变量
   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"
               }]
       """
   // 将 jsonStr 转换为 WhitePptPage 数组
   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!))
   }
   // 调用 insertPptx 插入文档
   fastRoom.insertPptx(pages, title: "演示文档")
   return
   }

4. 运行项目。App 重启后，可以在白板页面上看到名为演示文档的子窗口，点击切页箭头，即可分页演示文档。