搭建超級小班課網課系統

bainana發表於2020-11-30

簡介

本場景介紹使用視訊雲技術搭建超級小班課網課系統。

阿里雲體驗實驗室地址（阿里雲ECS體驗場景體驗）
https://developer.aliyun.com/adc/scenario/3a43ff7ff0cd4f14a010b859e7674c0f

背景知識

音視訊通訊：

音視訊通訊 RTC（Real-Time Communication）是阿里雲覆蓋全球的實時音視訊開發平臺，提供高可用、高品質、超低延時的實時網路服務，適用於線上教育、互動娛樂、視訊會議、保險定損、排程指揮等場景。使用阿里雲RTC SDK，您可以在移動、Web、PC等多端快速搭建互通互聯的實時音視訊應用。

超級小班課：

超級小班課是將千名學生以小組形式分成若干小班（推薦4-6名為一組），同時由一名主講名師和多名助教進行輔導。所有學生均可以實時觀看主講名師授課畫面，並可以與名師進行連麥互動。多名助教實時關注小班內學生動態，維護小班課堂秩序，並可連麥小班內學生進行助教輔導。該場景不僅可以讓優秀的名師輔導更多的學生，更可以保證學生之間的互動性，讓學生的學習效果大大增加。

超級小班課解決方案適用於K12和少兒語培等教育場景。
在這裡插入圖片描述

獲取音視訊通訊應用AppKey

1.使用您自己的阿里雲賬號登入到音視訊通訊RTC控制檯。
2.在左側單擊應用管理。
在這裡插入圖片描述
3.在應用管理頁面就可以看到您的預設應用的AppID。
在這裡插入圖片描述
4.在預設應用的右側操作列單擊查詢AppKey。

在這裡插入圖片描述
5. 在查詢Appkey提示彈框中單擊確定。
在這裡插入圖片描述
6. 在查詢成功的彈框中就可以看到AppKey。

連線ECS伺服器

1.開啟系統自帶的終端工具。

  • Windows：CMD或Powershell。
  • MAC：Terminal。

2.在終端中輸入連線命令ssh [username]@[ipaddress]。您需要將其中的username和ipaddress替換為第1小節中建立的ECS伺服器的登入名和公網地址。例如：

ssh root@123.123.123.123

在這裡插入圖片描述
命令顯示結果如下：
在這裡插入圖片描述
3. 輸入yes。
4. 同意繼續後將會提示輸入登入密碼。 密碼為已建立的雲服務的ECS的登入密碼。
在這裡插入圖片描述
登入成功後會顯示如下資訊。
在這裡插入圖片描述

安裝Node.js環境

1.執行以下命令下載Node.js二進位制包。

wget https://nodejs.org/dist/v14.15.0/node-v14.15.0-linux-x64.tar.xz

2.執行以下命令將Node.js二進位制包解壓到路徑/usr/local。

tar xf node-v14.15.0-linux-x64.tar.xz -C /usr/local/ --no-same-owner

3.執行以下命令將Node.js二進位制檔案所在路徑加入到環境變數PATH中。

echo "export PATH=/usr/local/node-v14.15.0-linux-x64/bin:$PATH" >> /etc/profile

4.執行以下命令使修改的環境變數立即生效。

source /etc/profile

5.執行以下命令驗證是否安裝配置成功。

node -v

如果安裝成功將會有類似如下顯示。

在這裡插入圖片描述

修改配置

本場景中的ECS伺服器/root路徑中內建了超級小班課的專案原始碼和執行環境，在專案原始碼中填入自己的AppKey即可執行專案。
1.執行以下命令使用Vim開啟config.js檔案。

cd superclass_web/ && vim src/core/data/config.js

2.按下i鍵進入編輯模式，將appId和appKey修改為步驟二中查詢到的AppId和AppKey。
在這裡插入圖片描述
3.修改完成後按下Esc鍵退出編輯模式，然後輸入以下指令並按下Enter鍵退出Vim編輯器。

:wq

執行Demo

1.執行以下命令安裝專案依賴。

npm install

2.執行以下命令安裝RTC SDK。

npm install aliyun-webrtc-sdk -S

3.執行以下命令執行專案。

npm run serve

執行成功之後，預設會在瀏覽器開啟專案主頁。如果沒有自動開啟，請在瀏覽器位址列輸入https://[ipaddress]:888，ipaddress請參見步驟三。

在這裡插入圖片描述

Demo原始碼解析

專案結構如下所示：

