Tutorial: Basic Audio/Video Call

Basic Audio/Video Call

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 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 LocalStream and remote stream objects RemoteStream. The Stream class provides methods for stream-related actions, including playback control.

Below are the APIs used in a basic audio/video call.

Creating Client Object

You can use TRTC.createClient() to create a Client object. The parameters are as follows:

  • mode: TRTC mode, which should be set to rtc
  • sdkAppId: SDKAppID assigned by Tencent Cloud
  • userId: user ID
  • userSig: user signature
const client = TRTC.createClient({ mode: 'rtc', sdkAppId, userId, userSig });

Entering Room

You can call client.join() to enter a TRTC room. Parameters:

  • roomId: room ID
try {
  await client.join({ roomId: 8888 });
  console.log('join room success');
} catch (error) {
  console.error('join room failed ' + error);
}

Publishing Local Stream and Subscribing to Remote Stream

Creating local stream

You can call TRTC.createStream() to create a local stream. In the example below, the local stream is captured by the camera and mic. The parameters are as follows:

  • userId: user ID
  • audio: whether to enable audio
  • video: whether to enable video
const localStream = TRTC.createStream({ userId, audio: true, video: true });

Initializing local stream

You can then call initialize() to initialize the local stream.

try {
  await localStream.initialize();
  console.log('init localStream success');
} catch (error) {
  console.error('init localStream failed: ' + error);
}

Publishing local stream

After initializing the local stream, you can call publish() to publish it.

try {
  await client.publish(localStream);
  console.log('publish localStream success');
} catch (error) {
  console.error('publish localStream failed: ' + error);
}

Subscribing to remote stream

A remote stream is obtained via the client.on('stream-added') event callback, which notifies you of the entry of remote users. To receive the callback, you need to register it before calling join() to enter a room. After receiving the callback, call subscribe() to subscribe to the remote 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);
});
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());
});

Playing stream

In the callback for the initialization of the local stream or the subscription of a remote stream, call play() to play the stream on a webpage. The play method allows a parameter that is a div element. 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
try {
  await localStream.initialize();
  console.log('init local stream success');
  // play local stream,'local_stream' is a dom ID
  localStream.play('local_stream');
} catch (error) {
  console.error('init local stream failed ' + 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());
});

Leaving Room

If you have published a video stream, please call the unpublish() method first to unpublish the local video stream in order to ensure the process is complete. You can call leave() to leave a room, which will end the audio/video call.

try {
  await client.unpublish(localStream);
} catch(error){
  console.error('unpublish failed: ' + error);
}
await client.leave();
// leave room success,you can call client.join to start a new call