Building super small class online course system

Time:2021-7-22

brief introduction

This scene introduces the use of video cloud technology to build a super small class online class system.

Alicloud experience Lab address (alicloud ECS experience scene experience)
https://developer.aliyun.com/…

background knowledge

Audio and video communication:

Real time communication (RTC) is Alibaba cloud’s global real-time audio and video development platform, which provides high availability, high quality, ultra-low delay real-time network services, and is suitable for online education, interactive entertainment, video conference, insurance loss assessment, dispatching command and other scenes. With Alibaba cloud RTC SDK, you can quickly build interconnected real-time audio and video applications on mobile, web, PC and other multi terminals.

Super small class:

Super small class is to divide thousands of students into several small classes in the form of groups (4-6 students are recommended as a group), and at the same time, a famous lecturer and a number of teaching assistants are tutored. All students can watch the teaching pictures of famous lecturers in real time and interact with them. Several teaching assistants pay real-time attention to the dynamics of students in the small class, maintain the order of the small class, and can even help the students in the small class. This scene can not only let the excellent teacher tutor more students, but also ensure the interaction between students, and greatly increase the learning effect of students.

Super small class solution is suitable for K12 and children’s language training.
Building super small class online course system

Get appkey of audio and video communication application

1. Log in to the audio and video communication RTC console with your own alicloud account.
2. Click application management on the left.
Building super small class online course system
3. In the application management page, you can see the appid of your default application.
Building super small class online course system
4. Click query appkey in the right operation column of the default application.

Building super small class online course system

  1. Click OK in the query appkey box.

Building super small class online course system

  1. You can see the appkey in the pop-up box where the query is successful.

Connecting to ECS server

1. Open the terminal tool of the system.

  • Windows: CMD or shell.
  • MAC:Terminal。

2. Enter the connection command SSH [user name] @ [IPAddress] in the terminal. You need to replace the username and IPAddress with the login name and public address of the ECS server created in Section 1. For example:

ssh [email protected]

Building super small class online course system
The result of the command is as follows:
Building super small class online course system

  1. Enter yes.
  2. After you agree to continue, you will be prompted to enter your login password. The password is the login password of the ECS of the created cloud service.

Building super small class online course system
After successful login, the following information will be displayed.
Building super small class online course system

Install node.js environment

1. Execute the following command to download the node.js binary package.

wget https://nodejs.org/dist/v14.15.0/node-v14.15.0-linux-x64.tar.xz

2. Execute the following command to unzip the node.js binary package to the path / usr / local.

tar xf node-v14.15.0-linux-x64.tar.xz -C /usr/local/ --no-same-owner

3. Execute the following command to add the path of node.js binary file to the environment variable path.

echo "export PATH=/usr/local/node-v14.15.0-linux-x64/bin:$PATH" >> /etc/profile

4. Execute the following command to make the modified environment variable take effect immediately.

source /etc/profile

5. Execute the following command to verify whether the installation and configuration are successful.

node -v

If the installation is successful, it will be similar to the following.

Building super small class online course system

Modify configuration

In this scenario, the project source code and running environment of super small class are built in the ECS server / root path. You can run the project by filling in your own appkey in the project source code.
1. Execute the following command to open the config.js file with vim.

cd superclass_web/ && vim src/core/data/config.js

2. Press the I key to enter the edit mode, and change the appid and appkey to the appid and appkey found in step 2.
Building super small class online course system
3. After modification, press ESC to exit editing mode, then enter the following command and press enter to exit VIM editor.

:wq

Run demo

1. Execute the following command to install project dependencies.

npm install

2. Execute the following command to install RTC SDK.

npm install aliyun-webrtc-sdk -S

3. Execute the following command to run the project.

npm run serve

After running successfully, the project home page will be opened in the browser by default. If it doesn’t open automatically, please enter it in the browser address barhttps://[IPAddress]: 888, IPAddress, please refer to step 3.

Building super small class online course system

Demo source code analysis

The project structure is as follows:

Dist # package file
ο - public ා static resources
ι - SRC # project file directory
Assets static resources    
│├ - components # common components
The core # JS file
│   │   ├── data
The configuration parameters of config.js
│   │   ├── util
Some common methods in utils.js
Single example of rtc-engine.js
The rtc-clinet.js # RTC instance file
│   ├── plugins
│├ -- router ා routing
The view page
│   │   ├── login                      
The login.vue # login page
│   │   ├── student                   
Student.vue # student page
│   │   ├── assistant                  
Page assistant.vue
│   │   ├── teacher                  
Teacher.vue # teacher page
│   ├── vuex
The root component of app.vue
Main.js # entry file
ο - vue.config.js? Vue configuration file

