1. 房间配置项更新

1.0 房间配置项更新请求API

// 房间配置项更新的API:rtc.roomUpdate(roomOption);

参数说明:

房间配置参数列表如下表格:

例子如下:

/**
*  房间模板配置项的更新为讲课模式
*  @type: templatetype
*  @value: 1
*/
rtc.roomUpdate({
    'templatetype': 1,
    roomUpdateSuccess: function (data) {
        console.log(data, '房间模板配置更新请求成功！');
    },
    roomUpdateFailed: function (data) {
        console.log(data, '房间模板配置更新请求失败！ 请稍后再试!');
    }
});

// 再举个例子

/**
* 连麦音视频模式更新为仅音频
* @type: video_mode
* @value: 2
*/
rtc.roomUpdate({
   'video_mode': 2,
    roomUpdateSuccess: function (data) {
        console.log(data, ' 连麦音视频模式更新请求成功！');
    },
    roomUpdateFailed: function (data) {
        console.log(data, '连麦音视频模式更新请求失败！ 请稍后再试!');
    }
});

1.01 房间配置项更新监听

当讲师端, 通过请求房间配置项API,来进行修改某个配置项的状态, 如果更新成功后, 房间内所有端, 都可以通过组件内封装对应的监听方法来进行监听, 进行后续业务逻辑的处理。可以监听到的房间配置项列表如下:

注意: 配置项需更新变化时, 监听对象才有监听到, 状态不变化时, 无法触发监听对象进行监听。

1.02 房间配置项更新监听方法

我们在组件中, 对房间配置项的更新, 封装出更细, 更具体的监听方法, 为了更方便的提供给用户, 用户只需要调用对应的房间配置项更新的监听方法,就可以了。

比如用户要监听房间模板的更新变化, 举个例子:

/**
* 应用层
* 监听房间模板的更新变化 详情见房间配置项的更新demo
* @type: roomTemplateTypeChange
* @function: rtc.on('roomTemplateTypeChange');
*/
rtc.on('roomTemplateTypeChange', function (data) {
    console.log('房间模板更新成功监听回调');      
});

在应用层, 房间配置项的每一项配置项监听的方法, 我们都在组件内封装好, 用户只需调用房间每一个配置项更新的监听方法, 就可以了。

组件内提供的, 房间配置项的每一项更新所有对应的监听方法如下所示:

/**
 * 应用层
 * 所有的房间配置项监听方法详细如下
 */

/**
 * 房间模板模式更新监听方法
 * @type: roomTemplateTypeChange
 * @function: rtc.on('roomTemplateTypeChange')
 * 回调返回的data数据格式, 所有的房间配置监听方法都相同。
 *      {
 *          action: 'switch_settings',  
 *          change: ['templatetype'],
 *          settings:
 *                  {
 *                      templatetype: 4,
 *                      allow_audio: true,
 *                      allow_chat: true,
 *                      classtype: 2
 *                      .....
 *                  }
 *      }
 */        
rtc.on('roomTemplateTypeChange', function (data) {
    console.log('房间模板更新成功监听回调');     
    // 前端可以通过获取回调函数的data数据的templatetype字段, 例如:
    // var templateType = data.settings.templatetype; 根据templateType = 4, 前端可以参照房间模板       配置表, (1:讲课 2:主视角 4:平铺 16:双师), 进行页面房间模板的变更操作。
});

/**
 * 跟随模式的更新监听方法
 * @type: roomSettingHasFollow
 * @function: rtc.on('roomSettingHasFollow')
 */
rtc.on('roomSettingHasFollow', function (data) {
    console.log(data, '跟随摸式的更新成功监听回调');
    // 前端可以通过获取回调函数的data数据的is_follow字段, 例如:
    // var isFollow = data.settings.is_follow; 根据 isFollow 的值, 前端可以参照跟随模式配置表, ('':       否 streamid: 是), 进行前端的业务处理。跟随模式是指讲师端和互动端的视频观看的一种模式。
});

/**
 * 连麦摸式的更新的监听方法
 * @type: classTypeChange
 * @function: rtc.on('classTypeChange')
 */
rtc.on('classTypeChange', function (data) {
    console.log(data, '连麦的摸式更新成功监听回调');
    // 前端可以通过获取回调函数的data数据的classtype字段, 例如:
    // var classType = data.settings.classtype; 根据 classType 的值, 前端可以参照连麦模式配置表:       (1: 举手 2: 自由  3: 自动), 进行处理。
});