├── dist                               #打包檔案
├── public                             #靜態資源
├── src                                #專案檔案目錄
│   ├── assets                         #靜態資源    
│   ├── components                     #公共元件
│   ├── core                           #js檔案
│   │   ├── data
│   │   │   ├── config.js              #相關配置引數
│   │   ├── util
│   │   │   ├── utils.js               #一些公共方法
│   │   ├── rtc-engine.js              #單例
│   │   ├── rtc-clinet.js              #RTC例項檔案
│   ├── plugins
│   ├── router                         #路由
│   ├── views                          #頁面
│   │   ├── login                      
│   │   │   ├── login.vue              #登入頁面
│   │   ├── student                   
│   │   │   ├── student.vue            #學生頁面
│   │   ├── assistant                  
│   │   │   ├── assistant.vue          #助教頁面
│   │   ├── teacher                  
│   │   │   ├── teacher.vue            #教師頁面
│   ├── vuex
│   ├── App.vue                        #根元件
│   ├── main.js                        #入口檔案
├── vue.config.js                      #vue配置檔案

下面列出了一些關鍵性功能程式碼。

  1. 檢查瀏覽器是否支援。
RtcEngine.instance.getDevices().then(re => {})
  1. 獲取裝置資訊。
RtcEngine.instance.getDevices().then(re => {})
  1. 指定攝像頭。
RtcEngine.instance.currentCamera(deviceId)
  1. 指定麥克風。
RtcEngine.instance.currentAudioCapture(deviceId)
  1. 開啟預覽。
/**
 * 預覽
 * @parame {HtmlVideoElement} video 播放預覽畫面的video標籤
 */
RtcEngine.instance.startPreview(video).then(re=>{})
  1. 停止預覽。
RtcEngine.instance.stopPreview(video).then(re=>{})
  1. 設定是否自動推流自動訂閱，需要在加入頻道之前設定，此介面是針對頻道設定的。
/**
   * 設定是否自動推流和自動訂閱 預設自動推流自動訂閱
   * @param {*} channel 頻道
   * @param { boolean } autoPub true表示自動推流
   * @param { boolean } autoSub true表示自動訂閱
   */
RtcEngine.instance.setAutoPublishSubscribe(channel, autoPub, autoSub)
  1. 註冊回撥，需要在加入頻道之前設定，此介面是針對頻道設定的。
/**
   * 註冊回撥
   * @param {*} channel 頻道
   * @param {*} callback 
   */
RtcEngine.instance.registerCallBack(channel, callback)
  1. 加入頻道。
/**
   * 加入房間
   * @param {*} channel 頻道
   * @param {*} userName 
   */
RtcEngine.instance.login(channel, userName).then(re=>{})
  1. 開始推流。
/**
   * 開始推流
   * @param {*} channel 頻道
   */
RtcEngine.instance.startPublish(channel).then(re=>{})
  1. 停止推流。
/**
   * 停止推流
   * @param {*} channel 頻道
   */
RtcEngine.instance.stopPublish(channel).then(re=>{})
  1. 設定是否停止釋出本地音訊。
 /**
   * 設定是否停止釋出本地音訊
   * @param {*} channel  頻道
   * @param {*} enable 
   */
RtcEngine.instance.muteLocalMic(channel, enable)
  1. 設定是否停止釋出本地視訊。
 /**
   * 設定是否停止釋出本地視訊
   * @param {*} channel  頻道
   * @param {*} enable 
   */
RtcEngine.instance.muteLocalCamera(channel, enable)
  1. 切換開啟和停止螢幕流。
/**
   * 切換開啟和停止螢幕流
   * @param {*} channel  頻道
   * @param {*} enable 
   */
RtcEngine.instance.switchPublishScreen(channel, enable)
  1. 訂閱音視訊。
/**
   * 設定遠端渲染 預設訂閱音訊 + 視訊（小流）
   * @param {*} channel  頻道
   * @param {*} userId 
   */
RtcEngine.instance.subscribe(channel, userId).then(re=>{})
  1. 取消訂閱。
/**
   * 取消訂閱
   * @param {*} channel  頻道
   * @param {*} userId 
   */
RtcEngine.instance.unSubScribe(channel, userId).then(re=>{})
  1. 設定遠端渲染。
/**
   * 設定遠端渲染
   * @param {*} channel  頻道
   * @param {*} userId 
   * @param {*} video 
   * @param {*} streamType 
   */
RtcEngine.instance.setDisplayRemoteVideo(channel, userId, video, streamType)
  1. 獲取頻道使用者列表。
  /**
   * 獲取判斷使用者列表 頻道
   * @param {*} channel 
   * @return { array | boolean }
   */
RtcEngine.instance.getUserList(channel)
  1. 獲取使用者資訊。
  /**
   * 獲取判斷使用者列表
   * @param {*} channel 頻道
   * @return { array | boolean }
   */
RtcEngine.instance.getUserInfo(channel, userId)
  1. 離開頻道。
 /**
   * 離開頻道
   */
RtcEngine.instance.logout().then(re=>{})

相關文章