[TOC]

1. 在线引用配置更新、聊天插件

1.1 组件引入

需使用聊天功能、修改房间级配置、修改个人配置,可在线引用配置更新、聊天插件

<script src="https://class.csslcloud.net/static/dist/js/classUpdateChat.js"></script>

1.2 配置修改、图文聊天插件包含功能

功能 描述
房间级配置修改 支持修改房间级配置
个人配置修改 支持个人配置状态管理
广播 支持获取广播通知消息
图文聊天 支持传递图文消息

2. 房间配置项更新

2.0 房间配置项更新请求API

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

参数说明:

参数名称 参数类型 参数说明 是否必须
roomOption { Object } 房间配置项 (具体参见房间配置参数列表), 以键值对的形式传 必须

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

参数名称 参数类型 参数说明 备注
name { String } 字符串 直播间名称 可选
desc { String } 字符串 直播间简介 (长度限制 <= 10000) 可选
templatetype { Number } 1,2, 4, 16 模板类型 1:讲课 2:主视角 4:平铺 16:双师 可选
video_mode { Number } 1,2 连麦音视频模式 1:音视频 2.仅音频 可选
publisher_bitrate { Number } 老师端码率 <= 2000 可选
talker_bitrate { Number } 学生端码率 <= 2000 可选
audio_bitrate { Number } 音频码率 <= 2000 可选
classtype { Number } 1, 2, 3 连麦摸式 1: 举手 2: 自由 3: 自动 可选
is_follow { String } “ ”, strummed 是否跟随 “ ”: 否 streamid: 是 可选
allow_chat { Boolean } true, false 是否允许发言 true: 允许发言, false: 不允许发言 可选
allow_audio { Boolean } true, false 是否允许使用麦克风 true: 允许使用, false: 不允许使用 可选
allow_speak { Boolean } true , false 是否允许上麦 true: 允许上麦, false: 不允许上麦 可选
roomUpdateSuccess { Function } 请求成功的回调函数 可选
roomUpdateFailed { Function } 请求失败的回调函数 可选
API返回结果 参数类型 参数说明 备注
{ result: 'OK', } JSON 数据格式 失败: FAIL,成功:OK.

例子如下:

/**
*  房间模板配置项的更新为讲课模式
*  @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, '连麦音视频模式更新请求失败! 请稍后再试!');
    }
});

2.01 房间配置项更新监听

请求房间配置项某个配置项更新成功后, 我们通过监听对象进行监听房间配置项某个配置项的更新变化, 在背后做了大量的工作, 现在房间配置项的更新和监听对象已经建立了关联,这些房间配置项的配置项,都是接受监听对象监听变化, 也就是说, 如下表格所示的房间配置项的配置项一旦更新变化成功后, 就会监听到。

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

监听到的配置项 类型 备注
video_mode 连麦音视频模式 更新时, 监听。
classtype 连麦摸式 更新时, 监听。
templatetype 模板类型 更新时, 监听。
publisher_bitrate 老师端码率 更新时, 监听。
talker_bitrate 学生端码率 更新时, 监听。
is_follow 是否跟随 更新时, 监听。
allow_chat 是否允许发言 更新时, 监听。
max_streams 最大上麦数 更新时, 监听。
allow_audio 是否允许使用麦克风 更新时, 监听。

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

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

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


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

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

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

/**
 * 应用层
 * 房间配置项具体的每一项更新的监听方法
 */

/**
 * 房间模板模式更新监听方法
 * @type: roomTemplateTypeChange
 * @function: rtc.on('roomTemplateTypeChange')
 */        
rtc.on('roomTemplateTypeChange', function (data) {
    console.log('房间模板更新成功监听回调');          
});

/**
 * 跟随摸式的更新监听方法
 * @type: roomSettingHasFollow
 * @function: rtc.on('roomSettingHasFollow')
 */
rtc.on('roomSettingHasFollow', function (data) {
    console.log(data, '跟随摸式的更新成功监听回调');
});

