如何接入一個全平臺實時互動白板
white 是一款全平臺支持的實時互動白板，可以用於在線教育、會議、遠程協作、設計審查、PPT 演示等場景。
white 官方網站
我們在官網上做了詳細的產品介紹，讓用戶可以更深入的瞭解 white 在教育、協作、會議等場景下的創新和優勢。
white web app
針對個人用戶和小團隊用戶：
我們提供了開箱即用的 White App。White App 覆蓋了 iOS、Android、 Web、 小程序、Windows、Mac OS，等主流平臺應用，用戶只需要註冊 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 上下載這章的所有代碼。