Last updated: 2022-01-20 14:58:02

    This document describes the basic workflow of the TRTC SDK for Web and how to implement the real-time audio/video call feature.

    You will deal with two types of objects in your use of the TRTC SDK for web.

    • 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.

    Below are the APIs used in a basic 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 rtc
    • sdkAppId: the sdkAppId you obtain from Tencent Cloud
    • userId: user ID
    • userSig: user signature. For the calculation method, please see UserSig
    const client = TRTC.createClient({
    mode: 'rtc',
    sdkAppId,
    userId,
    userSig
    });
    

    Step 2. Enter a room

    Call Client.join() to enter a TRTC room.
    roomId: room ID

    client
    .join({ roomId })
    .then(() => {
      console.log('Entered room successfully');
    })
    .catch(error => {
      console.error('Failed to enter room' + error);
    });
    

    Step 3. Publish the local stream and subscribe to a remote stream

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

      • userId: ID of the user to whom the stream belongs
      • audio: whether to enable audio
      • video: whether to enable video
      const localStream = TRTC.createStream({ userId, audio: true, video: true });
      
    1. Call LocalStream.initialize() to initialize the local audio/video stream.
      localStream
      .initialize()
      .then(() => {
      console.log('Local stream initialized successfully');
      })
      .catch(error => {
      console.error('Failed to initialize local stream' + error);
      });
      
    1. After the local stream is initialized, call Client.publish() to publish it.
      client
      .publish(localStream)
      .then(() => {
      console.log('Local stream published successfully');
      })
      .catch(error => {
      console.error('Failed to publish local stream' + error);
      });
      
    1. After receiving the Client.on('stream-added') callback, which is used to listen for remote streams, call Client.subscribe() to subscribe to the stream.
      Note:

      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 initialization of the local stream or 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.

      • Play the 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);
        });
        
      • Play a remote stream after successful subscription

        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. Exit the room

    Call Client.leave() to exit the room, and the call session ends.

    client
    .leave()
    .then(() => {
    // Exited 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.
    });
    
    Note:

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