在線教育開發實踐（一）：實時視頻與白板教學

時間 2019-12-10

標籤在線教育開發實踐實時視頻白板教學简体版

原文原文鏈接

做者：maverick、buhe，本文首發於 RTC 開發者社區

隨着技術和基礎設施的進一步演進，線下的教育、會議已有很大比重演進爲線上的教育和會議，突破了空間的桎梏。需求的多樣性爆發增加和場景的進一步拓寬也對技術產生了很是大的挑戰，有別於傳統視頻會議的方案，現有方案更多考慮兼容性、平臺多樣性、移動化等，在產品的鏈路上也變的越發豐富，從實時到錄製、在到後期的信息檢索和分析。在絕大部分在線教育、視頻會議場景中，實時音視頻互動與白板都是必備功能，然而實時音視頻互動與白板都是須要很長時間和較高研發門檻才能實現的，尤爲是實時場景下的內容記錄和後續的回放更是很有挑戰。javascript

本系列的第一篇文章，筆者分享了在 Web 瀏覽器端，結合聲網Agora SDK 的實時音視頻互動能力與 White SDK 的在線白板能力，來實現一個簡單但實用的在線教室。css

如今市場上的在線教室

市面上全部的知名在線教育公司的教室都是由 RTC、白板、實時消息三部分組成。html

實時音視頻：遠程上課、師生互動的基石。
白板：老師上課、講解要點的重要載體。
實時消息：師生信息交流的平臺。

從功能角度來看，就是 RTC + 白板 + 實時消息。從底層技術來看，就是實時信令+實時音視頻。java

快速實現一個實用的在線教室

整個開發流程分爲兩個部分。首先是引入音視頻 SDK 並實現 Web 瀏覽器端 Demo。而後，咱們在此基礎上引入白板 SDK，實如今線教室中的白板功能。jquery

1、引入音視頻 SDK

音視頻方案選擇聲網做爲本次的技術方案，先從 https://www.agora.io/cn/downl... 下載聲網最新的 SDK 備用。git

1.咱們選擇【視頻通話/視頻直播 SDK】的 Web 版本進行下載，本教程寫做時最新版本是 v2.6.0 版本。下載下來進行解壓，其中有這樣一些文件：github

├── AgoraRTCSDK-2.6.0.js

├── assets

│   ├── mute48.png

│   └── sound48.png

├── index.html

└── vendor

   ├── bootstrap.min.css

   └── jquery.js

2 directories, 6 files

2.其中 AgoraRTCSDK-2.6.0.js 是 SDK 主體文件，附帶還有一個簡單的 Demo 工程，咱們能夠用 Chrome 瀏覽器打開 index.html 文件，瀏覽器顯示以下頁面web

3.須要一個聲網的 AppId 才能夠進行下一步試驗，去 https://dashboard.agora.io/cn... 註冊一個項目而後建立一個測試項目，就能夠獲取到這個 AppId 了。json

4.去官網註冊好以後，咱們回到這個頁面，複製 AppId 到這個輸入框內，首先點擊 Join 按鈕，加入該 AppId 指定的測試項目的某個 channel ，channel 默認是 1000 ，這裏咱們使用默認值。bootstrap

5.點擊後會提示是否能夠使用麥克風和攝像頭權限，這是爲了保護用戶的隱私，這裏咱們點擊【容許】。咱們發現本地攝像頭的內容顯示在了屏幕的右側。

另外再打開一個瀏覽器窗口，重複 4 ～ 5 步驟，比較有趣的事情就發生了，咱們在兩個瀏覽器窗口上分別看到了兩個視頻畫面，其實一個是本地畫面，一個遠端的畫面。咱們能夠想象成一對一教學的場景，老師和學生能夠互相看到對方的臉聽到對方的聲音。

2、引入白板 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】按鈕，成功加入白板後就能夠使用鼠標在白板上進行塗寫了。