Tencent RTC SDK - Tutorial: Quick Start Call

Prerequisites

You have signed up for a Tencent Cloud account.
Create an application. Select New and enter an application name such as TestTRTC. If you have already created an application, select Existing.
Deploy userSig calculating service。

Install

Execute the following command in the terminal to download and install the trtc-js-sdk.

$ npm install trtc-js-sdk --save

$ yarn add trtc-js-sdk

Import SDK in your project。

import TRTC from 'trtc-js-sdk';

Integrate with `<script>`

Also You can use SDK like this：

<script src="trtc.js"></script>

Resource

GitHub repository

SDK Overview

TRTC is the main entry to the entire TRTC SDK. You can use TRTC APIs to create a client object (Client) and local stream object (LocalStream), check a browser's compatibility, set log levels, and upload logs.
A client object Client provides the core TRTC call capabilities, including entering a room client.join(), leaving a room client.leave(), publishing a local stream client.publish(), unpublishing a local stream client.unpublish(), subscribing to a remote stream client.subscribe(), and unsubscribing from a remote stream client.unsubscribe().
Audio/video objects Stream include local stream LocalStream and remote stream RemoteStream objects. The APIs in Stream are general APIs for the local and remote streams.
- Local streams LocalStream are created via TRTC.createStream().
- Remove streams RemoteStream are obtained through listening for 'stream-added' events from client.on('stream-added').

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

You can call leave() to leave a room, which will end the audio/video call.

await client.leave();
// leave room success
// before calling client.destroy() to end the client life cycle, you can call client.join again to start a new call.
client.destroy();

Complete code

HTML:

<div class="container">
  <input type="number" id="roomId" name="roomId" placeholder="roomId" required>
  <input type="text" id="userId" name="userId" placeholder="userId" required>
  <input type="text" id="userSig" name="userSig" placeholder="userSig" required>
  <button type="button" id="startCall">start call</button>
  <button type="button" id="finishCall">finish call</button>
</div>
<div id="localStreamContainer"></div>
<div id="remoteStreamContainer"></div>

JavaScript:

let sdkAppId = 1200000000; // replace you app's sdkAppId
let roomId ;
let userId ;
let userSig ;
let client, localStream;
document.getElementById("startCall").onclick = async function () {
  roomId = parseInt(document.querySelector('#roomId').value);
  userId = document.querySelector('#userId').value;
  userSig = document.querySelector('#userSig').value;
  client = TRTC.createClient({ mode: 'rtc', sdkAppId, userId, userSig });
  client.on('stream-added', event => {
    const remoteStream = event.stream;
    console.log('remote stream add streamId: ' + remoteStream.getId());
    client.subscribe(remoteStream);
  });
  client.on('stream-subscribed', event => {
    const remoteStream = event.stream;
    remoteStream.play('remoteStreamContainer');
  });
  try {
    await client.join({ roomId });
    localStream = TRTC.createStream({ userId, audio: true, video: true });
    await localStream.initialize();
    localStream.play("localStreamContainer");
    await client.publish(localStream);
  } catch (error) {
    console.error(error);
  }
}
document.getElementById("finishCall").onclick = async function () {
  localStream.close();
  await client.leave();
  client.destroy();
}

Contact Us

Commit GitHub issue.
Communication & Feedback Welcome to join our Telegram Group to communicate with our professional engineers! We are more than happy to hear from you~ Click to join: https://t.me/+EPk6TMZEZMM5OGY1 Or scan the QR code

Tutorial: Quick Start Call