声网 Fastboard SDK 支持在白板中插入和展示多种形式的文件,例如图片、音视频和文档,帮助用户快速分享丰富多元的信息,创造沉浸式的互动体验。
本文介绍如何调用 Fastboard SDK 的 API 插入图片、演示文档和播放音视频。
声网 Fastboard SDK 提供 insertImage
方法,用于在白板主窗口中插入并展示图片。你只需调用该方法,并传入图片的 URL,即可在白板上展示指定图片。
开始前,请确保满足以下条件:
下面在加入白板房间的示例项目基础上添加代码,展示如何在白板中插入一张图片。
在 main.js
文件的 mountFastboard(document.getElementById("app"));
后面添加如下行插入图片:
await app.insertImage(
"https://web-cdn.agora.io/website-files/images/interactive-whiteboard-text-tab-1.png"
);
运行下列命令行运行项目:
npm run dev
index.html
页面打开后可以看到插入的图片。
声网 Fastboard SDK 集成了内置插件 MediaPlayer,用于播放音视频文件。你只需调用 Fastboard SDK 的 insertMedia
方法,传入子窗口标题和音视频文件的 URL 地址,即可在白板子窗口中播放音视频。
开始前,请确保满足以下条件:
下面在加入白板房间的示例项目基础上添加代码,展示如何在白板中播放音视频。
在 main.js
文件的 mountFastboard(document.getElementById("app"));
后面添加如下行插入音视频文件:
await app.insertMedia(
"test1.mp4",
"https://beings.oss-cn-hxxxou.aliyuncs.com/test/aaa59xxxxxxxc695def4/1606277539701637%E7%9A%84%E5%89%AF%E6%9C%AC.mp4"
);
运行下列命令行运行项目:
npm run dev
index.html
页面打开后可以看到名为 test1.mp4
的子窗口,点击开始按钮,即可播放视频。
声网 Fastboard SDK 集成了内置插件 DocsViewer,用于展示文档。你只需调用 Fastboard SDK 的 insertDocs
方法,并传入文档的信息,即可在白板子窗口中分页演示文档,具体实现步骤如下:
insertDocs
方法,并将每页图片或网页的宽、高和 URL 按顺序传入 scenes
参数中。将源文档转换为图片或网页时,你需要特别注意以下几点:
确保转换后的图片或网页格式正确。
目前 Fastboard SDK 支持插入并展示的图片或网页格式如下:
确保图片或网页的访问权限。
你需要确保转换后的图片或网页可通过公网访问;此外,如果存储图片或网页的服务器与你的 Web 应用域名不同,你需要配置跨源资源共享(CORS)。否则,你的 Web 应用服务将无法访问并加载这些图片或网页。
开始前,请确保满足以下条件:
下面在加入白板房间的示例项目基础上添加代码,展示如何插入并展示一个三页、带动画效果的 PPTX 文件。
将 PPTX 源文件上传至第三方云存储,调用发起文档转换 API,创建一个动态文档转换任务,将 PPTX 文件按页转换为 HTML 网页。
调用查询转换任务进度 API 获取文档转换的结果。
在加入白板房间的 main.js
文件中添加如下行插入文档:
// 将查询结果(查询文档转换任务进度 API 返回的整个响应包体)传入 response 参数。
var response = {
"uuid": "01xxxx82",
"type": "dynamic",
"status": "Finished",
"progress": {
"totalPageSize": 3,
"convertedPageSize": 3,
"convertedPercentage": 100,
"convertedFileList": [
{
"width": 1280,
"height": 720,
"conversionFileUrl": "pptx://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/016127900ed511ec8ad01bd5558ec882/1.slide",
"preview": "https://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/016127900ed511ec8ad01bd5558ec882/preview/1.png"
},
{
"width": 1280,
"height": 720,
"conversionFileUrl": "pptx://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/016127900ed511ec8ad01bd5558ec882/2.slide",
"preview": "https://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/016127900ed511ec8ad01bd5558ec882/preview/2.png"
},
{
"width": 1280,
"height": 720,
"conversionFileUrl": "pptx://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/016127900ed511ec8ad01bd5558ec882/3.slide",
"preview": "https://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/016127900ed511ec8ad01bd5558ec882/preview/3.png"
}
],
"currentStep": "Packaging"
}
};
// 调用 insertDocs 插入文档。
var btn = document.getElementById("addPPT");
btn.onclick = async function addPPT() {
await app.insertDocs("演示文档", response);
};
在 index.html
文件中添加如下代码,将演示文档的按钮加载到页面上:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div
id="app"
style="width: 600px; height: 400px; border: 1px solid;"
></div>
<!--定义演示文档按钮的样式,并将其添加到网页上-->
<div style="display: inline-block;">
<div id="viewDocs" class="Prev" style="width: 50px; border: 1px solid; position: fixed; bottom: 430px; right:20px;">
演示文档
</div>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>
运行下列命令行运行项目:
npm run dev
index.html
页面打开后可以看到演示文档按钮,点击该按钮,即会弹出子窗口并加载文档,点击切页箭头,即可分页演示文档。
insertDocs
方法,用于插入和展示文档。你可参考上述步骤和 insertDocs
参考文档,实现演示文档的功能