跨房连麦方案介绍
一、跨房连麦流程介绍
假设场景:主播A、主播B、观众C
- 连麦前:主播A、B分别使用 RTC 地址推流,此时观众可通过TRC地址拉取主播A或B的流
- 连麦时:主播A、B分别拉取对方的音视频流
- 连麦后:观众同时拉取主播A、B的音视频流
二、跨房连麦功能实现
连麦前:
- 主播A、B分别通过IM创建各自的群组A、B;
- 观众C加入群组A,拉取主播A的音视频流;
连麦中:
- 主播A发送连麦请求给主播B;
- 主播A收到主播B同意连麦请求的消息;
连麦后:
- 主播A推流的同时拉取主播B的流;
- 观众C同时拉取主播A、B的流;
如下示意图:
三、代码片段
1.公共库
代码语言:javascript复制 qsStringify(obj) {
if (typeof obj !== 'object' || obj === null) {
return ''
}
const objKeys = Object.keys(obj)
const keys = []
for (let i = 0; i < objKeys.length; i) {
const key = objKeys[i]
if (obj[key] === null) {
continue
}
keys[i] = `${key}=${obj[key]}`
}
return keys.join('&')
},
2.创建推流url
代码语言:javascript复制// streamId为用户自定义变量
// appscene: 视频通话/videocall、在线直播/live、语音通话/audiocall、语音聊天室/voicechatroom
// 生成url后将其赋值给live-pusher的url即可进行推流
const pusherUrl = `trtc://cloud.tencent.com/push/${pusherConfig.streamId}?${
this.qsStringify({
sdkappid: pusherConfig.sdkAppID,
userId: pusherConfig.userId,
usersig: pusherConfig.userSig,
streamId: pusherConfig.streamId,
appscene: pusherConfig.appscene,
})
}`
3.创建拉流url
代码语言:javascript复制// 生成url后将其赋值给live-player的src即可进行拉流
const playurl: `trtc://cloud.tencent.com/play/${this.data.streamId}?${
this.qsStringify({
streamId: this.data.streamId,
userId,
sdkappid: sdkAppID,
usersig: userSig,
})
}`
四、常见问题
1. 如何控制推拉流(暂停、截图等操作)
推拉流可通过live-pusher/player自身标签赋值或者wx提供的方法进行控制,参考文档:
live-pusher.html live-player.html
livePusherContext.html livePlayerContext.html
2. 跨房连麦可以使用trtc-wx.js么?
不可以,trtc-wx.js里集成的是room协议,跨房连麦不能使用room协议,因此房间、成员列表等概念需要通过后台实现,可直接使用腾讯云IM进行集成。
3. 如何发送连麦申请?
此处以腾讯云IM举例,主播A可以通过IM发送自定义消息给主播B,主播B解析消息内容,发现为连麦邀请,主播B再向A发送自定义消息,A收到消息解析,发现为同意连麦邀请,这时A拉取B的音视频流(此处streamId可通过B传递过来,或者使用userId作为streamId),同时主播A发送给主播B连麦成功的消息,B收到消息拉取主播A的音视频流。
简述流程为:A发起邀请=>B收到邀请,B同意=>A收到同意,A发送连麦成功=>B收到连麦成功
4. 如何进行多端互通?
如果您集成了腾讯云的IM和TRTC,它们本身就是不区分平台的,用连麦场景举例,小程序端发起的连麦邀请在native端也可收到,您可以通过自定义消息设定特殊字段进行多端统一的内容解析,而trtc本身更不需要做多余处理,生成url进行推拉流即可。
5. 小程序端如何混流实现?
小程序目前只能通过调用服务端 REST API实现混流,参考文档:
云端混流转码 混流接口介绍
混流方案的实现与上述流程大致一致,区别在于连麦时主播A、B分别去混对方的流,用户C只需要拉主播A的流即可看到主播B的画面。