/**
 * 连麦音视频模式更新监听方法
 * @type: video_mode
 * @value: 1, 2,
 * @param: 1: 音屏和视频, 2: 音频
 * @function: videoModeChange
 */
rtc.on('videoModeChange', function (data) {
    console.log('连麦音视频模式更新成功监听回调');
    // 前端可以通过获取回调函数的data数据的video_mode字段, 例如:
    // var videoMode = data.settings.video_mode; 根据 videoMode 的值, 前端可以参照连麦音视频模式配      置表:(1:音视频 2.仅音频), 进行处理。
});

/**
 * 设置全体禁言/开言监听方法
 * @type: allow_chat
 * @value: true, false
 * @param: true: 开言, false: 禁言
 * @function: allowChatChange
 */
rtc.on('allowChatChange', function (data) {
    console.log('设置全体禁言/开言成功监听回调');
    // 前端可以通过获取回调函数的data数据的allow_chat字段, 例如:
    // var allowChat = data.settings.allow_chat; 根据 allowChat 的值, 前端可以参照禁言发言配置表:      (true: 允许发言, false: 不允许发言), 进行处理。比如, 弹框提示, 禁止聊天输入框输入等。
});

/**
 * 设置全体关闭麦克风/关闭麦克风监听方法
 * @type: allow_audio
 * @value: true, false
 * @param: true: 全体打开麦克风, false: 全体关闭麦克风
 * @function: allowAudioChange
 */
rtc.on('allowAudioChange', function (data) {
    console.log('设置全体关闭麦克风/关闭麦克风变化成功监听回调');
    // 前端可以通过获取回调函数的data数据的allow_audio字段, 例如:
    // var allowAudio = data.settings.allow_audio; 根据 allowAudio 的值, 前端可以参照是否允许使用       麦克风配置表: (true: 允许使用, false:  不允许使用 ), 前端可以进行相应的处理。图标提示等等。
});

/**
 * 设置全体下麦/全体上麦 监听方法
 * @type: allow_speak
 * @value: true, false
 * @param: true: 全体上麦, false: 全体下麦
 * @function: allowSpeakChange
 */
rtc.on('allowSpeakChange', function (data) {
    console.log('设置全体下麦/全体上麦变化成功监听回调');
    // 前端可以通过获取回调函数的data数据的allow_speak字段, 例如:
    // var allowSpeak = data.settings.allow_speak; 根据 allowSpeak 的值, 前端可以参照是否允许上麦:       (true: 允许使用, false:  不允许使用 ), 前端可以进行相应的处理。图标提示等等。
});

/**
 * 讲师端设置码率修改监听方法
 * @type: publisher_bitrate
 * @value: {Number} 不超过2000
 * @function: publisherBitrateChange
 */
rtc.on('publisherBitrateChange', function (data) {
    console.log('老师端设置码率修改变化监听回调');
    // 前端可以通过获取回调函数的data数据的publisher_bitrate字段, 例如:
    // var publisherBitrate = data.settings.publisher_bitrate; 根据 publisherBitrate 的值, 前端       可以参照讲师端码率配置表: (<= 2000), 前端可以根据自己业务的进行处理.
});

/**
 * 学生端设置码率修改监听方法
 * @type: talker_bitrate
 * @value: {Number} 不超过2000
 * @function: talkerBitrateChange
 */
rtc.on('talkerBitrateChange', function (data) {
    console.log('学生端设置码率修改变化监听回调');
     // 前端可以通过获取回调函数的data数据的talker_bitrate字段, 例如:
    // var talkerBitrate = data.settings.talker_bitrate; 根据 talkerBitrate 的值, 前端                可以参照学生端码率配置表: (<= 2000), 前端可以根据自己业务的进行处理.
});

在应用层, 用户如果需要, 对房间配置项某个配置项变化进行监听, 就可以直接调用房间配置项对应的监听方法, 就可以了。比如,用户需要对全体关闭麦克风/全体打开麦克风配置项更新, 进行监听。就可以调动rtc.on('allowAudioChange')方法, 就可以。

实例代码如下:

/**
* 应用层:
* 用户监听房间配置项的全体关麦配置项更新
* @function: rtc.on('allowAudioChange')
*/
rtc.on('allowAudioChange', function (data) {
    // 当房间配置项的全体关闭麦克风/全体打开麦克风状态变化时, 注意: 只有状态发生变化时, 监听方法才能监听到。
    console.log(data);
});

温馨提示:

在房间配置项更新的状态保证在Speaker的roomOptions对象中,用户可以在Speaker.roomOptions中获取到房间配置项中最新的状态了。

