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

环境要求

Web端具体环境要求,更多信息,请参见使用限制

前提条件

  • 您已经注册阿里云账号,并完成实名认证。具体操作,请参见阿里云账号注册流程
  • 您已经开通音视频通信服务。具体操作,请参见音视频通信服务开通
  • 环境中已安装Node.js 6.0或以上版本。具体操作,请参见安装Node.js
  • 如果设备为Mac,需要为浏览器打开屏幕录制权限。

操作步骤

  1. 获取AppID和AppKey。此处建议记录一下AppID和AppKey,方便后续操作中使用。
    1. 登录RTC控制台
    2. 在左侧导航栏单击应用管理,进入应用管理页面。
    3. AppID/名称列获取AppID。
    4. 单击操作列的查询AppKey,获取AppKey。
    说明 如果应用列表中没有您需要的应用,可以单击创建应用,创建新的应用。具体操作,请参见创建应用
  2. 下载并解压Demo,更多信息,请参见Demo源码下载
    说明
    • 源码压缩文件内分为Web端、Android端、iOS端三个文件。
    • 如果GitHub代码库下载缓慢,可安装加速插件等方式加速下载。
  3. 配置Demo工程。

    根据步骤1中获取的AppID和AppKey修改web/src/core/data/config.js文件中appIDappKey的值。

    001
    说明 此处配置的AppID和AppKey很容易被反编译破解,如果被破解,攻击者可以盗用您的阿里云流量,因此AppID和AppKey仅适用于Demo演示及功能调试。在正式环境中您可以将Token计算代码集成到服务器中,并提供面向App的接口,在需要Token时由App向业务服务器发起请求获取动态Token。更多信息,请参见生成Token
  4. 运行Demo。
    1. 打开后台终端并进入到web文件夹下package.json文件所在目录。
    2. 安装项目依赖。
      npm install
    3. 集成RTC Web SDK 。
      npm install aliyun-webrtc-sdk -S
    4. 运行Demo。
      npm run serve

      运行成功后,浏览器会默认打开Demo应用示例。如果没有打开,请在浏览器中访问:

      • Windows:https://localhost:888
      • Mac:https://localhost:1024

      如果访问页面出现警告:您的连接不是私密连接。单击高级,继续访问。

      警告页面
    5. 可选:压缩静态资源文件,打包发布。
      npm run build

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.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=>{})