展示文件
当用户使用互动白板时，会需要展示 DOC、DOCX、PDF、PPT、PPTX 等不同格式的文件。 声网互动白板 SDK 提供展示文件完整内容的能力，你可以构建多个场景，在每个场景中通过指定 URL 插入并展示一张静态图片或动态 HTML 网页，从而实现文件展示效果，例如按顺序播放 PPT。
技术原理
在声网互动白板中展示文件的基本流程如下：
- 将待展示的源文件分页转换成一组图片或网页，上传至你的服务器或第三方云存储，生成一组公网可访问的 URL。
- 创建一组场景，将图片或网页的 URL 按顺序分别插入每个场景中。
- 自定义按钮，并调用切换场景 API，通过点击按钮切换场景，实现分页展示文件的效果。
将源文件转换为图片或网页时，你需要特别注意以下几点：
-
确保转换后的图片或网页格式正确。
目前声网互动白板 SDK 支持在场景中插入并展示的图片或网页格式如下：
-
确保图片或网页的访问权限。
你需要确保转换后的图片或网页可通过公网访问；此外，如果存储图片或网页的服务器与你的 Web 应用域名不同，你需要在服务端配置跨源资源共享（CORS），设置 CORS 头部为
Access-Control-Allow-Origin: *，确保在本地加载资源时不会被跨域限制阻挡。否则，你的 Web 应用服务将无法访问并加载这些图片或网页。
前提条件
开始前，请确保满足以下条件：
- 完成文档转换，并生成一组图片或网页的 URL 地址。如果你需要使用声网互动白板的文档转换功能，详见文档转换服务。
- 了解场景的基本规则和操作。详见场景概览和管理场景。
- 在项目中集成声网互动白板 SDK 并加入房间。详见加入白板房间。
实现文件展示
下面在加入白板房间的示例项目基础上添加代码，介绍如何构建多个场景，展示一个六页、带动画效果的 PPTX 文件。
-
将 PPTX 源文件上传至第三方云存储，调用发起文档转换，创建一个动态文档转换任务，将 PPTX 文件按页转换为 HTML 网页。
-
调用查询转换任务进度，从响应包体的
previews参数中获取转换生成的 HTML 网页的 URL 地址。 -
在加入白板房间的
index.js文件中添加如下行，构建新场景并实现场景切换：
var whiteWebSdk = new WhiteWebSdk({
appIdentifier: "RMmxxxxAQ", // 你的 AppIdentifier
});
var joinRoomParams = {
uuid: "a7xxxxx69", // 房间的 UUID
roomToken: "NETLESSROOM_YWxxxxjk", // Room Token
};
whiteWebSdk
.joinRoom(joinRoomParams)
.then(function (room) {
room.bindHtmlElement(document.getElementById("whiteboard"));
// 指定待展示的 PPT 页面的宽（px）、高（px）和 URL 地址，构建一组新场景。
var width = 1280;
var height = 720;
var imageURLs = [
"pptx://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/016xxx82/19.slide",
"pptx://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/016xxx82/20.slide",
"pptx://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/016xxx82/21.slide",
"pptx://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/016xxx82/22.slide",
"pptx://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/016xxx82/23.slide",
"pptx://docs-test-ct.oss-cn-hangzhou.aliyuncs.com/dynamicConvert/016xxx82/24.slide",
];
var scenes = imageURLs.map(function (url, index) {
return {
name: "" + (index + 1),
ppt: {
src: url,
width: width,
height: height,
},
};
});
// 指定场景目录，插入新构建的场景。
room.putScenes("/AgoraFPA", scenes);
// 切换到新插入的第一个场景。
room.setScenePath("/AgoraFPA/1");
// 定义“下一页”和“上一页”按钮。
var nextpage = document.getElementById("nextpage");
var prepage = document.getElementById("prepage");
// 点击“下一页”按钮，切换至下一个场景。
nextpage.addEventListener("click", function () {
var nextIndex = room.state.sceneState.index + 1;
var scenes = room.state.sceneState.scenes;
if (nextIndex < scenes.length) {
room.setSceneIndex(nextIndex);
}
});
// 点击“上一页”按钮，返回上一个场景。
prepage.addEventListener("click", function () {
var preIndex = room.state.sceneState.index - 1;
var scenes = room.state.sceneState.scenes;
if (preIndex >= 0) {
room.setSceneIndex(preIndex);
}
});
})
.catch(function (err) {
console.error(err);
});
- 在
index.html文件中添加如下代码，将切换场景的按钮加载到页面上：
<!DOCTYPE html>
<html>
<head>
<script src="https://sdk.netless.link/white-web-sdk/2.13.11.js"></script>
<script src="./index.js"></script>
</head>
<body>
<div id="whiteboard" style="width: 100%; height: 100vh;">
</div>
<!--定义场景切换按钮的样式，并将其添加到网页上-->
<div style="display: inline-block;">
<div id="nextpage" class="Next" style="width: 50px; border: 1px solid lightskyblue;display: inline-block;position: fixed; bottom: 400px;">
下一页
</div>
<div id="prepage" class="Prev" style="width: 50px; border: 1px solid lightskyblue;display: inline-block;position: fixed; bottom: 430px;">
上一页
</div>
</div>
</body>
</html>
保存修改后重新用浏览器打开 index.html 文件，你可以看到 PPTX 文件的首页。点击下一页按钮，可以按顺序播放 PPTX 文件，并且可以看到源文件中的动画效果。
API 参考
互动白板 Web SDK API：
互动白板文档转换 RESTful API：