搭建超級小班課網課系統

時間 2020-11-30

標籤 vue node linux web vuex shell npm vim 瀏覽器服務器欄目 Linux 简体版

原文原文鏈接

簡介

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

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

背景知識

音視頻通訊：linux

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

超級小班課：vuex

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

超級小班課解決方案適用於K12和少兒語培等教育場景。
npm

獲取音視頻通訊應用AppKey

1.使用您本身的阿里雲帳號登陸到音視頻通訊RTC控制檯。
2.在左側單擊應用管理。

3.在應用管理頁面就能夠看到您的默認應用的AppID。

4.在默認應用的右側操做列單擊查詢AppKey。vim

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鍵退出編輯模式，而後輸入如下指令並按下回車鍵退出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配置文件

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

檢查瀏覽器是否支持。

RtcEngine.instance.getDevices().then(re => {})

獲取設備信息。

RtcEngine.instance.getDevices().then(re => {})

指定攝像頭。

RtcEngine.instance.currentCamera(deviceId)

指定麥克風。

RtcEngine.instance.currentAudioCapture(deviceId)

開啓預覽。

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

中止預覽。

RtcEngine.instance.stopPreview(video).then(re=>{})

設置是否自動推流自動訂閱，須要在加入頻道以前設置，此接口是針對頻道設置的。

/**
   * 設置是否自動推流和自動訂閱 默認自動推流自動訂閱
   * @param {*} channel 頻道
   * @param { boolean } autoPub true表示自動推流
   * @param { boolean } autoSub true表示自動訂閱
   */
RtcEngine.instance.setAutoPublishSubscribe(channel, autoPub, autoSub)

註冊回調，須要在加入頻道以前設置，此接口是針對頻道設置的。

/**
   * 註冊回調
   * @param {*} channel 頻道
   * @param {*} callback 
   */
RtcEngine.instance.registerCallBack(channel, callback)

加入頻道。

/**
   * 加入房間
   * @param {*} channel 頻道
   * @param {*} userName 
   */
RtcEngine.instance.login(channel, userName).then(re=>{})

開始推流。

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

中止推流。

/**
   * 中止推流
   * @param {*} channel 頻道
   */
RtcEngine.instance.stopPublish(channel).then(re=>{})

設置是否中止發佈本地音頻。

/**
   * 設置是否中止發佈本地音頻
   * @param {*} channel  頻道
   * @param {*} enable 
   */
RtcEngine.instance.muteLocalMic(channel, enable)

設置是否中止發佈本地視頻。

/**
   * 設置是否中止發佈本地視頻
   * @param {*} channel  頻道
   * @param {*} enable 
   */
RtcEngine.instance.muteLocalCamera(channel, enable)

切換開啓和中止屏幕流。

/**
   * 切換開啓和中止屏幕流
   * @param {*} channel  頻道
   * @param {*} enable 
   */
RtcEngine.instance.switchPublishScreen(channel, enable)

訂閱音視頻。

/**
   * 設置遠端渲染 默認訂閱音頻 + 視頻（小流）
   * @param {*} channel  頻道
   * @param {*} userId 
   */
RtcEngine.instance.subscribe(channel, userId).then(re=>{})

取消訂閱。

/**
   * 取消訂閱
   * @param {*} channel  頻道
   * @param {*} userId 
   */
RtcEngine.instance.unSubScribe(channel, userId).then(re=>{})

設置遠端渲染。

/**
   * 設置遠端渲染
   * @param {*} channel  頻道
   * @param {*} userId 
   * @param {*} video 
   * @param {*} streamType 
   */
RtcEngine.instance.setDisplayRemoteVideo(channel, userId, video, streamType)

獲取頻道用戶列表。

/**
   * 獲取判斷用戶列表 頻道
   * @param {*} channel 
   * @return { array | boolean }
   */
RtcEngine.instance.getUserList(channel)

獲取用戶信息。

/**
   * 獲取判斷用戶列表
   * @param {*} channel 頻道
   * @return { array | boolean }
   */
RtcEngine.instance.getUserInfo(channel, userId)

離開頻道。

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。