搭建超级小班课网课系统

搭建超级小班课网课系统

简介

本场景介绍使用视频云技术搭建超级小班课网课系统。

阿里云体验实验室地址（阿里云ECS体验场景体验）RTC（Real-Time Communication）是阿里云覆盖全球的实时音视频开发平台，提供高可用、高品质、超低延时的实时网络服务，适用于在线教育、互动娱乐、视频会议、保险定损、调度指挥等场景。使用阿里云RTC SDK，您可以在移动、Web、PC等多端快速搭建互通互联的实时音视频应用。

超级小班课：

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

获取音视频通信应用AppKey

连接ECS服务器

1.打开系统自带的终端工具。

Windows：CMD或Powershell。 MAC：Terminal。

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

ssh root@123.123.123.123

安装Node.js环境

1.执行以下命令下载Node.js二进制包。

wget 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

:wq

运行Demo

1.执行以下命令安装项目依赖。

npm install

2.执行以下命令安装RTC SDK。

npm install aliyun-webrtc-sdk -S

3.执行以下命令运行项目。

npm run serve

运行成功之后，默认会在浏览器打开项目主页。如果没有自动打开，请在浏览器地址栏输入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=>{})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。