Display files using Whiteboard

When using the whiteboard, users may need to present files in DOC, DOCX, PDF, PPT, or PPTX format. The Whiteboard SDK supports inserting and displaying an image or web page in each scene by specifying a URL.

This feature is for Web only.

This page describes how to create multiple scenes to display a complete file.

Understand the tech

To display a file on the Interactive Whiteboard, do the following:

Convert the source file to be displayed into a set of individual images or web pages, upload them to your server or a third-party cloud storage, and generate a set of URLs that are accessible on the public network.
Create a set of scenes and insert the URLs of the images or web pages into each scene in order. Add the scenes to the whiteboard.
Create a button and bind it with the scene-switching API. When the button is clicked, the SDK switches the scenes sequentially, displaying the file page by page.

When converting a source file to images or web pages, note the following:

Ensure the format of the converted images or web pages is supported by the Whiteboard SDK. The Whiteboard SDK supports inserting and displaying images or web pages in the following formats:
- Static images in PNG, JPG/JPEG, and WEBP formats.
- Static images in PNG, JPG/JPEG, and WEBP formats converted from PPT, PPTX, DOC, DOCX, and PDF files. You can convert them yourself or use the static-file conversion service of Agora Interactive Whiteboard.
- HTML web pages converted from PPTX files. You must use the dynamic-file conversion service of Agora Interactive Whiteboard to do the conversion.
Ensure the converted images or web pages are accessible on the public network. In addition, if the server that stores the images or web pages has a different domain from that of your web application, you need to configure Cross-Origin Resource Sharing (CORS); otherwise, your web application might fail to access and load these images or web pages.

Prerequisites

To follow the procedure on this page, ensure you meet the following requirements:

Complete file conversion and generate a set of URLs for the converted images or web pages. If you need to use the file-conversion feature of the Agora Interactive Whiteboard, see File Conversion Overview.
Understand the basic concepts and operations of scenes. See Scene Overview and Manage Scenes.
Integrate the Agora Interactive Whiteboard SDK into your project and implement joining a room. For details, see Join a Whiteboard Room.

Implementation

The following section extends the Join The Whiteboard Room sample code to show the creation of multiple scenes and the display of a six-page, animated PPTX file.

Upload the PPTX source file to a third-party cloud storage service, and call the Start file conversion API to create a dynamic-file conversion task that converts the PPTX file to HTML web pages.
Call the Query file conversion progress API to get the URLs of the converted HTML web pages from the conversionFileUrl parameter in the response body.

Add the following lines to the joinWhiteboard.js file to create new scenes and implement scene switching:

var whiteWebSdk = new WhiteWebSdk({
    appIdentifier: "RMmxxxxAQ", // Your App Identifier
});

var joinRoomParams = {
    uuid: "a7xxxxx69", // Room UUID
    roomToken: "NETLESSROOM_YWxxxxjk", // Room Token
};

whiteWebSdk.joinRoom(joinRoomParams).then(function(room) {

    room.bindHtmlElement(document.getElementById("whiteboard"));

    // Specify the width (px), height (px), and URL of each PPTX slide, and create a new set of scenes.
    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,
            },
        };
    });

   // Add the scenes to a specified scene directory.
   room.putScenes("/AgoraFPA", scenes);

   // Switch to the first newly inserted scene.
   room.setScenePath("/AgoraFPA/1");

   // Define the "Next Page" and "Previous Page" buttons.
   var nextpage = document.getElementById("nextpage");
   var prepage = document.getElementById("prepage");

   // Click the "Next Page" button to switch to the next scene.
   nextpage.addEventListener("click", function(){
       var nextIndex = room.state.sceneState.index + 1;
       var scenes = room.state.sceneState.scenes;

       if (nextIndex < scenes.length) {
           room.setSceneIndex(nextIndex);
       };
   });

   // Click the "Previous Page" button to switch to the previous scene.
   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);
});

Add the following code to the index.html file to load the button for switching scenes on the web page:

<!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>
        <!--Define the style of the buttons and add them to the web page-->
        <div style="display: inline-block;">
        <div id="nextpage" class="Next" style="width: 50px; border: 1px solid lightskyblue;display: inline-block;position: fixed; bottom: 400px;">
            Next Page
        </div>
        <div id="prepage" class="Prev" style="width: 50px; border: 1px solid lightskyblue;display: inline-block;position: fixed; bottom: 430px;">
            Previous page
        </div>
    </div>
    </body>
</html>

After saving the changes and reopening the index.html file with your browser, you can see the first page of the PPTX file. Click the Next Page button to move through the PPTX file sequentially. You can also see the animation effect in the source file display on the whiteboard scene.

API reference

APIs of the Whiteboard SDK for web:

RESTful APIs of the file conversion feature: