亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

在線教育開發(fā)實(shí)踐（一）：實(shí)時(shí)視頻與白板教學(xué)

ygyooo / 3476人閱讀

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

作者：maverick、buhe，本文首發(fā)于 RTC 開發(fā)者社區(qū)

隨著技術(shù)和基礎(chǔ)設(shè)施的進(jìn)一步演進(jìn)，線下的教育、會議已有很大比重演進(jìn)為線上的教育和會議，突破了空間的桎梏。需求的多樣性爆發(fā)增長和場景的進(jìn)一步拓寬也對技術(shù)產(chǎn)生了非常大的挑戰(zhàn)，有別于傳統(tǒng)視頻會議的方案，現(xiàn)有方案更多考慮兼容性、平臺多樣性、移動化等，在產(chǎn)品的鏈路上也變的愈加豐富，從實(shí)時(shí)到錄制、在到后期的信息檢索和分析。在絕大部分在線教育、視頻會議場景中，實(shí)時(shí)音視頻互動與白板都是必備功能，然而實(shí)時(shí)音視頻互動與白板都是需要很長時(shí)間和較高研發(fā)門檻才能實(shí)現(xiàn)的，尤其是實(shí)時(shí)場景下的內(nèi)容記錄和后續(xù)的回放更是頗有挑戰(zhàn)。

本系列的第一篇文章，筆者分享了在 Web 瀏覽器端，結(jié)合聲網(wǎng)Agora SDK 的實(shí)時(shí)音視頻互動能力與 White SDK 的在線白板能力，來實(shí)現(xiàn)一個(gè)簡單但實(shí)用的在線教室。

現(xiàn)在市場上的在線教室

市面上所有的知名在線教育公司的教室都是由 RTC、白板、實(shí)時(shí)消息三部分組成。

實(shí)時(shí)音視頻：遠(yuǎn)程上課、師生互動的基石。

白板：老師上課、講解要點(diǎn)的重要載體。

實(shí)時(shí)消息：師生信息交流的平臺。

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

快速實(shí)現(xiàn)一個(gè)實(shí)用的在線教室

整個(gè)開發(fā)流程分為兩個(gè)部分。首先是引入音視頻 SDK 并實(shí)現(xiàn) Web 瀏覽器端 Demo。然后，我們在此基礎(chǔ)上引入白板 SDK，實(shí)現(xiàn)在線教室中的白板功能。

一、引入音視頻 SDK

音視頻方案選擇聲網(wǎng)作為本次的技術(shù)方案，先從?https://www.agora.io/cn/downl... 下載聲網(wǎng)最新的 SDK 備用。


1.我們選擇【視頻通話/視頻直播 SDK】的 Web 版本進(jìn)行下載，本教程寫作時(shí)最新版本是 v2.6.0 版本。下載下來進(jìn)行解壓，其中有這樣一些文件：

├── 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 主體文件，附帶還有一個(gè)簡單的 Demo 工程，我們可以用 Chrome 瀏覽器打開 index.html 文件，瀏覽器顯示如下頁面

3.需要一個(gè)聲網(wǎng)的 AppId 才可以進(jìn)行下一步試驗(yàn)，去?https://dashboard.agora.io/cn... 注冊一個(gè)項(xiàng)目然后創(chuàng)建一個(gè)測試項(xiàng)目，就可以獲取到這個(gè) AppId 了。

4.去官網(wǎng)注冊好之后，我們回到這個(gè)頁面，復(fù)制 AppId 到這個(gè)輸入框內(nèi)，首先點(diǎn)擊 Join 按鈕，加入該 AppId 指定的測試項(xiàng)目的某個(gè) channel ，channel 默認(rèn)是 1000 ，這里我們使用默認(rèn)值。

5.點(diǎn)擊后會提示是否可以使用麥克風(fēng)和攝像頭權(quán)限，這是為了保護(hù)用戶的隱私，這里我們點(diǎn)擊【允許】。我們發(fā)現(xiàn)本地?cái)z像頭的內(nèi)容顯示在了屏幕的右側(cè)。

另外再打開一個(gè)瀏覽器窗口，重復(fù) 4 ～ 5 步驟，比較有趣的事情就發(fā)生了，我們在兩個(gè)瀏覽器窗口上分別看到了兩個(gè)視頻畫面，其實(shí)一個(gè)是本地畫面，一個(gè)遠(yuǎn)端的畫面。我們可以想象成一對一教學(xué)的場景，老師和學(xué)生可以互相看到對方的臉聽到對方的聲音。

二、引入白板 SDK

白板方案選擇 White SDK 作為本次的技術(shù)方案，文檔中心：https://developer.herewhite.com/#/

1.我們用 CDN 引入的方式引入白板 SDK 的 JavaScript 文件和 css 文件。在當(dāng)前的 index.html 文件的 head 標(biāo)簽中加入

Agora Web Sample

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



Room UUID: 
Room Token:

3.在原有 javascript 代碼中加入 join_room 函數(shù)，邏輯也是比較簡單的：

創(chuàng)建?WhiteWebSdk 對象

調(diào)用?joinRoom 方法加入某個(gè)特定的白板，這個(gè)白板由前面兩個(gè) input 框中的參數(shù)確定，uuid 為全局確定一個(gè)白板，token 則是加入這個(gè)白板的必備驗(yàn)證信息，當(dāng)調(diào)用成功結(jié)束后得到 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 中加入一個(gè)

用來容納白板吧，白板成功加入后就會顯示在這個(gè) 400px 寬、300px 高的
中了。

5.步驟 3 中的 uuid 和 room token 是從哪里來的呢？首先請前往 https://console.herewhite.com 注冊一個(gè)開發(fā)者賬戶，你就獲取到一個(gè) sdk token ，通過 sdk token 就可以調(diào)用 REST API 創(chuàng)建一個(gè)房間了。我們在 javascript 文件的開頭加上如下代碼。

通過?REST API??https://cloudcapiv4.herewhite.com/room?創(chuàng)建一個(gè)房間，返回值就是熟悉的 uuid 和 room token 了

我們把他們賦給前面的兩個(gè) input 框，方便查看和記錄。




2.加入后



3、體驗(yàn)互動課堂

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


2.我們看看最終的效果吧，相信在調(diào)整了樣式之后，基于 Agora 和 Netless 強(qiáng)大的云端能力，這樣的在線教室已經(jīng)具有產(chǎn)品就緒的能力。




最后，我們已經(jīng)將該 Demo 的完整代碼上傳至 Github，歡迎大家 fork 和修改，實(shí)現(xiàn)出你獨(dú)特業(yè)務(wù)場景的產(chǎn)品：


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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/103556.html

相關(guān)文章

  • 在線教育開發(fā)實(shí)踐（一）：實(shí)時(shí)視頻與白板教學(xué)

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

    Kahn 評論0 收藏0

  • 后疫情時(shí)代，UCloud為小站教育打造實(shí)時(shí)互動“云端”課堂

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

    Tecode 評論0 收藏0

  • UCloud WebRTC 來了！支持萬人直播的一站式實(shí)時(shí)音視頻解決方案

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

    AlphaGooo 評論0 收藏0

  • 更懂在線互動課堂，UCloud優(yōu)刻得推出URTC實(shí)時(shí)音視頻

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

    imtianx 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<