更新记录

3.0.0（2022-02-28）

  1. 升级uniapp基础库至3.3.10;

2.0.1（2021-12-03）

  1. 修复Android接口getRoomInfos获取bug;

2.0.0（2021-09-09）

  1. 升级IM SDK至版本5.5.892;
  2. 升级TRTC SDK至版本8.9.10353;
查看更多

平台兼容性

Android Android CPU类型 iOS
适用版本区间：4.4 - 11.0 armeabi-v7a：未测试，arm64-v8a：未测试，x86：未测试 适用版本区间：9 - 14

原生插件通用使用流程：

  1. 购买插件，选择该插件绑定的项目。
  2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
  4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

腾讯云语音沙龙

该模块提供语音沙龙的能力，包括语音聊天、上下麦、低延时语音互动等 TRTC 在语音聊天场景下的相关能力。

  • 房主创建新的语音沙龙开播，听众进入语音沙龙收听/互动。
  • 房主可以邀请听众上麦、将座位上的麦上主播踢下麦。
  • 听众可以申请上麦，变成麦上主播，可以和其他人语音互动，也可以随时下麦成为普通的听众。
  • 支持发送各种文本消息和自定义消息，自定义消息可用于实现弹幕、点赞和礼物等。

技术支持

建议扫码添加我们技术支持，协助接入和测试。

技术支持



微信号: ruanyunkeji006



快速开始

步骤1: 插件加载

  • 加载插件

首先，uniapp平台的原生插件，需要自定义基座后才能使用，您可以按照自定义基座文档进行自定义基座操作。

新建nvue文件，注意该模块必须在nvue中使用。

插件名称为: RY-TencentTrtcChatSalon，使用标签

<view>
        <RY-TencentTrtcChatSalon ref="chatSalon" v-bind:style = "{ width: playerWidth, height: playerHeight }"></RY-TencentTrtcChatSalon>
<view>
  • 腾讯云配置

注册或登录腾讯云账号，实名认证后，开通实时音视频：

  1. 点击应用管理，进入应用列表；
  2. 点击 "创建应用"，填入相关信息，创建新应用; 如果使用已有应用，则跳过这步;
  3. 点击"应用信息"，进入应用详情；
  4. 在"应用信息"标签卡中，点击"SDKAppID"后面的复制按钮，复制SDKAppId，并保存，对应为后文中的"sdkAppId"；

步骤2: 插件初始化

必须调用 init 函数后，才可以使用插件个各个功能。

this.$refs.chatSalon.init({}, ret => {
    console.log(ret);
});

步骤3: 设置监听

调用 setChatSalonListener 函数注册组件的事件回调。

this.$refs.chatSalon.setChatSalonListener({}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

步骤4: 登录

调用 login 函数完成组件的登录，请参考下表填写关键参数

this.$refs.chatSalon.login({
    sdkAppId: self.sdkApp Id,
    userId: self.userId, 
    userSig: self.userSig
}, ret => {
        console.log(ret);
});

步骤5: 房主端开播

  1. 房主执行 步骤4 登录后，可以调用 [setSelfProfile]() 设置自己的昵称和头像。
  2. 房主调用 [createRoom]() 创建新的语音沙龙，此时传入房间id、上麦是否需要房主确认、房间类型等房间属性信息。
  3. 房主会收到有成员进入的 [onAnchorEnterSeat]() 的事件通知，此时会自动打开麦克风采集。

主播端开播

// 1.房主设置昵称和头像
self.$refs.chatSalon.setSelfProfile({
    userName: 'Lucy',
    avatarUrl: 'http://xxx.cos.myqcloud.com/xxx.png'
}, ret => {
    // 结果回调
    console.log(ret);
});

// 2.房主端创建房间
this.$refs.chatSalon.createRoom({
    roomId: 1234, 
    roomParam: {
        roomName: '房间名称',
        needRequest: true,
        coverUrl: '封面Url'
    }
}, ret => {
    console.log(ret);
    // 3. 创建房间成功后开始占座
    this.$refs.chatSalon.enterSeat({}, ret => {
    if (ret.status) {
        // 房主占座成功
    } else {
        // 房主占座失败
    }
});
});

this.$refs.chatSalon.setVoiceRoomListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        // 4. 收到 onAnchorEnterSeat 事件通知
        if ('onAnchorEnterSeat' == ret.eventType) {
        }
    }
});

步骤6: 听众端观看

  1. 听众端执行 步骤4 登录后，可以调用 [setSelfProfile]() 设置自己的昵称和头像。
  2. 听众端向业务后台获取最新的语音沙龙房间列表。

说明：

语音沙龙列表仅做演示使用，语音沙龙列表的业务逻辑千差万别，腾讯云暂不提供语音沙龙列表的管理服务，请自行管理您的语音沙龙列表。

  1. 听众端调用 [getRoomInfoList]() 获取房间的详细信息，该信息是在房主端调用 [createRoom]() 创建语音沙龙时设置的简单描述信息。