2. 用户列表配置项更新

2.1 用户列表配置项监听API

// 用户列表配置项API:
rtc.switchUserSetting(c, u, v, r);

2.2 用户列表配置项监听方法

用户个人配置项可以监听配置项变化的所有配置项, 如下列表所示:

在应用层, 用户如果需要对用户个人配置项变化进行监听, 直接调用组件内所提供对应的监听方法, 就可以了。

组件内提供的监听用户个人配置项变化的具体对应的方法 详细如下:

/**
 * 应用层
 * 所有用户列表的配置项更新的监听方法
 * @type: rtc.on();
 */

// 监听到用户单独被禁言
rtc.on('allowChatClose', function (data) {
    console.log(data, '用户单独禁言配置监听的回调数据');

   /**
   * 用户通过 `allowChatClose` 监听到被禁言了,前端可以进行禁止输入框输入, 提示禁言, 也可以根据自己的    * 业务逻辑处理。
   */
});

// 监听到用户单独被允许发言方法
rtc.on('allowChatOpen', function (data) {
    console.log('用户单独允许发言配置监听的回调数据');

  /**
   * 用户通过 `allowChatOpen` 监听到被允许发言了,前端可以进行允许输入框输入, 提示可以发言, 也可以根     * 据自己的业务逻辑处理。
   */
});

// 监听到用户单独被关闭音频
rtc.on('allowAudioClose', function (data) {
    console.log(data, '用户单独关闭音频配置监听的回调数据');

    // 用户通过 `allowAudioClose` 监听到应关闭自己的音频了,用户调用关闭音频的API,(参看websdk_3.0,       关闭本地流音频的API: rtc.pauseAudio(object)), 来进行关闭自己音频, 用音频关闭的图标来提示         也可以根据自己的业务进行处理。
});

// 监听到用户单独被打开音频
rtc.on('allowAudioOpen', function (data) {
    console.log(data, '用户单独打开音频配置监听的回调数据');

  //  用户通过 `allowAudioOpen` 监听到应打开音频了,用户调用打开音频的API,(参看websdk_3.0, 开启本地      流音频的API: rtc.playAudio(object)), 来进行打开自己音频,  用音频打开的图标来提示。也可以根          据自己的业务进行处理。
});

// 监听到用户单独被关闭视频
rtc.on('allowVideoClose', function (data) {
    console.log(data, '用户单独关闭视频配置更新监听的回调数据');

   //  用户通过 `allowVideoClose` 监听到应关闭自视频了,用户调用关闭视频的API,(参看websdk_3.0, 关闭      本地流的视频API: rtc.pauseVideo(object))来进行关闭自己视频,  用视频关闭的图标来提示。也可         以根据自己的业务进行处理。       
});

// 监听到用户单独被打开视频
rtc.on('allowVideoOpen', function (data) {
    console.log(data, '用户单独打开视频配置更新监听的回调数据');

    //  用户通过 `allowVideoOpen` 监听到应打开自己视频了,用户调用打开视频的API,(参看websdk_3.0, 关         闭本地流的视频API: rtc.playVideo(object))来进行打开自己视频,  用视频打开的图标来提示。也可        以根据自己的业务进行处理。
});

// 监听到用户单独被关闭画笔标注
rtc.on('allowDrawClose', function (data) {
    console.log(data, '用户单独关闭画笔标注配置更新回调数据');

    // 用户通过 `allowDrawClose` 监听到应取消画笔标注权限, 前端可以弹框提示, 更新画笔的是否授权标注的        字段, 开进行标识出用户单独画笔标注的状态。 例如: Paint.allow_draw = false;  也可以根据自己的        业务进行处理。
});

// 监听到用户单独被授权画笔标注
rtc.on('allowDrawOpen', function (data) {
    console.log(data, '用户单独打开画笔标注配置更新回调数据');

    // 用户通过 `allowDrawOpen` 监听到应授权有画笔标注权限, 前端可以弹框提示, 更新画笔的是否授权标注       的字段, 开进行标识出用户单独画笔标注的状态。 例如: Paint.allow_draw = true;  也可以根据自己       业务进行处理。
});

// 监听到用户单独在自动连麦模式下关闭举手
rtc.on('handUpClose', function (data) {
    console.log(data, '自动连麦摸式下用户单独关闭举手配置更新回调数据');

    // 用户在自动连麦模式下, 通过 `handUpClose` 监听到关闭举手, 前端可以所有在线人员列表, 通过          userid来进行身份校验, 删除对应的用户举手图标的操作,更新自动连麦摸式下举手的字段, 例如:           Speaker.userSettings[data.userId].hand_up = data.settings.hand_up; 也可以弹框提示,也可以        根据自己的业务进行处理.
});