/**
 * 连麦摸式的更新的监听方法
 * @type: classTypeChange
 * @function: rtc.on('classTypeChange')
 */
rtc.on('classTypeChange', function (data) {
    console.log(data, '连麦的摸式更新成功监听回调');
});

/**
 * 连麦音视频模式更新监听方法
 * @type: video_mode
 * @value: 1, 2,
 * @param: 1: 音屏和视频, 2: 音频
 * @function: videoModeChange
 */
rtc.on('videoModeChange', function (data) {
    console.log('连麦音视频模式更新成功监听回调');
});

/**
 * 设置全体禁言/开言监听方法
 * @type: allow_chat
 * @value: true, false
 * @param: true: 开言, false: 禁言
 * @function: allowChatChange
 */
rtc.on('allowChatChange', function (data) {
    console.log('设置全体禁言/开言成功监听回调');
});

/**
 * 设置全体关闭麦克风/关闭麦克风监听方法
 * @type: allow_audio
 * @value: true, false
 * @param: true: 全体打开麦克风, false: 全体关闭麦克风
 * @function: allowAudioChange
 */
rtc.on('allowAudioChange', function (data) {
    console.log('设置全体关闭麦克风/关闭麦克风变化成功监听回调');
});

/**
 * 设置全体下麦/全体上麦 监听方法
 * @type: allow_speak
 * @value: true, false
 * @param: true: 全体上麦, false: 全体下麦
 * @function: allowSpeakChange
 */
rtc.on('allowSpeakChange', function (data) {
    console.log('设置全体下麦/全体上麦变化成功监听回调');
});

/**
 * 讲师端设置码率修改监听方法
 * @type: publisher_bitrate
 * @value: {Number} 不超过2000
 * @function: publisherBitrateChange
 */
rtc.on('publisherBitrateChange', function (data) {
    console.log('老师端设置码率修改变化监听回调');
});

/**
 * 学生端设置码率修改监听方法
 * @type: talker_bitrate
 * @value: {Number} 不超过2000
 * @function: talkerBitrateChange
 */
rtc.on('talkerBitrateChange', function (data) {
    console.log('学生端设置码率修改变化监听回调');
});

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

实例代码如下:

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

3. 用户列表配置项更新

3.1 用户列表配置项监听API

// 用户列表配置项监听API:
rtc.switchUserSetting(c, u, v, r)  // 已经在基础SDK,初始化
参数名称 参数类型 参数说明 是否必传
c { String } 要更新用户配置项字段: allow_video'、'allow_audio ...' 必传
u { String } 房间内单个学员的用户id: userid 必传
v { String} 用户配置项更新开关: 'true', 'false' 必传
r { String } 用户配置项的更新时被操作的用户角色:presenter, talker 必传

3.2 用户列表配置项监听

用户个人列表配置项监听流程图:

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

用户配置项名称 用户配置项键值类型 用户配置项说明 参数键值说明
allow_audio { String } 开关个人音频权限 'true': 打开音频 , 'false': 关闭音频
allow_video { String } 开关个人视频权限 ‘true': 打开视频, ‘false': 关闭视频
allow_chat { String } 开关个人聊天权限 ’true‘:禁言,'false': 发言
allow_draw { String } 开关个人画笔权限 'true': 开启画笔权限,’false‘: 关闭画笔权限
allow_assistant { String } 开关个人讲师权限 'true': 确定授权讲师权限, 'false': 取消授权讲师权限
hand_up { String } 开关自动连麦学员举手权限 'true': 开启举手, ’false‘: 关闭举手

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// 监听用户下麦或者关闭直播方法
rtc.on('userReset', function (data) {
    console.log(data, '用户下麦或者关闭直播配置监听回调数据');
});

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

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

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

4. 聊天,发送图片

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

业务逻辑流程图:

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

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

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

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

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

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

4.1 聊天历史记录

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

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

4.2 聊天历史记录监听方法

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

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

代码示例如下:

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

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

results matching ""

    No results matching ""