作者：maverick、buhe，本文首發於 RTC 開發者社區
隨着技術和基礎設施的進一步演進，線下的教育、會議已有很大比重演進爲線上的教育和會議，突破了空間的桎梏。需求的多樣性爆發增長和場景的進一步拓寬也對技術產生了非常大的挑戰，有別於傳統視頻會議的方案，現有方案更多考慮兼容性、平臺多樣性、移動化等，在產品的鏈路上也變的愈加豐富，從實時到錄製、在到後期的信息檢索和分析。在絕大部分在線教育、視頻會議場景中，實時音視頻互動與白板都是必備功能，然而實時音視頻互動與白板都是需要很長時間和較高研發門檻才能實現的，尤其是實時場景下的內容記錄和後續的回放更是頗有挑戰。
本系列的第一篇文章，筆者分享了在 Web 瀏覽器端，結合聲網Agora SDK 的實時音視頻互動能力與 White SDK 的在線白板能力，來實現一個簡單但實用的在線教室。
現在市場上的在線教室
市面上所有的知名在線教育公司的教室都是由 RTC、白板、實時消息三部分組成。
- 實時音視頻：遠程上課、師生互動的基石。
- 白板：老師上課、講解要點的重要載體。
- 實時消息：師生信息交流的平臺。
從功能角度來看，就是 RTC + 白板 + 實時消息。從底層技術來看，就是實時信令+實時音視頻。
快速實現一個實用的在線教室
整個開發流程分爲兩個部分。首先是引入音視頻 SDK 並實現 Web 瀏覽器端 Demo。然後，我們在此基礎上引入白板 SDK，實現在線教室中的白板功能。
一、引入音視頻 SDK
音視頻方案選擇聲網作爲本次的技術方案，先從 https://www.agora.io/cn/downl... 下載聲網最新的 SDK 備用。
1.我們選擇【視頻通話/視頻直播 SDK】的 Web 版本進行下載，本教程寫作時最新版本是 v2.6.0 版本。下載下來進行解壓，其中有這樣一些文件：
├── AgoraRTCSDK-2.6.0.js
├── assets
│ ├── mute48.png
│ └── sound48.png
├── index.html
└── vendor
├── bootstrap.min.css
└── jquery.js
2 directories, 6 files2.其中 AgoraRTCSDK-2.6.0.js 是 SDK 主體文件，附帶還有一個簡單的 Demo 工程，我們可以用 Chrome 瀏覽器打開 index.html 文件，瀏覽器顯示如下頁面
3.需要一個聲網的 AppId 纔可以進行下一步試驗，去 https://dashboard.agora.io/cn... 註冊一個項目然後創建一個測試項目，就可以獲取到這個 AppId 了。
4.去官網註冊好之後，我們回到這個頁面，複製 AppId 到這個輸入框內，首先點擊 Join 按鈕，加入該 AppId 指定的測試項目的某個 channel ，channel 默認是 1000 ，這裏我們使用默認值。
5.點擊後會提示是否可以使用麥克風和攝像頭權限，這是爲了保護用戶的隱私，這裏我們點擊【允許】。我們發現本地攝像頭的內容顯示在了屏幕的右側。
另外再打開一個瀏覽器窗口，重複 4 ～ 5 步驟，比較有趣的事情就發生了，我們在兩個瀏覽器窗口上分別看到了兩個視頻畫面，其實一個是本地畫面，一個遠端的畫面。我們可以想象成一對一教學的場景，老師和學生可以互相看到對方的臉聽到對方的聲音。
二、引入白板 SDK
白板方案選擇 White SDK 作爲本次的技術方案，文檔中心：https://developer.herewhite.com/#/
1.我們用 CDN 引入的方式引入白板 SDK 的 JavaScript 文件和 css 文件。在當前的 index.html 文件的 head 標籤中加入
<title>Agora Web Sample</title>
<!-- 新加入代碼開始 -->
<link rel="stylesheet" href="https://sdk.herewhite.com/white-web-sdk/2.0.0-beta.3.css">
<script src="https://sdk.herewhite.com/white-web-sdk/2.0.0-beta.3.js"></script>
<!-- 新加入代碼結束 -->2.加入一個特定的白板需要 uuid 和 token 兩個參數，我們在 <body> 標籤中放置兩個 input 用於輸入這兩個參數，加入一個按鈕用於加入房間，在原有的 button 下面加入如下代碼：
<button id="unpublish" class="btn btn-primary" onclick="unpublish()">Unpublish</button>
<!-- 新加入代碼開始 -->
Room UUID: <input id="room_uuid" type="text" size="32"></input>
Room Token: <input id="room_token" type="text" size="32"></input>
<button id="join_room" class="btn btn-primary" onclick="join_room()">Join Whiteborad</button>
<!-- 新加入代碼結束 -->3.在原有 javascript 代碼中加入 join_room 函數，邏輯也是比較簡單的：
- 創建 WhiteWebSdk 對象
- 調用 joinRoom 方法加入某個特定的白板，這個白板由前面兩個 input 框中的參數確定，uuid 爲全局確定一個白板，token 則是加入這個白板的必備驗證信息，當調用成功結束後得到 room 對象，room 對象持有對白板操作的一系列 API ，這裏把他 room 綁定在 id 爲 whiteboard 的 div 上。
function join_room() {
document.getElementById("join_room").disabled = true;
var whiteWebSdk = new WhiteWebSdk();
whiteWebSdk.joinRoom({
uuid: room_uuid.value,
roomToken: room_token.value,
}).then(function(room) {
room.bindHtmlElement(document.getElementById('whiteboard'));
});
}- 我們在 body 中加入一個
<div>用來容納白板吧，白板成功加入後就會顯示在這個 400px 寬、300px 高的<div>中了。
<body>
<!-- 新加入代碼開始 -->
<div id="whiteboard" style="width: 400px; height: 300px;"></div>
<!-- 新加入代碼結束 -->5.步驟 3 中的 uuid 和 room token 是從哪裏來的呢？首先請前往 https://console.herewhite.com 註冊一個開發者賬戶，你就獲取到一個 sdk token ，通過 sdk token 就可以調用 REST API 創建一個房間了。我們在 javascript 文件的開頭加上如下代碼。
- 通過 REST API https://cloudcapiv4.herewhite.com/room 創建一個房間，返回值就是熟悉的 uuid 和 room token 了
- 我們把他們賦給前面的兩個 input 框，方便查看和記錄。
<script language="javascript">
// 新加入代碼開始
var sdkToken = 'WHITEcGFydG5lcl9pZD1DYzlFNTJhTVFhUU5TYmlHNWJjbkpmVThTNGlNVXlJVUNwdFAmc2lnPTE3Y2ZiYzg0ZGM5N2FkNDAxZmY1MTM0ODMxYTdhZTE2ZGQ3MTdmZjI6YWRtaW5JZD00JnJvbGU9bWluaSZleHBpcmVfdGltZT0xNTY2MDQwNjk4JmFrPUNjOUU1MmFNUWFRTlNiaUc1YmNuSmZVOFM0aU1VeUlVQ3B0UCZjcmVhdGVfdGltZT0xNTM0NDgzNzQ2Jm5vbmNlPTE1MzQ0ODM3NDYzMzYwMA';
var url = 'https://cloudcapiv4.herewhite.com/room?token=' + sdkToken;
var requestInit = {
method: 'POST',
headers: {
"content-type": "application/json",
},
body: JSON.stringify({
name: '我的第一個 White 房間',
limit: 100, // 房間人數限制
}),
};
fetch(url, requestInit)
.then(function (response) {
return response.json();
})
.then(function (json) {
room_uuid.value = json.msg.room.uuid;
room_token.value = json.msg.roomToken;
console.log("room uuid", json.msg.room.uuid, json.msg.roomToken);
})
// 新加入代碼結束6.重新用瀏覽器打開 index.html ，上半部分的空白則是白板的部分，我們點擊【Join Whiteborad】按鈕，成功加入白板後就可以使用鼠標在白板上進行塗寫了。
三、Demo 效果
1.加入前
2.加入後
3、體驗互動課堂
1.我們打開瀏覽器的另一個窗口，將上一窗口中的 room uuid 和 room token 複製並覆蓋新窗口中的值，點擊新窗口中的【Join Whiteborad】按鈕，則兩個窗口加入到同一塊白板中，任何一個窗口的塗寫都瞬間在另一個窗口中顯現。
2.我們看看最終的效果吧，相信在調整了樣式之後，基於 Agora 和 Netless 強大的雲端能力，這樣的在線教室已經具有產品就緒的能力。
最後，我們已經將該 Demo 的完整代碼上傳至 Github，歡迎大家 fork 和修改，實現出你獨特業務場景的產品：