Tutorial: Interactive Live Streaming

This document describes how to enter a room as audience and start co-anchoring. The process of entering a room as an anchor and start streaming is the same as that in call scenarios. For details, please see Real-Time Audio/Video Call.

Creating Client Object

You can use TRTC.createClient() to create a Client object. The parameters are as follows:

• mode: TRTC mode, which should be set to live
• sdkAppId: SDKAppID assigned by Tencent Cloud
• userId: user ID
• userSig: user signature

const client = TRTC.createClient({
  mode: 'live',
  sdkAppId,
  userId,
  userSig
});

Entering Room as Audience

You can call client.join() to enter a TRTC room. Parameters:

• roomId: room ID
• role: role
• anchor (default): Users in the role of “anchor” can publish local streams and play remote streams.
• audience: Users in the role of “audience” can play remote streams but cannot publish local streams. To co-anchor, audience must first call switchRole() to switch to the anchor role.

// Enter a room as audience
client
  .join({ roomId，role: 'audience' })
  .then(() => {
    console.log('Entered room successfully');
  })
  .catch(error => {
    console.error('Failed to enter room' + error);
  });

Playing Stream

Subscribing to remote stream

A remote stream is obtained via the client.on('stream-added') event callback, which notifies you of the entry of remote users. To receive the callback, you need to register it before calling join() to enter a room. After receiving the callback, call subscribe() to subscribe to the remote stream.

client.on('stream-added', event => {
  const remoteStream = event.stream;
  console.log('New remote stream:' + remoteStream.getId());
  // Subscribe to the remote stream
  client.subscribe(remoteStream);
});
client.on('stream-subscribed', event => {
  const remoteStream = event.stream;
  console.log('Subscribed to remote stream successfully:' + remoteStream.getId());
  // Play the remote stream
  remoteStream.play('remote_stream-' + remoteStream.getId());
});

Playing stream

In the callback for the subscription of a remote stream, call play() to play the stream on a webpage. The play method allows a parameter that is a div element. The SDK will create an audio/video tag in the div element and play the stream on it.

client.on('stream-subscribed', event => {
  const remoteStream = event.stream;
  console.log('Subscribed to remote stream successfully:' + remoteStream.getId());
  // Play the remote stream
  remoteStream.play('remote_stream-' + remoteStream.getId());
});

Co-anchoring

Switching role

You can call switchRole() to switch to the anchor role.

client
  .switchRole('anchor')
  .then(() => {
    // Role switched to “anchor” successfully
  })
  .catch(error => {
    console.error('Failed to switch role' + error);
  });

Co-anchoring

Creating local stream

You can call TRTC.createStream() to create a local stream. In the example below, the local stream is captured by the camera and mic. The parameters are as follows:

• userId: user ID
• audio: whether to enable audio
• video: whether to enable video

const localStream = TRTC.createStream({ userId, audio: true, video: true });

Initializing local stream

You can then call initialize() to initialize the local stream.

localStream
  .initialize()
  .then(() => {
    console.log('Local stream initialized successfully');
  })
  .catch(error => {
    console.error('Failed to initialize local stream' + error);
  });

Playing local stream after successful initialization

localStream
  .initialize()
  .then(() => {
    console.log('Local stream initialized successfully');
    localStream.play('local_stream');
  })
  .catch(error => {
    console.error('Failed to initialize local stream' + error);
  });

Publishing local stream

After initializing the local stream, you can call publish() to publish it.

client
  .publish(localStream)
  .then(() => {
    console.log('Local stream published successfully');
  })
  .catch(error => {
    console.error('Failed to publish local stream' + error);
  });

Leaving Room

You can call leave() to leave a room, which will end the live streaming session.

client
  .leave()
  .then(() => {
    // Left room. You can call client.join to start a new call.
  })
  .catch(error => {
    console.error('Failed to leave room' + error);
    // The error is unrecoverable. Please refresh the page.
  });