本文时按照阿里云入门实验步骤写出
使用ECS实例,搭建超级小班课的server和web服务。
使用RTC SDK,在多端快速实现音视频应用的胡同。
方案架构如下
获取获取音视频通信应用AppKey
使用您自己的阿里云账号登录到音视频通信RTC控制台。
应用管理➡查询AppKey➡确定
将AppId和AppKey复制保存下来,后续会用到
ECS
创建ECS
打开CMD,输入:ssh root@[ip地址]
输入yes 输入密码,进入终端
安装Node.js环境
- 执行以下命令下载Node.js二进制包。
wget https://nodejs.org/dist/v14.15.0/node-v14.15.0-linux-x64.tar.xz
- 执行以下命令将Node.js二进制包解压到路径/usr/local。
tar xf node-v14.15.0-linux-x64.tar.xz -C /usr/local/ --no-same-owner
- 执行以下命令将Node.js二进制文件所在路径加入到环境变量PATH中。
echo "export PATH=/usr/local/node-v14.15.0-linux-x64/bin:$PATH" >> /etc/profile
- 执行以下命令使修改的环境变量立即生效。
source /etc/profile
- 执行以下命令验证是否安装配置成功。
node -v
则为安装成功
修改配置
本场景中的ECS服务器/root路径中内置了超级小班课的项目源码和运行环境,在项目源码中填入自己的AppKey即可运行项目。
- 执行以下命令使用Vim打开config.js文件
cd superclass_web/ && vim src/core/data/config.js
- 按下i键进入编辑模式,将appId和appKey修改为步骤二中查询到的AppId和AppKey。
- 保存并退出
运行Demo
- 执行以下命令安装项目依赖。
npm install
- 执行以下命令安装RTC SDK。
npm install aliyun-webrtc-sdk -S
- 执行以下命令运行项目。
npm run serve
运行成功之后,默认会在浏览器打开项目主页。如果没有自动打开,请在浏览器地址栏输入https://[ipaddress]:888
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配置文件