更新记录

3.6.0(2021-05-21)

  1. 增加座位信息中的状态;
  2. 创建房间支持预置座位信息;
  3. 修复背景音乐事件返回值不一致的问题;

Android:

  1. 增加房间信息返回字段ownerId、ownerName和needRequest;

3.5.0(2021-05-11)

  1. 新增本地音频操作功能;
  2. 新增人声控制(变声、混响)功能(增值);
  3. 新增背景音乐功能(增值);
查看更多

平台兼容性

Android iOS
适用版本区间:4.4 - 11.0 适用版本区间: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 在语音聊天场景下的相关能力,可以用于语聊房、语音电台、在线 K 歌等语音互动直播场景。

技术支持

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

技术支持



微信号: ruanyunkeji006



快速开始

步骤1: 模块加载

  • 加载模块

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

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

插件名称为: RY-TencentTrtcVoiceRoom,使用标签

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

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

  1. 点击应用管理,进入应用列表;
  2. 点击 "创建应用",填入相关信息,创建新应用; 如果使用已有应用,则跳过这步;
  3. 点击"应用信息",进入应用详情;
  4. 在"应用信息"标签卡中,点击"SDKAppID"后面的复制按钮,复制SDKAppId,并保存,对应为后文中的"sdkAppId";
  5. 在"快速上手"标签卡中,"第二步"里,点击"复制秘钥",复制Key,并保存,对应为后文中的"key"值。
  • 生成签名
  1. 进入 sdkToken 平台,注册或者登录该平台;
  2. 点击 RY-TencentTrtcVoiceRoom 创建新应用:
  • "应用名"为您应用的名称,一般填写app名字;
  • "sdkAppId"为上方腾讯云配置中保存的sdkAppId值;
  • "key"为上方中腾讯云配置中保存的key值;
  • "Package Name"为您自定义基座中,使用的Android包名;
  • "Bundle Id"为您自定义基座中,使用的iOS包名。
  1. 点击 签名工具 ,选择您前面创建的应用,填入userId,获取用户签名userSig,保存userId和userSig,供后面步骤使用。

备注:

测试过程中一般需要生成两个userId对应的userSig,以方便快速测试双方的功能。

步骤2: 插件初始化

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

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

步骤3: 设置监听

调用 setVoiceRoomListener 函数注册组件的事件回调

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

步骤4: 登录

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

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

步骤5: 主播端开播

  1. 主播执行 步骤四 登录后,可以调用 setSelfProfile 设置自己的昵称和头像。
  2. 主播调用 createRoom 创建新的语音聊天室,此时传入房间 Id、上麦是否需要房主确认、麦位数等房间属性信息。
  3. 主播创建房间成功后,调用 enterSeat 进入座位。
  4. 主播收到插件的 setVoiceRoomListener#onSeatListChange 麦位表变化事件通知,此时可以将麦位表变化刷新到 UI 界面上。
  5. 主播还会收到麦位表有成员进入的 setVoiceRoomListener#onAnchorEnterSeat 的事件通知,此时会自动打开麦克风采集。

主播端开播

// 1.房主设置昵称和头像
self.$refs.voiceRoom.setSelfProfile({
    userName: self.userName,
    avatarUrl: self.avatarUrl
}, ret => {
    // 结果回调
    console.log(ret);
});

// 2.房主端创建房间
this.$refs.voiceRoom.createRoom({
    roomId: self.roomId, 
    roomParam: self.roomParam
}, ret => {
    uni.showToast({
        title: JSON.stringify(ret),
        icon: "none"
    });
});

// 创建房间成功后开始占座
this.$refs.voiceRoom.enterSeat({
    seatIndex: 0
}, ret => {
    if (ret.status) {
        // 房主占座成功
    } else {
        // 房主占座失败
    }
});

// 3.占座成功后,收到 onSeatListChange 事件通知
this.$refs.voiceRoom.setVoiceRoomListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        if ('onSeatListChange' == ret.eventType) {
            // 刷新您的麦位列表
        }

        // 4. 收到 onAnchorEnterSeat 事件通知
        if ('onAnchorEnterSeat' == ret.eventType) {
            // 处理房主上麦事件
        }
    }
});

步骤6: 观众端观看

  1. 观众端执行 步骤4 登录后,可以调用 setSelfProfile 设置自己的昵称和头像。
  2. 观众端向业务后台获取最新的语音聊天室房间列表。

说明:

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

  1. 观众端调用 getRoomInfoList 获取房间的详细信息,该信息是在主播端调用 createRoom 创建语音聊天室时设置的简单描述信息。

注意:

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

  1. 观众选择一个语音聊天室,调用 enterRoom 并传入房间号即可进入该房间。
  2. 进房后会收到插件的 setVoiceRoomListener#onRoomInfoChange 房间属性变化事件通知,此时可以记录房间属性并做相应改变,例如 UI 展示房间名、记录上麦是否需要请求主播同意等。
  3. 进房后会收到组件的 setVoiceRoomListener#onSeatListChange 麦位表变化事件通知,此时可以将麦位表变化刷新到 UI 界面上。
  4. 进房后还会收到麦位表有主播进入的 setVoiceRoomListener#onAnchorEnterSeat 的事件通知。