Some key function codes are listed below.

  1. Check whether the browser supports it.
RtcEngine.instance.getDevices().then(re => {})
  1. Get device information.
RtcEngine.instance.getDevices().then(re => {})
  1. Specify the camera.
RtcEngine.instance.currentCamera(deviceId)
  1. Specify the microphone.
RtcEngine.instance.currentAudioCapture(deviceId)
  1. Open preview.
/**
 *Preview
 *@ parame {htmlvideoelement} video the video tab of the playblast screen
 */
RtcEngine.instance.startPreview(video).then(re=>{})
  1. Stop previewing.
RtcEngine.instance.stopPreview(video).then(re=>{})
  1. To set whether to automatically push streaming and subscribe, it needs to be set before joining the channel. This interface is set for the channel.
/**
   *Set whether to auto push and auto subscribe. By default, auto push and auto subscribe
   *@ param {*} channel
   *@ param {Boolean} autopub true indicates automatic streaming
   *@ param {Boolean} autosub true indicates automatic subscription
   */
RtcEngine.instance.setAutoPublishSubscribe(channel, autoPub, autoSub)
  1. Registration callback needs to be set before joining the channel. This interface is set for the channel.
/**
   *Registration callback
   *@ param {*} channel
   * @param {*} callback 
   */
RtcEngine.instance.registerCallBack(channel, callback)
  1. Join the channel.
/**
   *Join the room
   *@ param {*} channel
   * @param {*} userName 
   */
RtcEngine.instance.login(channel, userName).then(re=>{})
  1. Start streaming.
/**
   *Start streaming
   *@ param {*} channel
   */
RtcEngine.instance.startPublish(channel).then(re=>{})
  1. Stop streaming.
/**
   *Stop streaming
   *@ param {*} channel
   */
RtcEngine.instance.stopPublish(channel).then(re=>{})
  1. Set whether to stop publishing local audio.
/**
   *Set whether to stop publishing local audio
   *@ param {*} channel
   * @param {*} enable 
   */
RtcEngine.instance.muteLocalMic(channel, enable)
  1. Set whether to stop publishing local videos.
/**
   *Set whether to stop publishing local videos
   *@ param {*} channel
   * @param {*} enable 
   */
RtcEngine.instance.muteLocalCamera(channel, enable)
  1. Switch the screen stream on and off.
/**
   *Switch on and off screen flow
   *@ param {*} channel
   * @param {*} enable 
   */
RtcEngine.instance.switchPublishScreen(channel, enable)
  1. Subscribe to audio and video.
/**
   *Set remote rendering default subscription audio + Video (small stream)
   *@ param {*} channel
   * @param {*} userId 
   */
RtcEngine.instance.subscribe(channel, userId).then(re=>{})
  1. Unsubscribe.
/**
   *Unsubscribe
   *@ param {*} channel
   * @param {*} userId 
   */
RtcEngine.instance.unSubScribe(channel, userId).then(re=>{})
  1. Set up remote rendering.
/**
   *Set up remote rendering
   *@ param {*} channel
   * @param {*} userId 
   * @param {*} video 
   * @param {*} streamType 
   */
RtcEngine.instance.setDisplayRemoteVideo(channel, userId, video, streamType)
  1. Get the channel user list.
/**
   *Get and judge user list channel
   * @param {*} channel 
   * @return { array | boolean }
   */
RtcEngine.instance.getUserList(channel)
  1. Get user information.
/**
   *Get the list of judged users
   *@ param {*} channel
   * @return { array | boolean }
   */
RtcEngine.instance.getUserInfo(channel, userId)
  1. Leave the channel.
/**
   *Leave the channel
   */
RtcEngine.instance.logout().then(re=>{})

Recommended Today

Flutter self made plug-in R_ Album pictures or videos saved to album

r_album The flitter picture or video is saved to the photo album plug-in, which supports Android and IOS .———————————————- |GitHub address: | https://github.com/rhymelph/r… |Pub address: | https://pub.dev/packages/r_album `———————————————- How to use 1. In./pubspec.yamlAdd plug-in under file dependencies: r_album: last version 2. Import package import ‘package:r_album/r_album.dart’; 3. Create album Await ralbum.createalbum (“your album name”); 4. Add […]