如何接入一个全平台实时互动白板 1
如何接入一个全平台实时互动白板
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 资源文件。
- 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 上下载这章的所有代码。
如何接入一个全平台实时互动白板 1相关推荐
- 如何接入一个全平台实时互动白板
如何接入一个全平台实时互动白板 white 是一款全平台支持的实时互动白板,可以用于在线教育.会议.远程协作.设计审查.PPT 演示等场景. white 官方网站 我们在官网上做了详细的产品介绍,让用 ...
- mac备忘录同步android,IOS技巧心得 篇五:iOS备忘录,可实现全平台实时同步,iPhone ipad PC...
IOS技巧心得 篇五:iOS备忘录,可实现全平台实时同步,iPhone ipad PC 2020-01-20 17:47:28 11点赞 54收藏 16评论 前言: 由于生活中越来越多的手机.平板电脑 ...
- 视频会议直播中实现Web实时互动白板功能|Demo分享
超级白板功能概述 即构超级白板(ZegoSuperBoard),基于即构亿级海量用户的实时信令网络,提供完整的多人实时在线白板互动协同服务,包括:白板涂鸦.实时轨迹同步.文档共享.文件转码.白板录制与 ...
- 物联网小白入门式教学,如何快速接入一个云平台① YeeLink(重点讲解小白学习思路,高手忽略)
文章目录 1.背景 2.接入YeeLink思路 2.1 是什么? 2.2 能做什么? 2.3 成功案例? 3.总结 1.背景 写这篇文章的想法主要来源于与一个物联网电子类粉丝同学的交流 总结出几点内容 ...
- 一个全平台免编程应用制作平台,让你在线制作应用没有烦恼
随着互联网市场的不断发展,移动应用开发也成为了炙手可热的项目.很多的中小企业甚至是个人也开始有开发App的念头,,但说容易,做起来可就不是件简单的事了,比如需要找一个靠谱的开发团队,或是找外包公司,这 ...
- 写一个简单的实时互动小游戏
在写之前,我们先回顾上一篇文章,从需求.架构.设计.开发上讲述并演示了搭建一个实时通信客户端的过程,并附了图片与视频. 写这篇文章的之前,第一个互动的游戏DEMO已经写好了,先附上截图 很奇怪的一张图 ...
- 物联网小白入门式教学,如何快速接入一个云平台② 机智云物联网云服务(重点讲解小白学习思路,高手忽略)
文章目录 1.背景 2.接入机智云思路 2.1 关于应用开发(重点内容) 2.2 关于设备接入(重点内容) 授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周 ...
- send anywhere:一个全平台的文件传输神器
简介: Send Anywhere是个免费的跨平台传输软件,使用不受平台和文件大少的限制,无需注册和登录. 支持的平台: 移动端: 有Android,iOS, Windows Store, Kindl ...
- 更新丨同屏互动上线,提供高效VR实时互动沟通平台!
蛙色3DVR平台,功能更新! 本次升级推出同屏互动.综合搜索.聚合热点三大功能,综合行业实际需求,拓展交互形式,完善从传播到实际应用的全链路体验! 同屏互动功能,一键开启实时通话,低流量.低延时.高品 ...
最新文章
- RTMP协议中的Chunk Stream ID (CID)的作用
- 微信开发者配置服务器信息,【开发】微信验证开发者接口配置信息,服务器没有正确响应Token....
- 新浪微博回应热搜被暂停更新一周;即刻 APP 下架一年后恢复上线;Android 11 Beta 版发布| 极客头条...
- 一文详解数据分析的 TGI 指数 | 技术头条
- openstack错误汇总
- 定向搜索(beam search)
- JS中某事件需要同时调用几个function另类解决办法。
- 基于SSM高校后勤管理系统
- 软件需求说明书/ 概要设计说明书/项目开发计划/详细设计说明书模版(说明要点及要点解释)
- android 融云数据库路径,Android开发规范
- linux du命令
- 培训班出来的程序员能找到工作吗?
- 词消歧算法:使用WordNet和Lesk算法进行英文消歧义
- 电脑测试,模拟微信内置浏览器Firefox/chrome
- Geodesic.WGS84.Inverse通过两点经纬度计算两点间的方位角
- 达梦数据库迁移数据报错 字符串截断
- PC端QQ登录界面的测试用例
- 咖啡 santos and java,咖啡种类的分析 煮咖啡水配比
- python数据处理方法汇总
- 华为联合教指委发布《物联网实践系列教材》
热门文章
- ROS Navigation插件注册自定义导航避障算法
- 有什么音质的半入耳式蓝牙耳机?音质最好的蓝牙耳机推荐
- 计算机网络复习思维导图
- 2021年中国花卉电商产业现状与趋势分析,鲜花需求持续上升,线上趋势推进「图」
- winsvr服务器C盘突然满了的处理方法
- 利用Cloudflare搭建ChatGPT API 代理服务器 傻瓜教程
- 图像语义分割python_图像语义分割ICNET_飞桨-源于产业实践的开源深度学习平台...
- scp远程服务器拷贝到远程服务器
- 硬件篇:手把手教你制作属于你的遥控车(51单片机蓝牙小车)
- 【发际线大作战】C++学习记录之用户自定义数据类型