搭建超级小班课网课系统
1. 获取音视频通信应用AppKey
1. 使用您自己的阿里云账号登录到音视频通信RTC控制台。
2. 在左侧单击应用管理。
3. 在应用管理页面就可以看到您的默认应用的AppID。
4. 在默认应用的右侧操作列单击查询AppKey。
5. 在查询Appkey提示弹框中单击确定。
6. 在查询成功的弹框中就可以看到AppKey。
说明: 请将查询到的AppId和AppKey复制保存下来，下面的步骤将会用到。
2. 创建资源
必读: 本场景为您提供了一台ECS服务器，场景中涉及的音视频通信服务请使用自己的阿里云账号操作，音视频通信服务默认的计费方式为按量付费，具体请参见计费详情。
- 在页面左侧，单击 云产品资源 下拉列表，查看本次实验所需资源。
- 单击屏幕右侧 创建资源 ，免费创建当前实验所需云产品资源。
说明：
资源创建过程需要1~3分钟。完成实验资源的创建后，您可以在 云产品资源 列表查看已创建的资源信息，例如：IP地址、子用户名称和子用户密码等。
3. 连接ECS服务器
成功创建资源后默认会打开Web Terminal操作服务器终端操作界面，您也可以点击右侧
按钮，切换到Web Terminal操作界面。
4. 安装Node.js环境
安装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
如果安装成功将会有类似如下显示。
5. 修改配置
修改配置
本场景中的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
6. 运行Demo
运行Demo
1. 执行以下命令安装项目依赖。
npm install
2. 执行以下命令安装RTC SDK。
npm install aliyun-webrtc-sdk -S
3. 执行以下命令运行项目。
npm run serve
运行成功之后，默认会在浏览器打开项目主页。如果没有自动打开，请在浏览器地址栏输入https://[ipaddress]:888，ipaddress请参见步骤三。
7. Demo源码解析
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=>{})
实验地址：https://developer.aliyun.com/adc/scenario/3a43ff7ff0cd4f14a010b859e7674c0f
