您可以阅读本文，了解超级小班课Web端的集成操作。

前提条件

开发前的环境要求如下表所示，详情请参见：使用限制。

类别 说明
浏览器 Chrome浏览器60版本及以上，Safari浏览器11版本及以上。浏览器开启视频设备和麦克风设备。
Node.js 支持Node.js 6.0版本及以上。具体操作，请参见安装Node.js。
屏幕录制 Mac设备需要为浏览器打开屏幕录制权限。

Demo运行指引

  1. 获取应用ID和AppKey。
    说明

    应用ID和AppKey需要对应，不同的应用ID有不同的AppKey。

    在后续开发中会使用应用ID和AppKey，建议记录到本地文档中，妥善保存。

    1. 登录RTC控制台。
    2. 在左侧导航栏单击应用管理，进入应用管理页面。
    3. 获取应用ID和查询AppKey。
      • 应用ID：可在应用ID/名称列表下直接获取。
      • AppKey：单击查询AppKey获取AppKey。
      如果您还未有应用，您可以单击创建应用创建。获取AppKey和应用ID
  2. 下载Demo源码并解压。
    解压成功之后如下图所示：目录
    说明
    • AliRTC SDK通过npm集成。
    • 源码压缩文件内分为Web端、Android端、iOS端三个文件。
    • 若遇到GitHub代码库下载缓慢的问题，可通过安装加速插件等方式加速下载。
  3. 修改配置文件。

    打开web/src/core/data/config.js文件，修改AppID和AppKey。

    修改配置
    注意

    本Demo中在客户端代码配置AppID和AppKey的方式，很容易被反编译逆向破解，一旦AppID和AppKey泄露，攻击者就可以盗用您的阿里云流量，因此该配置方式仅适合用于本地Demo的运行和功能调试。

    正确的Token签发方式是将Token的计算代码集成到您的服务端，并提供面向App的接口，在需要Token时由您的App接口向业务服务器发起请求获取动态Token。具体操作，请参见生成Token。

  4. 运行Demo。
    1. 打开终端，定位到Demo中的web文件夹下package.json文件所在目录。
    2. 输入以下命令安装项目依赖。
      npm install
    3. 输入以下命令集成SDK 。
      npm install aliyun-webrtc-sdk -S
    4. 输入以下命令运行项目 。
      npm run serve
    5. 运行成功之后，你的浏览器默认会打开示例应用程序。
      如果没有打开，请在浏览器手动输入地址。
      • Windows：https://localhost:888。
      • Mac：https://localhost:1024。
      如果访问页面出现警告：您的连接不是私密连接。请单击高级，继续访问。警告页面
    6. 打包发布（若无需发布，请忽略此步骤）。

      打开终端，定位到Demo中的web文件夹所在目录。输入以下命令将压缩静态资源文件，可作为生产环境打包发布。

      npm run build
  5. 开启超级小班课。
    1. 教师由Web端输入姓名进入教室，为助教和学生发送教室码。
    2. 助教由Web端输入姓名和教室码进入教室，选择需要管理的小组进行管理。
    3. 学生由Web端或移动端（Android或iOS）输入姓名和教室码进行教室听课学习，还可以进行连麦互动。

Demo源码解析

  1. 项目结构说明
    ├── 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配置文件
  2. 功能实现流程
    • 检查浏览器是否支持
      RtcEngine.instance.isSupport().then(re => {}).catch(err=>{});
    • 获取设备信息
      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=>{})