观众端观看

// 1.听众设置昵称和头像
self.$refs.voiceRoom.setSelfProfile({
    userName: self.userName,
    avatarUrl: self.avatarUrl
}, ret => {
    // 结果回调
    console.log(ret);
});

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

// 4.选择语音聊天室后,传入 roomId 进入房间
this.$refs.voiceRoom.enterSeat({
    seatIndex: self.seatIndex
}, ret => {
    // 进入房间结果回调
    console.log(ret);
    if (ret.status) {
        // 进房成功
    }
});

步骤7: 麦位管理

主播端:

  1. pickSeat 传入对应的麦位和观众 userId, 可以抱人上麦,房间内所有成员会收到setVoiceRoomListener#onSeatListChange 和 setVoiceRoomListener#onAnchorEnterSeat 的事件通知。
  2. kickSeat 传入对应麦位后,可以踢人下麦,房间内所有成员会收到 setVoiceRoomListener#onSeatListChange 和 setVoiceRoomListener#onAnchorLeaveSeat 的事件通知。
  3. muteSeat 传入对应麦位后,可以静音/解除静音,房间内所有成员会收到 setVoiceRoomListener#onSeatListChange 和 setVoiceRoomListener#onSeatMute 的事件通知。
  4. closeSeat 传入对应麦位后,可以封禁/解禁某个麦位,封禁后观众端将不能再上麦,房间内所有成员会收到 setVoiceRoomListener#onSeatListChange 和 setVoiceRoomListener#onSeatClose 的事件通知。

主播端

观众端:

  1. enterSeat 传入对应的麦位后,可以进行上麦,房间内所有成员会收到 setVoiceRoomListener#onSeatListChange 和 setVoiceRoomListener#onAnchorEnterSeat 的事件通知。
  2. leaveSeat 主动下麦,房间内所有成员会收到 setVoiceRoomListener#onSeatListChange 和 setVoiceRoomListener#onAnchorLeaveSeat 的事件通知。

观众端

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

// case1: 房主抱人上1号麦位
this.$refs.voiceRoom.pickSeat({
    seatIndex: 1, 
    userId: '123'
}, ret => {
    // 结果回调
    console.log(ret);
});

this.$refs.voiceRoom.setVoiceRoomListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        // 3.收到 onSeatListChange 回调,刷新您的麦位列表
        if ('onSeatListChange' == ret.eventType) {
            // 刷新的麦位列表
        }
        // 4.单个麦位变化的通知,可以在这里判断听众是不是真的上麦成功
        if ('onAnchorEnterSeat' == ret.eventType) {
            // 处理上麦事件
        }
    }
});
// case2: 听众主动上2号麦位
this.$refs.voiceRoom.enterSeat({
    seatIndex: 2
}, ret => {
    // 上麦结果回调
    console.log(ret);
});

this.$refs.voiceRoom.setVoiceRoomListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        // 3.收到 onSeatListChange 回调,刷新您的麦位列表
        if ('onSeatListChange' == ret.eventType) {
            // 刷新的麦位列表
        }
        // 4.单个麦位变化的通知,可以在这里判断是不是自己并进行相应处理
        if ('onAnchorEnterSeat' == ret.eventType) {
            // 处理上麦事件
        }
    }
});

步骤8:邀请信令使用

在 麦位管理 中,观众上下麦、主播抱人上麦都不需要经过对方的同意就可以直接操作。 如果您的 App 需要对方同意才能进行下一步操作的业务流程,那么邀请信令可以提供相应支持。

如果您的观众上麦需要申请:

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

观众上麦需要申请

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

// 2.收到邀请的同意请求, 正式上麦
this.$refs.voiceRoom.setVoiceRoomListener({}, ret => {
    if (ret.hasOwnProperty('eventType')) {
        if ('onInviteeAccepted' == ret.eventType) {
            if (ret.invitee == 'test002') {
                this.$refs.voiceRoom.enterSeat({
                    seatIndex: 1
                }, ret => {
                    console.log(ret);
                });
            }
        }
    }
});

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

如果您的主播需要发送邀请才能抱观众上麦:

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

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

步骤9:实现文字和弹幕消息

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

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

this.$refs.voiceRoom.sendRoomTextMsg({
    msg: 'This is a msg'
}, ret => {
    console.log(ret);
});

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

this.$refs.voiceRoom.sendRoomCustomMsg({
    cmd: 'This is a cmd', 
    msg: 'This is a msg'
}, ret => {
    console.log(ret);
});

更多功能

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

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

技术支持



微信号: 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.CAMERA", "android.permission.READ_PHONE_STATE", "android.hardware.camera", "android.hardware.camera.autofocus" iOS: 无

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

插件使用腾讯云实时音视频SDK会采集数据,详情可参考:https://cloud.tencent.com/document/product/647/45753

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

暂无用户评论。

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