tencent cloud

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 });
  

2. 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);
   });
   

3. 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);
   });
   

4. 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：

   • To ensure that you are notified when a remote user enters the room, please register the Client.on('stream-added') callback before you call Client.join() to enter the room.
   • For other events such as the exit of a remote user, please see the API documentation.

   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());
   });
   

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