Last updated: 2021-10-20 16:24:09

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

    Step 1. Create a client object

    Create a client object using TRTC.createClient(). Set the parameters as follows:

    • mode: TRTC mode, which should be set to live
    • sdkAppId: the sdkAppId you obtain from Tencent Cloud
    • userId: user ID
    • userSig: user signature
    const client = TRTC.createClient({
    mode: 'live',
    sdkAppId,
    userId,
    userSig
    });

    Step 2. Enter a room as audience

    Call Client.join() to enter a TRTC room. Below are the request 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 and publish local streams, audience must switch the role to anchor using Client.switchRole().
    // Enter a room as audience
    client
    .join({ roomId, role: 'audience' })
    .catch(error => {
    console.error('Failed to enter room' + error);
    })
    .then(() => {
    console.log('Entered room successfully');
    });

    Step 3. Play a live stream

    1. After receiving client.on('stream-added'), which is used to listen for remote streams, call Client.subscribe() to subscribe to the remote stream.
      Note:

      To ensure that you are notified when a remote user enters the room, please subscribe to the client.on('stream-added') callback before you call Client.join() to enter the room.

    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());
    });
    1. In the callback that indicates successful subscription to a remote stream, call Stream.play() to play the stream on a webpage. The play method allows a parameter that is a div element ID. 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());
      });

    Step 4. Co-anchor

    Step 4.1. Switch roles

    Call Client.switchRole() to switch the role to anchor.

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

    Step 4.2. Co-anchor

    1. Call TRTC.createStream() to create a local audio/video stream. In the example below, the audio/video stream is captured by the camera and mic. The parameters include:

      • userId: ID of the user to whom the local stream belongs
      • audio: whether to enable audio
      • video: whether to enable video
      const localStream = TRTC.createStream({ userId, audio: true, video: true });
      
    2. Call LocalStream.initialize() to initialize the local audio/video stream.

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

      localStream
      .initialize()
      .catch(error => {
      console.error('Failed to initialize local stream ' + error);
      })
      .then(() => {
      console.log('Local stream initialized successfully');
      localStream.play('local_stream');
      });
    4. Call Client.publish() to publish the local stream and start co-anchoring.

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

    Step 5. Exit the room

    Call Client.leave() to exit the room. The live streaming session ends.

    client
    .leave()
    .catch(error => {
    console.error('Failed to exit room ' + error);
    })
    .then(() => {
    // Exited room successfully
    });
    Note:

    The value of appScene must be the same on each client. Inconsistent appScene may cause unexpected problems.