white 是一款全平臺(tái)支持的實(shí)時(shí)互動(dòng)白板姑裂，可以用于在線(xiàn)教育信粮、會(huì)議黔攒、遠(yuǎn)程協(xié)作、設(shè)計(jì)審查强缘、PPT 演示等場(chǎng)景督惰。
white 官方網(wǎng)站
我們?cè)诠倬W(wǎng)上做了詳細(xì)的產(chǎn)品介紹，讓用戶(hù)可以更深入的了解 white 在教育旅掂、協(xié)作赏胚、會(huì)議等場(chǎng)景下的創(chuàng)新和優(yōu)勢(shì)。
white web app
針對(duì)個(gè)人用戶(hù)和小團(tuán)隊(duì)用戶(hù)：
我們提供了開(kāi)箱即用的 White App辞友。White App 覆蓋了 iOS栅哀、Android、 Web称龙、 小程序留拾、Windows、Mac OS鲫尊，等主流平臺(tái)應(yīng)用痴柔，用戶(hù)只需要注冊(cè) White 個(gè)人帳號(hào)即可使用。
點(diǎn)擊使用 white 網(wǎng)頁(yè)版
white 控制臺(tái)
針對(duì)企業(yè)的級(jí)大客戶(hù)：
我們提供了高可用的白板云服務(wù) White Service疫向。White Service 提供了 iOS咳蔚、Android、Web 等主流平臺(tái)的 SDK 和云端相關(guān)業(yè)務(wù)的線(xiàn)路優(yōu)化搔驼、數(shù)據(jù)處理和存儲(chǔ)分發(fā)一站式服務(wù)谈火。客戶(hù)只需要注冊(cè) White 企業(yè)帳號(hào)舌涨，獲取證明企業(yè)身份的 White miniToken糯耍，就可以根據(jù)接入文檔一鍵啟動(dòng) White 互動(dòng)白板。
以 JavaScript 為例 快速開(kāi)始
Hi, 親愛(ài)的開(kāi)發(fā)者囊嘉，歡迎使用 White 白板温技。本教程將引導(dǎo)你在自己的網(wǎng)站中引入一塊互動(dòng)白板。不過(guò)首先扭粱，我們假定你已經(jīng)了解 JavaScript 的基礎(chǔ)語(yǔ)法舵鳞，并掌握了 HTML 頁(yè)面的基礎(chǔ)知識(shí)。
創(chuàng)建項(xiàng)目
首先琢蛤，你需要在你桌面端創(chuàng)建一個(gè)文件夾蜓堕，作為工作空間抛虏。隨后，我們將在這個(gè)工作空間中添加一些文件俩滥。然后嘉蕾，我們創(chuàng)建一個(gè)名為 index.html 的文件。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" >
<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>
引入資源
該頁(yè)面引用了 3 個(gè) 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：這是實(shí)現(xiàn)我們業(yè)務(wù)邏輯的 js 文件挂据。
創(chuàng)建白板
現(xiàn)在以清，我們?cè)诠ぷ骺臻g創(chuàng)建 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, // 房間人數(shù)限制
}),
};
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'));
});
使用體驗(yàn)
這時(shí)崎逃，你的工作空間里應(yīng)該已經(jīng)創(chuàng)建了 2 個(gè)文件掷倔。
index.html
index.js
雙擊 index.html 或在瀏覽器（推薦使用 Chrome）地址欄中輸入 index.html 的絕對(duì)路徑，打開(kāi)這個(gè)網(wǎng)頁(yè)个绍。
[圖片上傳失敗...(image-8b2947-1542513920409)]
之后勒葱，可以在網(wǎng)頁(yè)上寫(xiě)寫(xiě)畫(huà)畫(huà)，此時(shí)應(yīng)該能看到涂寫(xiě)的筆跡巴柿。至此凛虽，我們的第一個(gè)白板應(yīng)用就做好了。
[圖片上傳失敗...(image-e29d8e-1542513920409)]
相關(guān)代碼
你可以在 Github 上下載這章的所有代碼广恢。