// 监听到用户单独在自动连麦摸式下启动举手
rtc.on('handUpOpen', function (data) {
    console.log(data, '自动连麦摸式下用户单独打开举手配置更新回调数据');

    // 用户在自动连麦模式下, 通过 `handUpOpen` 监听到关闭举手, 前端可以所有在线人员列表, 通过           userid来进行身份校验, 增加对应的用户举手图标的操作,,更新自动连麦摸式下举手的字段, 例如:          Speaker.userSettings[data.userId].hand_up = data.settings.hand_up; 也可以弹框提示,也可以        根据自己的业务进行处理.
});

// 监听到用户单独被关闭授权讲师
rtc.on('allowAssistantClose', function (data) {
    console.log(data, '用户单独关闭授权为讲师配置更新回调数据');

     // 用户通过 `allowAssistantClose` 监听自己取消授权讲师, 前端可以弹框提示,页面的相应的讲师功           能, 隐藏。更新用户授权讲师的字段,例如:Speaker.userSettings[data.userId].allow_assistant         = data.settings.allow_assistant;  也可以根据自己的业务进行处理.
});

// 监听到用户单独被开启授权讲师
rtc.on('allowAssistantOpen', function (data) {
    console.log(data, '用户单独开启授权为讲师配置更新回调数据');

     // 用户通过 `allowAssistantOpen` 监听自己被授权讲师, 前端可以弹框提示,页面的相应的讲师功             能, 显示。更新用户授权讲师的字段,例如:Speaker.userSettings[data.userId].allow_assistant         = data.settings.allow_assistant;  也可以根据自己的业务进行处理.
});

我们在组件中, 提供了用户个人列表的配置项分别对应的监听方法, 方便用户更针对性的监听用户个人配置项的每一项的具体变化,比如, 用户需要监听用户单独被禁言的状态变化, 就可以直接调用组件内提供的对应的方法, 示例代码如下:

/**
* 应用层
* 用户被单独禁言的监听方法
*/
rtc.on('allowChatClose', function (data) {
    console.log(data, '用户已成功单独禁言了');
});

// 再举个例子
/**
* 应用层
* 用户单独打开音频方法
*/
rtc.on('allowAudioOpen', function (data) {
    console.log(data, '用户已成功打开音频');
});

温馨提示:

在用户列表配置项更新的状态保证在Speaker对象中的userSettings数组中,用户可以在Speaker.userSettings中获取到用户列表配置项中最新的状态了。

3. 聊天,发送图片

在demo内,有详细的说明, 和代码示例。为了更好的让客户理解聊天, 图文, 发送图片的业务逻辑和相关的监听, 在文档中,我们再详细说明一下。

聊天功能, 主要对发送的内容, 进行区分。一是文本, 表情包, 二是图片。对于不同的内容,进行做区分。

如果是发送的文本, 表情包的情况:

// 触发监听的方法
rtc.on('chat_message', function (data) {
    console.log(data, '监听到聊天发送文本,表情包方法');
});

如果是发送的图片的情况:

// 触发监听的方法
rtc.on('media_chat', function (data) {
     console.log(data, '监听到聊天发送图片方法');
});

具体的代码示例, 请查看 demo。

3.1 聊天历史记录

在应用层, 如果有需要聊天历史记录的需求, 我们为了方便客户, 在demo中, 也详细了写了聊天历史的获取,并且在组件中, 我们提供了监听聊天历史记录的方法, 以方便用户在应用层获取聊天历史记录。

注意: 聊天记录的获取, 必须在直播状态中, 才能有聊天历史记录。

3.2 聊天历史记录监听方法

// 聊天历史记录监听方法
rtc.on('chatHistoryGet', function (data) {});

用户在应用层,如果需要聊天历史记录数据, 进行渲染的业务需求, 可以直接在应用层监听聊天历史记录方法, 就可以直接在回调函数的参数中获取到聊天的历史数据。

代码示例如下:

/**
 *  应用层
 *  聊天历史记录监听方法
 *  @type: get_history
 *  @function: chatHistoryGet
 */
 rtc.on('chatHistoryGet', function (data) {
    console.log(data, 'data 是聊天的历史记录数据');
 })

注意: 聊天历史记录的数据获取,仅限于发送的文本,表情包, 不支持上传图片历史记录。 详情请看demo