[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. 聊天，发送图片
聊天功能， 主要对发送的内容， 进行区分。一是文本， 表情包， 二是图片。对于不同的内容，进行做区分。
4.1 发送聊天
rtc.sendMsg(msg);
// msg为字符串类型数据，length不超过400
4.2 聊天事件
// 触发监听的方法
rtc.on('chat_message', function(data) {
var data = JSON.parse(data);
//data数据需要解析
})
//data数据如下
userid: "lybQdEP0gxhB8pp2" //发送者用户id
username: "cccc" // 发送者用户名
userrole: "presenter" // 发送者角色
msg: "casac " // 具体聊天信息
time: "16:28:57" // 发送时间
chatId: "4110E4E4C3B05D719C33DC5901307" // 聊天数据唯一id
敏感词过滤：如果发送的聊天消息被系统判定包含敏感词，则只有发送者能收到本条消息，房间内其他人都不会收到这条聊天消息。如果返回消息中有isFilterChat字段（消息不包含敏感词返回数据中无isFilterChat字段），且isFilterChat的值为1，则说明该消息包含敏感字，除发送者外其他人不会收到这条消息。包含敏感词消息数据结构如下：
// 触发监听的方法
rtc.on('chat_message', function(data) {
var data = JSON.parse(data);
//data数据需要解析
})
//data数据如下
msg: "敏感词", // 聊天内容
message_from: "class",
userrole: "presenter", // 用户角色
useravatar: "",
time: "11:31:48", // 发送时间
isFilterChat: 1, // 本条消息包含敏感词
userid: "lybQdEP0gxhB8pp2", // 发送者用户id
username: "cccc" // 发送者用户名
4.3 聊天历史记录注意项
聊天记录的获取， 必须在直播状态中， 才能有聊天历史记录
4.4 聊天历史记录监听方法
rtc.getHistory({
success:function(data){
// data数据data.datas.meta.chatLog 为历史聊天数据
},
fail:function(err){
}
})
注意： 聊天历史记录的数据获取，仅限于发送的文本，表情包， 不支持上传图片历史记录
