实时音视频
实时音视频
文档指南
请输入
实时音视频
快速入门
场景方案
开发指南
Token 鉴权
音频管理
视频管理
屏幕共享
SDK 升级指南
客户端 API 参考
服务端 API 参考
房间管理
转推直播
输入在线媒体流
WTN 流（原公共流）
实时数据监控
历史数据查询
业务标识管理
实时消息通信
历史版本（文档停止维护）
2023-08-01
2023-06-01
转推直播
2022-06-01
2020-12-01
转推直播
输入在线媒体流
获取数据指标
常见问题
集成相关
质量相关
AI 音视频互动方案
开发指南
配置 ASR/LLM/TTS 服务
API 参考
硬件对话智能体
用户指南
服务端 API
智能体
实时信令
互动白板
客户端 API 参考
服务端 API 参考
- 文档首页
实时音视频互动白板高级功能文件上传
复制全文
下载 pdf文件上传
文档反馈
问问助手你可以在白板客户端上传文件并在白板房间中展示。本文介绍如何使用客户端 SDK 为你的应用添加文件上传和展示功能。
注意
动态转码服务即将下线，建议改用静态转码。
前提条件
- 在 RTC 控制台开通转码服务。
- 在火山引擎或其他 TOS 服务商开通了 TOS 服务。
- 移动端和 Web SDK 自客户端 1.3 版本起支持本功能。
使用流程
你可以根据应用场景的实际需要，灵活选择文件上传中发起文件转码任务和客户端使用转码结果的实现方式。
- 调用服务端的 OpenAPI 发起转码，调用客户端 API 使用转码结果
- 调用 Web 端接口发起转码和使用转码结果
- 调用微信小程序端接口发起静态转码和使用转码结果
你只需要在文件上传端实现以上步骤，房间内的其他用户端将自动同步展示。
服务端转码和移动端展示
- 在业务服务端将用户上传的文件传至 TOS 服务器。
- 调用 Open API 在白板服务端发起转码任务。
- 将转码结果按指定类型的格式进行封装。
- 创建对应的新白板，用来展示转换后的文件。
| Android | iOS |
| Android | iOS |
静态转码 |
- 白板创建成功会触发以下回调。创建白板后，默认自动跳转到新创建的白板。
Web 端转码和展示
- 在业务服务端将用户上传的文件传至 TOS 服务器。
- 调用客户端 SDK createTranscodeTask 接口，发起转码任务。
- 将转码结果按指定类型的格式进行封装。
- 静态转码：WebPageInfo
- 创建对应的新白板，用来展示转换后的文件。
- 静态转码：createWhiteBoard
- 白板创建成功会触发 onCreateWhiteBoard 、onCurrentWhiteBoardChanged 回调。创建白板后，默认自动跳转到新创建的白板。
静态转码示例代码
// 发起静态转码
const transcodeRes = await whiteboardRoom.createTranscodeTask({
app_id: 'xx',
resource: 'your-ppt-url',
resource_attr: {
file_name: '文件名称',
size: '文件大小',
},
operator: 'userId',
transcode_mode: TranscodeMode.static,
storage_config: {
type: StorageType.Tos,
tos_config: {
account_id: accountId,
bucket,
},
},
onProgress: (transcodePercent: number, transcodeStatus: TaskStatus, task_id: string) => {
// 业务逻辑，展示进度
},
});
// 创建白板
const { images } = transcodeRes;
const pageInfoList = images.map((i) => {
return {
pageId: String(i.page_id),
bkInfo: {
bkColor: '',
bkImage: i.img,
bkImageFillType: BkFillType.kCenter,
},
};
});
whiteboardRoom.createWhiteBoard({ pages: pageInfoList });
// 监听白板创建成功
whiteBoardRoom.on( WhiteBoardRoomEventsTypes.onCurrentWhiteBoardChanged, ({ userId, boardId, whiteBoard }) => {
bindWhiteBoardEvent(whiteBoard);
});
// 处理事件
const bindWhiteBoardEvent = (whiteBoard: IWhiteBoard) => {
whiteBoard.on(WhiteBoardEventsTypes.onError, e => {});
};
微信小程序端转码和展示
小程序端仅支持展示静态转码结果。
- 在业务服务端将用户上传的文件传至 TOS 服务器。
- 调用客户端 SDK createTranscodeTask 接口，发起转码任务。
- Page({async handleCreate() {// 微信文件 https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.htmlconst res = await wx.chooseMessageFile({count: 1,extension: ['pdf', 'doc', 'docx', 'ppt', 'pptx'],type: 'file',});const url = await new Promise((resolve, reject) => {// 微信文件 https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.htmlwx.uploadFile({name: 'file',filePath: res.tempFiles[0].path,url: UPLOAD_SERVER_URL,success: result => {resolve(result)},fail: reject,});});const transcodeRes = await this.room.createTranscodeTask({app_id: APPID,resource: URL,operator: USERID,transcode_config: {input_format: VolcMiniappWhiteboardSdk.InputFormat.pdf,output_format: VolcMiniappWhiteboardSdk.OutputFormat.png,output_width: 1200,output_height: 900,thumbnail: false,},storage_config: {type: VolcMiniappWhiteboardSdk.StorageType.Tos,tos_config: {account_id: TOS_ACCOUNT_ID,bucket: TOS_BUCKET,},},});const pages = transcodeRes.images.map((img, idx) => ({pageId: `${img.page_id === undefined ? idx + 1 : img.page_id}`,bkInfo: {bkImage: img.img,},}));
- 将转码结果按指定类型的格式 WebPageInfo 进行封装。
- 调用 createWhiteBoard 创建对应的新白板，用来展示转换后的文件。
- 将以下示例代码加入到 room.js 的 handleCreate() 中。
- await this.room.createWhiteBoard({pages,});
- 白板创建成功会触发 onCreateWhiteBoard 、onCurrentWhiteBoardChanged 回调。创建白板后，默认自动跳转到新创建的白板。
最近更新时间：2026.10.09 16:23:53
这个页面对您有帮助吗？
有用
有用
无用
无用