apicloud apicloud

注册
查看: 386|回复: 1

[案例源码] 【模块教程】腾讯语音聊天室使用教程

新手上路

UID:315713

主题:
29
帖子:
49
云币:
77

[案例源码] 【模块教程】腾讯语音聊天室使用教程

386 1 | 发表于 2021-2-19 18:35:07 |阅读模式 | |
本帖最后由 软云 于 2021-2-19 18:43 编辑

##**腾讯云语音聊天室**

该模块提供语音聊天室的功能, 包括麦位管理、低延时语音互动、文字聊天等 TRTC 在语音聊天场景下的相关能力。

##**技术支持**

音视频产品使用复杂程度高,可以扫码联系我们,获取技术支持



添加时备注: tencentTrtcVoiceRoom

也可以直接添加微信号: ruanyunwangluo006

##**快速开始**

###**步骤一: 腾讯云配置**

这个步骤比较繁琐,可以联系我们上文中的客服进行指引

注册或登录[腾讯云]账号,实名认证后,点击[实时音视频](https://console.cloud.tencent.com/trtc),

1. 点击应用管理[许可证](https://console.cloud.tencent.com/trtc/app),
- 如果还没有,可以点击"创建应用"
- 或选择对应的应用, 并复制”SDKAppId“,这个ID保存为配置的文件的sdkAppId;

2. 点击辅助工具,选择[UserSig生成&校验](https://console.cloud.tencent.com/trtc/usersigtool),选择对应的应用的ID,生成userId和userSig

###**步骤二: 开始使用模块**

1. 模块申明

模块名称为: tencentTrtcVoiceRoom

```js
var voiceRoom = null;
voiceRoom = api.require('tencentTrtcVoiceRoom');
```

2. 参数配置

```js
var sdkAppId = 1400387416;
var userId = 'test001';
...
var content = 'this is content';
var identifier = '';
var msg = 'this is a message';
var cmd = 'this is a cmd';
```

2. 模块初始化

```js
voiceRoom.init({}, function(ret, err) {
        if (ret) {
                alert(JSON.stringify(ret));
        } else {
                alert(JSON.stringify(err));
        }
});
```

###**步骤三: 设置监听**

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

ret:
|回调名称|含义|
|:-:|:-:|
|onSeatListChang|全量的麦位列表|
|onAnchorEnterSeat|有成员上麦(主动上麦/主播抱人上麦)|
|onRoomInfoChange|进房成功后会回调该接口,roomInfo 中的信息在创建房间|
|onAnchorLeaveSeat|有成员下麦(主动下麦/主播踢人下麦)|
|onSeatMute|主播禁麦|
|onSeatClose|主播封麦|

```js
voiceRoom.setVoiceRoomListener({}, function(ret, err) {
        if (ret) {
                alert(JSON.stringify(ret));
        } else {
                alert(JSON.stringify(err));
        }
});
```

###**步骤四: 登录**

调用login函数完成组件的登录

```js
voiceRoom.login({
        sdkAppId: sdkAppId,
        userId: userId,
        userSig: userSig
}, function(ret, err) {
        if (ret) {
                alert(JSON.stringify(ret));
        } else {
                alert(JSON.stringify(err));
        }
});
```

###**步骤五: 主播端开播**

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

![主播端开播]()

```js
voiceRoom.setSelfProfile({
        userName: userName,
        avatarUrl: avatarUrl
}, function(ret, err) {
        if (ret) {
                alert(JSON.stringify(ret));
        } else {
                alert(JSON.stringify(err));
        }
});
```

```js
liveRoom.createRoom({
        roomId: roomId,
        roomName: roomName,
        coverUrl: coverUrl
}, function(ret, err) {
        if (ret) {
                alert(JSON.stringify(ret));
        } else {
                alert(JSON.stringify(err));
        }
});
```

```js
voiceRoom.enterSeat({
        seatIndex: seatIndex
}, function(ret, err) {
        if (ret) {
                alert(JSON.stringify(ret));
        } else {
                alert(JSON.stringify(err));
});
```

###**步骤六: 观众端观看**

1. 观众端执行 步骤4 登录后,可以调用setSelfProfile设置自己的昵称和头像。
2. 观众端向业务后台获取最新的语音聊天室房间列表。
3. 观众端调用getRoomInfoList获取房间的详细信息,该信息是在主播端调用createRoom创建语音聊天室时设置的简单描述信息。
4. 观众选择一个语音聊天室,调用enterRoom并传入房间号即可进入该房间。
5. 进房后会收到组件的setVoiceRoomListener#onRoomInfoChange房间属性变化事件通知,此时可以记录房间属性并做相应改变,例如 UI 展示房间名、记录上麦是否需要请求主播同意等。
6. 进房后会收到组件的setVoiceRoomListener#onSeatListChange麦位表变化事件通知,此时可以将麦位表变化刷新到 UI 界面上。
7. 进房后还会收到麦位表有主播进入的setVoiceRoomListener#onAnchorEnterSeat的事件通知。

![观众端观看]()

```js
voiceRoom.getRoomInfoList({
        roomIdList: roomIdList
}, function(ret, err) {
        if (ret) {
                alert(JSON.stringify(ret));
        } else {
                alert(JSON.stringify(err));
        }
});
```

```js
voiceRoom.enterSeat({
        seatIndex: seatIndex
}, function(ret, err) {
        if (ret) {
                alert(JSON.stringify(ret));
        } else {
                alert(JSON.stringify(err));
        }
});
```

###**步骤七: 麦位管理**

主播端:
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的事件通知。

![主播端]()

```js
var self = this;
this.$refs.voiceRoom.pickSeat({
        seatIndex: self.seatIndex,
        userId: self.userId
}, ret => {
        uni.showToast({
                title: JSON.stringify(ret),
                icon: "none"
        });
});
```

```js
voiceRoom.kickSeat({
        seatIndex: seatIndex
}, function(ret) {
        if (ret) {
                alert(JSON.stringify(ret));
        } else {
                alert(JSON.stringify(err));
        }
});
```

```js
voiceRoom.muteSeat({
        seatIndex: seatIndex,
        isMute: isMute
}, function(ret, err) {
        if (ret) {
                alert(JSON.stringify(ret));
        } else {
                alert(JSON.stringify(err));
        }
});
```

```js
voiceRoom.closeSeat({
        seatIndex: seatIndex,
        isClose: isClose
}, function(ret, err) {
        if (ret) {
                alert(JSON.stringify(ret));
        } else {
                alert(JSON.stringify(err));
        }
});
```

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

![观众端]()

```js
voiceRoom.leaveSeat({}, function(ret, err) {
        if (ret) {
                alert(JSON.stringify(ret));
        } else {
                alert(JSON.stringify(err));
        }
});
```

###**步骤八:邀请信令使用**

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

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

![观众上麦需要申请]()

```js
voiceRoom.sendInvitation({
        cmd: invitationCmd,
        userId: remoteUserId,
        content: content
}, function(ret, err) {
        if (ret) {
                alert(JSON.stringify(ret));
        } else {
                alert(JSON.stringify(err));
        }
});
```

```js
voiceRoom.acceptInvitation({
        identifier: identifier
}, function(ret, err) {
        if (ret) {
                alert(JSON.stringify(ret));
        } else {
                alert(JSON.stringify(err));
        }
});
```

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

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

![需要主播发送申请才能抱观众上麦]()

###**步骤九:实现文字和弹幕消息**

- 通过sendRoomTextMsg可以发送普通的文本消息,所有在该房间内的主播和观众均可以收到setVoiceRoomListener#onRecvRoomTextMsg回调
        即时通信 IM 后台有默认的敏感词过滤规则,被判定为敏感词的文本消息不会被云端转发。

```js
voiceRoom.sendRoomTextMsg({
        msg: msg
}, function (ret, err) {
        if (ret) {
                alert(JSON.stringify(ret));
        } else {
                alert(JSON.stringify(err));
        }
});
```

- 通过sendRoomCustomMsg可以发送自定义(信令)的消息,所有在该房间内的主播和观众均可以收到onRecvRoomCustomMsg回调。
        自定义消息常用于传输自定义信令,例如用于点赞消息的发送和广播。

```js
voiceRoom.sendRoomCustomMsg({
        cmd: cmd,
        msg: msg
}, function (ret, err) {
        if (ret) {
                alert(JSON.stringify(ret));
        } else {
                alert(JSON.stringify(err));
        }
});
```

##**更多功能**

如果您有以下需求:

- 方案咨询;
- 接入流程协助;
- 测试DEMO功能;
- 内测功能;
- 问题反馈;
- 需求反馈;

音视频产品使用复杂程度高,可以扫码联系我们,获取技术支持



添加时备注: tencentTrtcVoiceRoom

也可以直接添加微信号: ruanyunwangluo006

##**案例源码**

示例的源代码,在附件中,您可以参考使用




本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

主题:
353
帖子:
49098
云币:
21303
发表于 2021-3-4 23:16:50 |
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表