Tutorial: Cross-Room Calls

Cross-Room Calls

Preface

In live broadcast scenarios, it is often necessary to cross-room link to support the real-time interaction between anchors in different live broadcast rooms. This article mainly introduces the implementation method of Web cross-room link and mixing and pushing to CDN.

Implementation Method

Before implementing the Web cross-room link, let's first confirm some basic information about real-time audio and video.

  • userId, user identification Id, each user has a unique Id;

  • roomId, live broadcast room Id;

  • trtc, the client object created by TRTC.create, has the function of joining the call room, publishing local audio and video streams, and subscribing to remote streams;

When implementing basic audio and video communication, we use trtc to enter a specific roomId room and publish local streams, subscribe to remote streams to achieve audio and video communication between multiple users in the same room.

In the Web end, let different room A and B anchors use their own userId to create a new trtc, enter the room where the other anchor is located, and subscribe to the other anchor's stream to achieve cross-room link.

Detailed Process Description

Step 1: Anchors enter their respective rooms and publish streams.

Anchor A (create trtcA1) pushes the stream in room 1000 as an anchor;

Anchor B (create trtcB1) pushes the stream in room 2000 as an anchor.

// Anchor A pushes the stream in room 1000
let trtcA1 = TRTC.create()
await trtcA1.enterRoom({
  sdkAppId: 0,
  userId: 'A',
  userSig: 'xxxx',
  scene: TRTC.TYPE.SCENE_LIVE,
  roomId: 1000,
  role: TRTC.TYPE.ROLE_ANCHOR
})
trtcA1.startLocalVideo()
trtcA1.startLocalAudio()
await trtcB1.enterRoom({
  sdkAppId: 0,
  userId: 'B',
  userSig: 'xxxx',
  scene: TRTC.TYPE.SCENE_LIVE,
  roomId: 1000,
  role: TRTC.TYPE.ROLE_ANCHOR
})
trtcB1.startLocalVideo()
trtcB1.startLocalAudio()

At this point, the user status in rooms 1000 and 2000 is as follows:

                             Room 1000                   Room 2000
                          ----------------              ----------------
 Before cross-room link: | Anchor A       |             | Anchor B      |
                         | Audience U V W |             | Audience X Y Z|
                          ----------------              -----------------

?

For audiences who are using standard live streaming (CDN live streaming), anchors need to push their audio and video streams to the CDN. Please refer to Implementing Pushing Streams to CDN.

Step 2: Anchors cross-room link

Anchor A (create trtcA2) enters room 2000 as an audience and subscribes to Anchor B's stream;

Anchor B (create trtcB2) enters room 1000 as an audience and subscribes to Anchor A's stream;

At this point, Anchor A and Anchor B have successfully cross-linked across rooms.

// Anchor A enters room 2000 as an audience and subscribes to Anchor B's stream
let trtcA2 = TRTC.create()
trtcA2.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE,event=>{
  if (event.userId === 'B') {
    trtcA2.startRemoteVideo({
      userId: event.userId,
      elementId: 'B_containerId'
    });
  }
})
await trtcA2.join({
  sdkAppId: 0,
  userId: 'A',
  userSig: 'xxxx',
  scene: TRTC.TYPE.SCENE_LIVE,
  roomId: 2000,
  role: TRTC.TYPE.ROLE_AUDIENCE
})
// Anchor B enters room 1000 as an audience and subscribes to Anchor A's stream
let trtcB2 = TRTC.create()
trtcB2.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE,event=>{
  if (event.userId === 'A') {
    trtcB2.startRemoteVideo({
      userId: event.userId,
      elementId: 'A_containerId'
    });
  }
})
await trtcB2.join({
  sdkAppId: 0,
  userId: 'B',
  userSig: 'xxxx',
  scene: TRTC.TYPE.SCENE_LIVE,
  roomId: 1000,
  role: TRTC.TYPE.ROLE_AUDIENCE
})
                            Room 1000                    Room 2000
                        -------------------               ------------------
 After cross-room link: | Anchor A         |             | Anchor B         |
                        | Audience B U V W |             | Audience A X Y Z |
                        -------------------               -------------------

