如何接入实时互动白板

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 的文件。

引入资源

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

• https://sdk.herewhite.com/white-web-sdk/1.3.0.css：White 的样式文件。

• https://sdk.herewhite.com/white-web-sdk/1.3.0.js： White 的 SDK 文件。

• index.js ：这是实现我们业务逻辑的 js 文件。

创建白板

现在，我们在工作空间创建 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 的绝对路径，打开这个网页。

[图片上传失败...(image-8b2947-1542513920409)]

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

[图片上传失败...(image-e29d8e-1542513920409)]

相关代码

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