## 簡介
本場景介紹使用影片雲技術搭建超級小班課網課系統。

## 背景知識

音影片通訊：

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

超級小班課：

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

超級小班課解決方案適用於K12和少兒語培等教育場景。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201130142425615.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)

## 獲取音影片通訊應用AppKey
1.使用您自己的阿里雲賬號登入到音影片通訊RTC控制檯。
2.在左側單擊應用管理。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201130142611988.png)
3.在應用管理頁面就可以看到您的預設應用的AppID。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201130142623295.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
4.在預設應用的右側操作列單擊查詢AppKey。

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201130142635458.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)
5.  在查詢Appkey提示彈框中單擊確定。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201130142643644.png)
6.  在查詢成功的彈框中就可以看到AppKey。

## 連線ECS伺服器
1.開啟系統自帶的終端工具。

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

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

```
ssh root@123.123.123.123
```
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/2020112415413518.png#pic_center)
命令顯示結果如下：
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201124154144147.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70#pic_center)
3.    輸入yes。
4.    同意繼續後將會提示輸入登入密碼。 密碼為已建立的雲服務的ECS的登入密碼。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201124154206304.png#pic_center)
登入成功後會顯示如下資訊。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201124154213935.png#pic_center)

## 安裝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
```
如果安裝成功將會有類似如下顯示。

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201130143431638.png)

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

```
cd superclass_web/ && vim src/core/data/config.js
```
2.按下i鍵進入編輯模式，將appId和appKey修改為步驟二中查詢到的AppId和AppKey。
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201130143506305.png)
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請參見步驟三。

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201130143739838.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhbmd5aWtlamk=,size_16,color_FFFFFF,t_70)

## 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 => {})

```
2.  獲取裝置資訊。

```
RtcEngine.instance.getDevices().then(re => {})
```
3.  指定攝像頭。

```
RtcEngine.instance.currentCamera(deviceId)
```
4.  指定麥克風。

```
RtcEngine.instance.currentAudioCapture(deviceId)
```
5.  開啟預覽。

```
/**
 * 預覽
 * @parame {HtmlVideoElement} video 播放預覽畫面的video標籤
 */
RtcEngine.instance.startPreview(video).then(re=>{})
```
6.  停止預覽。

```
RtcEngine.instance.stopPreview(video).then(re=>{})
```
7.  設定是否自動推流自動訂閱，需要在加入頻道之前設定，此介面是針對頻道設定的。

```
/**
   * 設定是否自動推流和自動訂閱 預設自動推流自動訂閱
   * @param {*} channel 頻道
   * @param { boolean } autoPub true表示自動推流
   * @param { boolean } autoSub true表示自動訂閱
   */
RtcEngine.instance.setAutoPublishSubscribe(channel, autoPub, autoSub)
```
8.  註冊回撥，需要在加入頻道之前設定，此介面是針對頻道設定的。

```
/**
   * 註冊回撥
   * @param {*} channel 頻道
   * @param {*} callback 
   */
RtcEngine.instance.registerCallBack(channel, callback)
```
9.  加入頻道。

```
/**
   * 加入房間
   * @param {*} channel 頻道
   * @param {*} userName 
   */
RtcEngine.instance.login(channel, userName).then(re=>{})
```
10.  開始推流。

```
/**
   * 開始推流
   * @param {*} channel 頻道
   */
RtcEngine.instance.startPublish(channel).then(re=>{})
```
11.  停止推流。

```
/**
   * 停止推流
   * @param {*} channel 頻道
   */
RtcEngine.instance.stopPublish(channel).then(re=>{})
```
12.  設定是否停止釋出本地音訊。

```
 /**
   * 設定是否停止釋出本地音訊
   * @param {*} channel  頻道
   * @param {*} enable 
   */
RtcEngine.instance.muteLocalMic(channel, enable)
```
13.  設定是否停止釋出本地影片。

```
 /**
   * 設定是否停止釋出本地影片
   * @param {*} channel  頻道
   * @param {*} enable 
   */
RtcEngine.instance.muteLocalCamera(channel, enable)
```
14.  切換開啟和停止螢幕流。

```
/**
   * 切換開啟和停止螢幕流
   * @param {*} channel  頻道
   * @param {*} enable 
   */
RtcEngine.instance.switchPublishScreen(channel, enable)
```
15.  訂閱音影片。

```
/**
   * 設定遠端渲染 預設訂閱音訊 + 影片（小流）
   * @param {*} channel  頻道
   * @param {*} userId 
   */
RtcEngine.instance.subscribe(channel, userId).then(re=>{})
```
16.  取消訂閱。

```
/**
   * 取消訂閱
   * @param {*} channel  頻道
   * @param {*} userId 
   */
RtcEngine.instance.unSubScribe(channel, userId).then(re=>{})
```
17.  設定遠端渲染。

```
/**
   * 設定遠端渲染
   * @param {*} channel  頻道
   * @param {*} userId 
   * @param {*} video 
   * @param {*} streamType 
   */
RtcEngine.instance.setDisplayRemoteVideo(channel, userId, video, streamType)
```
18.  獲取頻道使用者列表。

```
  /**
   * 獲取判斷使用者列表 頻道
   * @param {*} channel 
   * @return { array | boolean }
   */
RtcEngine.instance.getUserList(channel)
```
19.  獲取使用者資訊。

```
  /**
   * 獲取判斷使用者列表
   * @param {*} channel 頻道
   * @return { array | boolean }
   */
RtcEngine.instance.getUserInfo(channel, userId)
```
20.  離開頻道。

```
 /**
   * 離開頻道
   */
RtcEngine.instance.logout().then(re=>{})
```

搭建超級小班課網課系統

相關文章