tencent cloud

Feedback

Last updated: 2022-09-26 12:07:37
    This document describes how to subscribe to the audio/video streams of another user (remote user) in the room, i.e., how to play back the audio/video of a remote user.
    
    
    You will encounter two types of objects while using the TRTC web SDK:
    Client object, which represents a local client. The Client class provides APIs for room entry, local stream publishing, remote stream subscription, etc.
    Stream object, which represents an audio/video stream object. There are local stream objects (LocalStream) and remote stream objects (RemoteStream). The Stream class provides APIs for stream-related actions, including audio/video playback control.

    Step 1. Create a client object

    Create a client object. For detailed directions, see Entering a Room.
    You can specify the subscription mode when creating a client. TRTC offers two subscription modes:
    Automatic subscription: Upon receiving the stream-added notification, the SDK will start receiving and decoding the remote stream. This is the default mode of the SDK.
    Manual subscription: A screen sharing client only publishes streams and does not receive streams. Therefore, for screen sharing clients, use the manual subscription mode.
    const client = TRTC.createClient({
    ...,
    autoSubscribe: false // The default value is `true` (automatic subscription)
    });

    Step 2. Listen for new remote streams and subscribe

    You can use Client.on('stream-added') to listen for new remote streams. After receiving the notification, you can call Client.subscribe() to subscribe to the 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);
    });
    notice
    In order to receive notifications about all available streams in a room, make sure you register Client.on('stream-added') before room entry.
    For other events such as the exit of a remote user, see the API documentation.

    Step 3. Listen for successful subscription and play the stream

    In the callback that indicates successful subscription to a remote stream, call Stream.play() to play the stream. Pass in a div element ID or HTMLDivElement object to the API, and the SDK will create an audio/video tag in the element and play the stream.
    For more information on the parameters of the play API, see Stream.play().
    client.on('stream-subscribed', event => {
    const remoteStream = event.stream;
    console.log('Subscribed to the remote stream successfully:' + remoteStream.getId());
    // Play the remote stream
    remoteStream.play('remote-stream-' + remoteStream.getId());
    });
    Due to the autoplay policy of browsers, when you call play, a PLAY_NOT_ALLOWED error may occur. In such cases, the SDK will show a pop-up window to users. After obtaining the users’ permission, the SDK will call an API to resume the playback.
    You can also implement your own user interaction logic and, after users’ clicking/tapping event, call Stream.resume() to resume playback. In such cases, you need to set the enableAutoPlayDialog parameter of TRTC.createClient() to false.
    client.on('stream-subscribed', event => {
    const remoteStream = event.stream;
    console.log('Subscribed to the remote stream successfully:' + remoteStream.getId());
    // Listen for the 0x4043 error of `remoteStream`
    remoteStream.on('error', error => {
    const errorCode = error.getCode();
    if (errorCode === 0x4043) {
    // If the `PLAY_NOT_ALLOWED` error occurs, display a window on the UI and, after users’ clicking/tapping event, call `stream.resume` to resume playback.
    // remoteStream.resume()
    }
    });
    // Play the remote stream
    remoteStream.play('remote-stream-' + remoteStream.getId());
    });

    Step 4. Enter a room

    Call Client.join() to enter a room. For detailed directions, see Entering a Room.

    Code for the entire process

    
    const client = TRTC.createClient({
    mode: 'rtc',
    sdkAppId,
    userId,
    userSig
    });
    
    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 the remote stream successfully:' + remoteStream.getId());
    // Listen for the 0x4043 error of `remoteStream`
    remoteStream.on('error', error => {
    const errorCode = error.getCode();
    if (errorCode === 0x4043) {
    // If the `PLAY_NOT_ALLOWED` error occurs, display a window on the UI and, after users’ clicking/tapping event, call `stream.resume` to resume playback.
    // remoteStream.resume()
    }
    });
    // Play the remote stream
    remoteStream.play('remote-stream-' + remoteStream.getId());
    });
    
    try {
    await client.join({ roomId });
    console.log('Entered the room successfully');
    } catch (error) {
    console.error('Failed to enter the room. Please try again later.' + error);
    }
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support