【TRTC小程序】跨房连麦功能实现(不混流实现)

2022-05-13 16:25:05 浏览数 (2)

跨房连麦方案介绍

一、跨房连麦流程介绍

假设场景:主播A、主播B、观众C

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

二、跨房连麦功能实现

连麦前:

  1. 主播A、B分别通过IM创建各自的群组A、B;
  2. 观众C加入群组A,拉取主播A的音视频流;

连麦中:

  1. 主播A发送连麦请求给主播B;
  2. 主播A收到主播B同意连麦请求的消息;

连麦后:

  1. 主播A推流的同时拉取主播B的流;
  2. 观众C同时拉取主播A、B的流;

如下示意图:

跨房连麦.png跨房连麦.png

三、代码片段

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

0 人点赞