Desktop Browser

Last updated: 2021-08-27 16:02:40

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

    You will deal with two types of objects in your use of the TRTC SDK for desktop browsers:

    • Client object, which represents a local client. The Client class provides methods for room entry, local stream publishing, remote stream subscription, etc.
    • Stream object, which represents an audio/video stream object. There are local stream objects LocalStreamand remote audio/video stream object and remote stream objects RemoteStream. The Stream class provides mainly methods 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: rtc, which indicates the real-time call mode
    • 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 room.
    roomId: room ID

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

    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 audio/video stream is captured by the camera and mic. The parameters of the method include:

      • 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()
      .catch(error => {
      console.error('Failed to initialize the local stream ' + error);
      })
      .then(() => {
      console.log('Local stream initialized');
      });
      
    1. After the local stream is initialized, call Client.publish() to publish it.
      client
      .publish(localStream)
      .catch(error => {
      console.error('Failed to publish local stream ' + error);
      })
      .then(() => {
      console.log('Local stream published');
      });
      
    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 a remote stream
      client.subscribe(remoteStream);
      });
      client.on('stream-subscribed', event => {
      const remoteStream = event.stream;
      console.log('Subscribed to remote stream:' + remoteStream.getId());
      // Play back 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 back 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');
        localStream.play('local_stream');
        });
        
      • Play back a remote stream after successful subscription

        client.on('stream-subscribed', event => {
        const remoteStream = event.stream;
        console.log('Subscribed to remote stream:' + remoteStream.getId());
        // Play back 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 enter the room again and start a new session.
    })
    .catch(error => {
    console.error('Failed to exit 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.