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

Kahn 發布于2019-08-02 16:12 / 2136人閱讀

摘要：本系列的第一篇文章，筆者分享了在瀏覽器端，結合聲網的實時音視頻互動能力與的在線白板能力，來實現一個簡單但實用的在線教室。一引入音視頻音視頻方案選擇聲網作為本次的技術方案，先從下載聲網最新的備用。

作者：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 files

2.其中?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 標簽中加入

Agora Web Sample

2.加入一個特定的白板需要 uuid 和 token 兩個參數，我們在標簽中放置兩個 input 用于輸入這兩個參數，加入一個按鈕用于加入房間，在原有的 button 下面加入如下代碼：



Room UUID: 
Room Token:

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 中加入一個

用來容納白板吧，白板成功加入后就會顯示在這個 400px 寬、300px 高的

中了。

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 框，方便查看和記錄。

2.加入后

3、體驗互動課堂

1.我們打開瀏覽器的另一個窗口，將上一窗口中的 room uuid 和 room token 復制并覆蓋新窗口中的值，點擊新窗口中的【Join Whiteborad】按鈕，則兩個窗口加入到同一塊白板中，任何一個窗口的涂寫都瞬間在另一個窗口中顯現。

2.我們看看最終的效果吧，相信在調整了樣式之后，基于 Agora 和 Netless 強大的云端能力，這樣的在線教室已經具有產品就緒的能力。

最后，我們已經將該 Demo 的完整代碼上傳至 Github，歡迎大家 fork 和修改，實現出你獨特業務場景的產品：

https://github.com/netless-io/Edu-Classroom-Demo

GPU云服務器云服務器多人實時音視頻開發如何用vue開發實時音視頻全面評估音視頻實時通信的開發測試環境中國教育電視臺一套直播在線觀看家庭教育的責任與未來

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54876.html

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

摘要：本系列的第一篇文章，筆者分享了在瀏覽器端，結合聲網的實時音視頻互動能力與的在線白板能力，來實現一個簡單但實用的在線教室。一引入音視頻音視頻方案選擇聲網作為本次的技術方案，先從下載聲網最新的備用。作者：maverick、buhe，本文首發于 RTC 開發者社區隨著技術和基礎設施的進一步演進，線下的教育、會議已有很大比重演進為線上的教育和會議，突破了空間的桎梏。需求的多樣性爆發增長和...

ygyooo 2019-08-23 16:57 評論0 收藏0
后疫情時代，UCloud為小站教育打造實時互動“云端”課堂

摘要：目前，小站教育已開設美高擇校備考留學規劃等全面提升預備役留學生綜合實力的課程。后疫情時代，小站教育加快打造更優質的在線語培教學服務，與攜手優化現有教學模式。夢想不是簡單的夢和想，而是無論順境逆境，光明黑暗都矢志不渝的激情與渴望。這是小站教育創始人兼CEO王浩平寫在公司官網上的話。經歷過為留學考6次托福和3次GMAT的回憶，王浩平希望用小站教育幫助更多學子避開自己曾走過的彎路，打開更為廣闊的世...

Tecode 2022-06-28 19:00 評論0 收藏0
UCloud WebRTC 來了！支持萬人直播的一站式實時音視頻解決方案

摘要：宋體同時支持多平臺的接入，能滿足不同客戶端的接入需求。宋體宋體支持萬人直播推送宋體宋體利用實時集群直播集群，實現音視頻連麥互動可以同時推送萬人直播，具體原理如下。有人說：2G 看文字，3G 看圖片，4G 看視頻，那么對于已經開啟序幕的 5G 時代呢？隨著短視頻、在線課堂、互動直播等音視頻應用的崛起，如何適配差異化的網絡環境，為用戶提供更流暢高清的實時音視頻服務成為關注重點。而當前的音視頻技術...

AlphaGooo 2019-12-27 12:20 評論0 收藏0
更懂在線互動課堂，UCloud優刻得推出URTC實時音視頻

摘要：微軟雅黑宋體除在線教育外，也可滿足語音和視頻社交遠程醫療視頻會議娛樂直播等多種業務場景需要，后續將持續推出多行業的實時音視頻解決方案。微軟雅黑宋體目前已上線公測，且每月萬分鐘內免費，登錄優刻得官網即可了解更多產品功能及價格信息。近日，中立云服務平臺UCloud優刻得正式推出URTC（UCloud Real-Time Communication）實時音視頻產品，依托于UCloud優刻得強大的云...

imtianx 2019-12-27 11:44 評論0 收藏0