注意：

如果您的语音沙龙列表包含了足够全面的信息，可跳过调用 getRoomInfoList 相关步骤。

  1. 听众选择一个语音沙龙，调用 enterRoom 并传入房间号即可进入该房间。
  2. 进房后会收到组件的 onRoomInfoChange 房间属性变化事件通知，此时可以记录房间属性并做相应改变，例如 UI 展示房间名、记录上麦是否需要请求房主同意等。
  3. 进房后还会收到麦位表有主播进入的 onAnchorEnterSeat 的事件通知。

观众端观看

// 1.听众设置昵称和头像
self.$refs.chatSalon.setSelfProfile({
    userName: 'test002',
    avatarUrl: 'http://xxx.cos.myqcloud.com/xxx.png'
}, ret => {
    // 结果回调
    console.log(ret);
});

// 2.假定您从业务后台获取房间列表为 roomIdList
// 3.通过调用 getRoomInfoList 获取房间的详细信息
this.$refs.chatSalon.getRoomInfoList({
    roomIdList: [
        1234,
        ...
    ]
}, ret => {
    // 获取结果，此时可以刷新UI
    console.log(ret);
});

// 4. 传入 roomId 进入房间
this.$refs.chatSalon.enterRoom({}, ret => {
    // 进入房间结果回调
    console.log(ret);
    if (ret.status) {
        // 进房成功
    }
});

this.$refs.chatSalon.setChatSalonListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        // 5.进房成功后，收到 onRoomInfoChange 事件通知
        if ('onRoomInfoChange' == ret.eventType) {
            // 可以更新房间名称等信息
        }
        // 6.收到 onAnchorEnterSeat 事件通知
        if ('onAnchorEnterSeat' == ret.eventType) {
            // 处理上麦事件
        }
    }
})

步骤7: 上下麦

房主端：

  1. pickSeat 传入听众 userId, 可以抱人上麦，房间内所有成员会收到 onAnchorEnterSeat 的事件通知。
  2. kickSeat 传入对应用户的 userId 后，可以踢人下麦，房间内所有成员会收到 onAnchorLeaveSeat 的事件通知。

主播端

麦位操作后的事件通知顺序如下：callback > onAnchorEnterSeat 等独立事件。

// 1.房主抱人上麦位
this.$refs.chatSalon.pickSeat({
    userId: 'test001'
}, ret => {
    // 2.收到 callback 回调
    console.log(ret);
})

this.$refs.chatSalon.setChatSalonListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        // 3.听众成为主播，进入麦位通知，可以在这里判断听众是不是真的上麦成功
        if ('onAnchorEnterSeat' == ret.eventType) {
            // 处理上麦事件
        }
    }
})

观众端:

  1. enterSeat 可以进行上麦，房间内所有成员会收到 onAnchorEnterSeat 的事件通知。
  2. leaveSeat 主动下麦，房间内所有成员会收到 onAnchorLeaveSeat 的事件通知。

观众端

麦位操作后的事件通知顺序如下：callback > onAnchorEnterSeat 等独立事件。

// 1.听众主动上麦
this.$refs.chatSalon.enterSeat({}, ret => {
    // 2.收到 callback 回调
});

this.$refs.chatSalon.setVoiceRoomListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        // 3.听众成为主播，进入麦位通知，可以在这里判断是不是自己并进行相应处理
        if ('onAnchorEnterSeat' == ret.eventType) {
            // 处理上麦事件
        }
    }
});

步骤8：邀请信令使用

如果您的 App 需要对方同意才能进行下一步操作的业务流程，那么邀请信令可以提供相应支持。

听众主动申请上麦:

  1. 听众端调用 sendInvitation 传入房主的 userId 和业务的自定义命令字等，此时函数会返回一个 inviteId，记录该 inviteId。
  2. 房主端收到 onReceiveNewInvitation 的事件通知，此时 UI 可以弹窗并询问房主是否同意。
  3. 房主选择同意后，调用 acceptInvitation 并传入 inviteId。
  4. 听众端收到 onInviteeAccepted 的事件通知，调用enterSeat进行上麦。

观众上麦需要申请

// 听众(test002)视角
// 1.调用 sendInvitation，请求上1号麦位
this.$refs.chatSalon.sendInvitation({
    cmd: 'ENTER_SEAT', 
    userId: 'test001',
    content: '1'
}, ret => {
    // 发送结果回调
    console.log(ret);
});

// 2.收到邀请的同意请求, 正式上麦
this.$refs.chatSalon.setChatSalonListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        if ('onInviteeAccepted' == ret.eventType) {
            if (ret.invitee == 'test002') {
                this.$refs.chatSalon.enterSeat({}, ret => {
                    // 上麦结果回调
                    console.log(ret);
                });
            }
        }
    }
});

