Web集成 - 音视频通信

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

环境要求

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

前提条件

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

操作步骤

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

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

说明此处配置的AppID和AppKey很容易被反编译破解，如果被破解，攻击者可以盗用您的阿里云流量，因此AppID和AppKey仅适用于Demo演示及功能调试。在正式环境中您可以将Token计算代码集成到服务器中，并提供面向App的接口，在需要Token时由App向业务服务器发起请求获取动态Token。更多信息，请参见生成Token。
运行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=>{})