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

ssshooter 发布于2019-08-23 12:38 / 3149人阅读

摘要：如何接入一个全平台实时互动白板是一款全平台支持的实时互动白板，可以用于在线教育会议远程协作设计审查演示等场景。客户只需要注册企业帐号，获取证明企业身份的，就可以根据接入文档一键启动互动白板。本教程将引导你在自己的网站中引入一块互动白板。

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

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 的绝对路径，打开这个网页。

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

相关代码

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

云服务器 GPU云服务器 webrtc互动白板互动白板webrtc webrtc实现互动白板 webrtc互动白板的实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98877.html

UCloud WebRTC 来了！支持万人直播的一站式实时音视频解决方案

摘要：宋体同时支持多平台的接入，能满足不同客户端的接入需求。宋体宋体支持万人直播推送宋体宋体利用实时集群直播集群，实现音视频连麦互动可以同时推送万人直播，具体原理如下。有人说：2G 看文字，3G 看图片，4G 看视频，那么对于已经开启序幕的 5G 时代呢？随着短视频、在线课堂、互动直播等音视频应用的崛起，如何适配差异化的网络环境，为用户提供更流畅高清的实时音视频服务成为关注重点。而当前的音视频技术...

AlphaGooo 2019-12-27 12:20 评论0 收藏0
后疫情时代，UCloud为小站教育打造实时互动“云端”课堂

摘要：目前，小站教育已开设美高择校备考留学规划等全面提升预备役留学生综合实力的课程。后疫情时代，小站教育加快打造更优质的在线语培教学服务，与携手优化现有教学模式。梦想不是简单的梦和想，而是无论顺境逆境，光明黑暗都矢志不渝的激情与渴望。这是小站教育创始人兼CEO王浩平写在公司官网上的话。经历过为留学考6次托福和3次GMAT的回忆，王浩平希望用小站教育帮助更多学子避开自己曾走过的弯路，打开更为广阔的世...

Tecode 2022-06-28 19:00 评论0 收藏0
更懂在线互动课堂，UCloud优刻得推出URTC实时音视频

摘要：微软雅黑宋体除在线教育外，也可满足语音和视频社交远程医疗视频会议娱乐直播等多种业务场景需要，后续将持续推出多行业的实时音视频解决方案。微软雅黑宋体目前已上线公测，且每月万分钟内免费，登录优刻得官网即可了解更多产品功能及价格信息。近日，中立云服务平台UCloud优刻得正式推出URTC（UCloud Real-Time Communication）实时音视频产品，依托于UCloud优刻得强大的云...

imtianx 2019-12-27 11:44 评论0 收藏0