// 房主端test001视角
// 1.房主收到请求
this.$refs.chatSalon.setChatSalonListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        if ('onReceiveNewInvitation' == ret.eventType) {
            if (cmd == 'ENTER-SEAT') {
                // 2.房主同意听众请求
                this.$refs.chatSalon.acceptInvitation({
                    inviteId: ret.inviteId
                }, ret => {
                    console.log(ret);
                });
            }
        }
    }
})

房主邀请听众上麦：

  1. 房主端调用 sendInvitation 传入听众的 userId 和业务的自定义命令字等，此时函数会返回一个 inviteId，记录该 inviteId。
  2. 听众端收到 onReceiveNewInvitation 的事件通知，此时 UI 可以弹窗并询问听众是否同意上麦。
  3. 听众选择同意后，调用 acceptInvitation 并传入 inviteId。
  4. 房主端收到 onInviteeAccepted 的事件通知，调用 pickSeat 抱听众上麦。

需要主播发送申请才能抱观众上麦

// 房主端视角
// 1.房主调用 sendInvitation，请求抱听众“123”上麦
this.$refs.chatSalon.sendInvitation({
    cmd: 'PICK_SEAT',
    userId: '123',
    content: '2'
}, ret => {
    // 发送结果回调
    console.log(ret);
});

// 2.收到邀请的同意请求, 正式上麦
this.$refs.chatSalon.setChatSalonListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        if ('onInviteeAccepted' == ret.eventType) {
            if (inviteId = self.inviteId) {
                this.$refs.chatSalon.pickSeat({
                    userId: '123'
                }, ret => {
                    // 上麦结果回调
                    console.log(ret);
                });
            }
        }
    }
});

// 听众端视角
// 1.听众收到请求
this.$refs.chatSalon.setChatSalonListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        if ('onReceiveNewInvitation' == ret.eventType) {
            if (ret.cmd == 'PICK_SEAT') {
                // // 2.听众同意房主请求
                this.$refs.chatSalon.acceptInvitation({
                    inviteId: ret.inviteId
                }, ret => {
                    console.log(ret);
                });
            }
        }
    }
});

步骤9：实现文字聊天和弹幕消息

  • 通过 sendRoomTextMsg 可以发送普通的文本消息，所有在该房间内的主播和听众均可以收到 onRecvRoomTextMsg 回调。

  • 即时通信 IM 后台有默认的敏感词过滤规则，被判定为敏感词的文本消息不会被云端转发。

// 发送端：发送文本消息
this.$refs.chatSalon.sendRoomTextMsg({
    msg: 'This is a msg'
}, ret => {
    console.log(ret);
});

this.$refs.chatSalon.setChatSalonListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        // 接收端：监听文本消息
        if ('onRecvRoomTextMsg' == ret.eventType) {
            // 收到的message信息处理方法    
        }
    }
})
  • 通过 sendRoomCustomMsg 可以发送自定义（信令）的消息，所有在该房间内的主播和听众均可以收到 onRecvRoomCustomMsg 回调。

自定义消息常用于传输自定义信令，例如用于点赞消息的发送和广播。

// 例如：发送端：您可以通过自定义Cmd来区分弹幕和点赞消息
// eg:"CMD_DANMU"表示弹幕消息，"CMD_LIKE"表示点赞消息
this.$refs.chatSalon.sendRoomCustomMsg({
    cmd: 'CMD_DANMU', 
    msg: 'hello world'
}, ret => {
    console.log(ret);
});
this.$refs.chatSalon.sendRoomCustomMsg({
    cmd: 'CMD_LIKE', 
    msg: ''
}, ret => {
    console.log(ret);
});

this.$refs.chatSalon.setChatSalonListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        // 接收端：监听自定义消息
        if ('onRecvRoomCustomMsg' == ret.eventType) {
            if ('CMD_DANMU' == ret.cmd) {
                // 收到弹幕消息
            }
            if（'CMD_LIKE' == ret.cmd) {
                // 收到点赞消息
            }
        }
    }
})

更多功能

  • 人声设置(变声、混响效果等)
  • 背景音乐

扫码添加, 获取技术支持:

技术支持



微信号: ruanyunkeji006

隐私、权限声明

1. 本插件需要申请的系统权限列表：

Android: "android.permission.INTERNET", "android.permission.ACCESS_NETWORK_STATE", "android.permission.ACCESS_WIFI_STATE", "aandroid.permission.WRITE_EXTERNAL_STORAGE", "android.permission.READ_EXTERNAL_STORAGE", "android.permission.RECORD_AUDIO", "android.permission.MODIFY_AUDIO_SETTINGS", "android.permission.BLUETOOTH", "android.permission.READ_PHONE_STATE" iOS: NSMicrophoneUsageDescription

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件使用的 腾讯云语音沙龙 SDK会采集数据，详情可参考：https://cloud.tencent.com/document/product/647/53549

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论

暂无用户评论。

插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...