共计 4121 个字符,预计需要花费 11 分钟才能阅读完成。
简介
本场景介绍应用视频云技术搭建超级小班课网课零碎。
阿里云体验实验室地址(阿里云 ECS 体验场景体验)
https://developer.aliyun.com/…
背景常识
音视频通信:
音视频通信 RTC(Real-Time Communication)是阿里云笼罩寰球的实时音视频开发平台,提供高可用、高品质、超低延时的实时网络服务,实用于在线教育、互动娱乐、视频会议、保险定损、调度指挥等场景。应用阿里云 RTC SDK,您能够在挪动、Web、PC 等多端疾速搭建互通互联的实时音视频利用。
超级小班课:
超级小班课是将千名学生以小组模式分成若干小班(举荐 4 - 6 名为一组),同时由一名主讲名师和多名助教进行辅导。所有学生均能够实时观看主讲名师授课画面,并能够与名师进行连麦互动。多名助教实时关注小班内学生动静,保护小班课堂秩序,并可连麦小班内学生进行助教辅导。该场景不仅能够让优良的名师辅导更多的学生,更能够保障学生之间的互动性,让学生的学习效果大大增加。
超级小班课解决方案实用于 K12 和少儿语培等教育场景。
获取音视频通信利用 AppKey
1. 应用您本人的阿里云账号登录到音视频通信 RTC 控制台。
2. 在左侧单击利用治理。
3. 在利用治理页面就能够看到您的默认利用的 AppID。
4. 在默认利用的右侧操作列单击查问 AppKey。
- 在查问 Appkey 提醒弹框中单击确定。
- 在查问胜利的弹框中就能够看到 AppKey。
连贯 ECS 服务器
1. 关上零碎自带的终端工具。
- Windows:CMD 或 Powershell。
- MAC:Terminal。
2. 在终端中输出连贯命令 ssh [username]@[ipaddress]。您须要将其中的 username 和 ipaddress 替换为第 1 大节中创立的 ECS 服务器的登录名和公网地址。例如:
ssh root@123.123.123.123
命令显示后果如下:
- 输出 yes。
- 批准持续后将会提醒输出登录明码。明码为已创立的云服务的 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=>{})