说明:
跨房连麦流程介绍
假设场景:主播 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么?
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 的画面。