有奖捉虫:云通信与企业服务文档专题,速来> HOT
说明:
新版直播连麦基于 TRTC 能力实现,小程序端连麦需要订阅实时音视频 TRTC 全新上线的包月套餐「尊享版」及以上版本,来解锁实时音视频 TRTC 小程序端服务,包月套餐中赠送的时长补充包可用于抵扣连麦时长消耗,计费详情请查看 新版直播连麦费用,实时音视频 TRTC 包月套餐详情请参见 包月套餐计费说明

跨房连麦流程介绍

假设场景:主播 A、主播 B、观众 C
连麦前:主播 A、B 分别使用 RTC 地址推流,此时观众可通过 RTC 地址拉取主播 A 或 B 的流
连麦时:主播 A、B 分别拉取对方的音视频流
连麦后:观众同时拉取主播 A、B 的音视频流

跨房连麦功能实现

连麦前
主播 A、B 分别通过 IM 创建各自的群组 A、B
观众 C 加入群组 A,拉取主播 A 的音视频流
连麦中
主播 A 发送连麦请求给主播 B
主播 A 收到主播 B 同意连麦请求的消息
连麦后
主播 A 推流的同时拉取主播 B 的流
观众 C 同时拉取主播 A、B 的流
如下示意图:




代码片段

1. 公共库
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
// 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
// 生成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 提供的方法进行控制,参考文档:

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 的画面。