Tutorial: Cross-Room Communication

Preface

In the live broadcast scenario, it is often necessary to connect across rooms to support the demand of real-time interaction between anchors in different live broadcast rooms.

Realization method

Before we implement the cross-room communication on the Web side, let's confirm some basic information about the real-time audio and video.

• userId. User identification Id, each user has a unique Id；

• roomId. Live Room Id；

• stream. Audio/video stream objects created by TRTC.createStream, including LocalStream for local audio/video streams and RemoteStream for remote audio/video streams;

• client. Client object created by TRTC.createClient with the ability to join call rooms, publish local audio and video streams, and subscribe to remote streams；

To implement basic audio/video calls, we create a client based on userId to access a specific roomId room and publish local streams and subscribe to remote streams to enable audio/video calls between multiple users in the same room.

On the web side, let two anchors A and B in different rooms create new clients with their own userId and enter the other anchor's room to subscribe to the other anchor's stream to achieve cross-room connection.

Detailed process description

Step 1: Anchors enter their respective rooms and post the stream.

Anchor A (created clientA1) pushes a stream in room 1000 as a anchor;

Anchor B (created clientB1) pushes a stream in room 2000 as a anchor.

// Anchor A pushing stream in room 1000
let localStreamA = TRTC.createStream({
  userId: 'A',
  audio: true,
  video: true
})
let clientA1 = TRTC.createClient({
  sdkAppId: 0,
  userId: 'A',
  userSig: 'xxxx',
  mode: 'live'
})
await clientA1.join({
  roomId: 1000,
  role: 'anchor'
})
await clientA1.publish(localStreamA)
// Anchor B pushing stream in room 2000
let localStreamB = TRTC.createStream({
  userId: 'B',
  audio: true,
  video: true
})
let clientB1 = TRTC.createClient({
  sdkAppId: 0,
  userId: 'B',
  userSig: 'xxxx',
  mode: 'live'
})
await clientB1.join({
  roomId: 2000,
  role: 'anchor'
})
await clientB1.publish(localStreamB)

At this point, the user status of room 1000 and room 2000 is as follows：

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

？

For the case that audiences are pulling streams via standard live streaming (CDN pulling streams), anchors need to push their audio and video streams to CDN, please refer to [Implementing Push Streams to CDN](https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/tutorial-26-advanced- publish-cdn-stream.html).

Step 2: Anchor cross-room communication

Anchor A (created clientA2) enters room 2000 as a audience and subscribes to Anchor B's stream;;

Anchor B (created clientB2) enters room 1000 as a audience and subscribes to Anchor A's stream;

At this point, Anchor A and Anchor B have successfully connected across rooms.

// Anchor A enters room 2000 as a audience and subscribes to Anchor B's stream
let clientA2 = TRTC.createClient({
  sdkAppId: 0,
  userId: 'A',
  userSig: 'xxxx',
  mode: 'live'
})
clientA2.on('stream-added', ({ stream: remoteStream }) => {
  if (remoteStream.getUserId() === 'B') {
    clientA2.subscribe(remoteStream);
  }
})
clientA2.on('stream-subscribed', ({ stream: remoteStream }) => {
  remoteStream.play('B_containerId');
})
await clientA2.join({
  roomId: 2000,
  role: 'audience'
})
// Anchor B enters room 1000 as a audience and subscribes to Anchor A's stream
let clientB2 = TRTC.createClient({
  sdkAppId: 0,
  userId: 'B',
  userSig: 'xxxx',
  mode: 'live'
})
clientB2.on('stream-added', ({ stream: remoteStream }) => {
  if (remoteStream.getUserId() === 'A') {
    clientB2.subscribe(remoteStream);
  }
})
clientB2.on('stream-subscribed', ({ stream: remoteStream }) => [
  remoteStream.play('A_containerId');
])
await clientB2.join({
  roomId: 1000,
  role: 'audience'
})

                                          Room 1000                          Room 2000
                                     ---------------------             ---------------------
  After the cross-room communication          | Anchor A          |             | Anchor B          |
                                     | Audience B U V W  |             | Audience A X Y Z  |
                                     ---------------------             ---------------------