下载APP

如何接入一个全平台实时互动白板

white 是一款全平台支持的实时互动白板,可以用于在线教育、会议、远程协作、设计审查、PPT 演示等场景。

white 官方网站

我们在官网上做了详细的产品介绍,让用户可以更深入的了解 white 在教育、协作、会议等场景下的创新和优势。

点击查看官网

在这里插入图片描述

white web app

针对个人用户和小团队用户:

我们提供了开箱即用的 White App。White App 覆盖了 iOS、Android、 Web、 小程序、Windows、Mac OS,等主流平台应用,用户只需要注册 White 个人帐号即可使用。

点击使用 white 网页版

在这里插入图片描述

white 控制台

针对企业的级大客户:

我们提供了高可用的白板云服务 White Service。White Service 提供了 iOS、Android、Web 等主流平台的 SDK 和云端相关业务的线路优化、数据处理和存储分发一站式服务。客户只需要注册 White 企业帐号,获取证明企业身份的 White miniToken,就可以根据接入文档一键启动 White 互动白板。

点击查看控制台

在这里插入图片描述

以 JavaScript 为例 快速开始

Hi, 亲爱的开发者,欢迎使用 White 白板。本教程将引导你在自己的网站中引入一块互动白板。不过首先,我们假定你已经了解 JavaScript 的基础语法,并掌握了 HTML 页面的基础知识。

创建项目

首先,你需要在你桌面端创建一个文件夹,作为工作空间。随后,我们将在这个工作空间中添加一些文件。然后,我们创建一个名为 index.html 的文件。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://sdk.herewhite.com/white-web-sdk/1.3.0.css">
        <script src="https://sdk.herewhite.com/white-web-sdk/1.3.0.js"></script>
        <script src="index.js"></script>
    </head>
    <body>
        <div id="whiteboard" style="width: 100%; height: 100vh;"></div>
    </body>
</html>

引入资源

该页面引用了 3 个 JavaScript 资源文件。

创建白板

现在,我们在工作空间创建 index.js 文件。

var whiteWebSdk = new WhiteWebSdk();
var miniToken = 'WHITEcGFydG5lcl9pZD1DYzlFNTJhTVFhUU5TYmlHNWJjbkpmVThTNGlNVXlJVUNwdFAmc2lnPTE3Y2ZiYzg0ZGM5N2FkNDAxZmY1MTM0ODMxYTdhZTE2ZGQ3MTdmZjI6YWRtaW5JZD00JnJvbGU9bWluaSZleHBpcmVfdGltZT0xNTY2MDQwNjk4JmFrPUNjOUU1MmFNUWFRTlNiaUc1YmNuSmZVOFM0aU1VeUlVQ3B0UCZjcmVhdGVfdGltZT0xNTM0NDgzNzQ2Jm5vbmNlPTE1MzQ0ODM3NDYzMzYwMA';

var url = 'https://cloudcapiv3.herewhite.com/room?token=' + miniToken;
var requestInit = {
    method: 'POST',
    headers: {
        "content-type": "application/json",
    },
    body: JSON.stringify({
        name: 'my whiteboard',
        limit: 100, // 房间人数限制
    }),
};

fetch(url, requestInit)
    .then(function(response) {
        return response.json();
    })
    .then(function(json) {
        return whiteWebSdk.joinRoom({
            uuid: json.msg.room.uuid,
            roomToken: json.msg.roomToken,
        });
    })
    .then(function(room) {
        room.bindHtmlElement(document.getElementById('whiteboard'));
    });

使用体验

这时,你的工作空间里应该已经创建了 2 个文件。

  • index.html
  • index.js

双击 index.html 或在浏览器(推荐使用 Chrome)地址栏中输入 index.html 的绝对路径,打开这个网页。

demo-1.png | center | 747x474

之后,可以在网页上写写画画,此时应该能看到涂写的笔迹。至此,我们的第一个白板应用就做好了。

demo-2.png | center | 747x474

相关代码

你可以在 Github 上下载这章的所有代码。

在线举报