#### Step 3: Mix streams after cross-room link
For standard live streaming (CDN live streaming), anchors who have cross-linked across rooms need to mix their audio and video streams and publish them to the CDN.
##### a. Premise for mixing streams - Enable relayed push
1. Log in to the [TRTC console](https://console.tencentcloud.com/trtc).
2. In the left navigation bar, select **Application Management** and click **Function Configuration** in the row of the target application.
3. In **Relayed Push Configuration**, click the switch on the right of **Enable Relayed Push**. In the **Enable Relayed Push** dialog box that appears, click **Enable Relayed Push** to enable it.
   ![img](./assets/relayed-push.png)
##### b. Initiate mixing streams
Anchors who have cross-linked across rooms need to initiate mixing streams in their respective streaming rooms, mixing the streams of other room anchors into their own audio and video streams that have already been published to the CDN.
Note: Only when the streamId parameter in [trtc.startMixTranscode](./TRTC.html#startMixTranscode) is undefined or '' will the streams of other users in mixUsers be mixed into the CDN audio and video streams of the interface caller.
```javascript
// Anchor A initiates cross-room mixing, mixing the audio and video streams of Anchor B in room 2000 into their own relayed stream
// Note: Mixing must be initiated by trtcA1, who published the local stream
trtcA1.startMixTranscode({
  mode: 'manual',
  videoWidth: 1280,
  videoHeight: 480,
  videoBitrate: 1500,
  videoFramerate: 15,
  mixUsers: [
    {
      userId: 'A',
      roomId: 1000,  // The roomId field supports cross-room mixing starting from version v4.11.5
      pureAudio: false,
      width: 640,
      height: 480,
      locationX: 0,
      locationY: 0,
      streamType: 'main',
      zOrder: 1
    },
    {
      userId: 'B',
      roomId: 2000, // The roomId field supports cross-room mixing starting from version v4.11.5
      pureAudio: false,
      width: 640,
      height: 480,
      locationX: 640,
      locationY: 0,
      streamType: 'main',
      zOrder: 1
    },
})
// Anchor B initiates cross-room mixing, mixing the audio and video streams of Anchor A in room 1000 into their own relayed stream
// Note: Mixing must be initiated by trtcB1, who published the local stream
trtcB1.startMixTranscode({
  mode: 'manual',
  videoWidth: 1280,
  videoHeight: 480,
  videoBitrate: 1500,
  videoFramerate: 15,
  mixUsers: [
    {
      userId: 'B',
      roomId: 2000,  // roomId field supports cross-room mixing starting from version v4.11.5
      pureAudio: false,
      width: 640,
      height: 480,
      locationX: 0,
      locationY: 0,
      streamType: 'main',
      zOrder: 1
    },
    {
      userId: 'A',
      roomId: 1000, // roomId field supports cross-room mixing starting from version v4.11.5
      pureAudio: false,
      width: 640,
      height: 480,
      locationX: 640,
      locationY: 0,
      streamType: 'main',
      zOrder: 1
    },
})

// Pulling streams from CDN

// Case 1: After you push the stream to Tencent Cloud CDN, each picture in the TRTC room matches a corresponding playback address, and the playback address splicing format is as follows: // http://playback domain/live/[streamId].flv

// Please configure the playback domain in the [Console]-[Domain Management] page of Tencent Cloud Live. // Get streamId // - streamId defaults to ${sdkAppId}_${roomId}_${userId}_main; // - When you specify the streamId field in [TRTC.enterRoom] (./TRTC.html#enterRoom), use the streamId specified in the [TRTC.enterRoom] interface to splice the playback address; // - When you specify the streamId field in [trtc.startPublishCDNStream] (./TRTC.html#startPublishCDNStream), use the streamId specified in the [trtc.startPublishCDNStream] interface to splice the playback address;

// Case 2: After you push the stream to the specified CDN address, use the corresponding playback address of your push stream address to watch the mixed stream;