简介

本场景介绍应用视频云技术搭建超级小班课网课零碎。

阿里云体验实验室地址（阿里云ECS体验场景体验）
https://developer.aliyun.com/...

背景常识

音视频通信：

音视频通信 RTC（Real-Time Communication）是阿里云笼罩寰球的实时音视频开发平台，提供高可用、高品质、超低延时的实时网络服务，实用于在线教育、互动娱乐、视频会议、保险定损、调度指挥等场景。应用阿里云RTC SDK，您能够在挪动、Web、PC等多端疾速搭建互通互联的实时音视频利用。

超级小班课：

超级小班课是将千名学生以小组模式分成若干小班（举荐4-6名为一组），同时由一名主讲名师和多名助教进行辅导。所有学生均能够实时观看主讲名师授课画面，并能够与名师进行连麦互动。多名助教实时关注小班内学生动静，保护小班课堂秩序，并可连麦小班内学生进行助教辅导。该场景不仅能够让优良的名师辅导更多的学生，更能够保障学生之间的互动性，让学生的学习效果大大增加。

超级小班课解决方案实用于K12和少儿语培等教育场景。

获取音视频通信利用AppKey

1.应用您本人的阿里云账号登录到音视频通信RTC控制台。
2.在左侧单击利用治理。

3.在利用治理页面就能够看到您的默认利用的AppID。

4.在默认利用的右侧操作列单击查问AppKey。

  1. 在查问Appkey提醒弹框中单击确定。

  1. 在查问胜利的弹框中就能够看到AppKey。

连贯ECS服务器

1.关上零碎自带的终端工具。

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

2.在终端中输出连贯命令ssh [username]@[ipaddress]。您须要将其中的username和ipaddress替换为第1大节中创立的ECS服务器的登录名和公网地址。例如：

ssh root@123.123.123.123


命令显示后果如下：

  1. 输出yes。
  2. 批准持续后将会提醒输出登录明码。 明码为已创立的云服务的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配置文件

上面列出了一些要害性功能代码。

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