tencent cloud

Overview

TUICalling is an open-source UI component for audio/video communication. You can use it to quickly integrate video call capabilities into your desktop website. It’s ideal for applications such as online medical consultation, online customer service, and remote insurance claim settlement.

Note：

All components of TUIKit use two basic PaaS services of Tencent Cloud, namely TRTC and IM. When you activate TRTC, IM and the trial edition of the IM SDK (which supports only 100 DAUs) will be activated automatically. For the billing details of IM, see Pricing.

Other platforms

In addition to web, we also provide source code for Android, iOS, and Flutter. The Android and iOS versions support incoming call notifications.

Note：

• In addition to web, we also provide source code for Android, iOS, and Flutter. The Android and iOS versions support incoming call notifications.
• If you have any questions or suggestions, feel free to contact us.

Integration

Step 1. Get the SDKAppID and signature key

• Sign up for a Tencent Cloud account and go to the Application Management page of the TRTC console.
• If you don’t have an application yet, click Create Application to create an application. Then, click Application Info and select the Quick Start tab to view the SDKAppID and SecretKey.
• SDKAppID: TRTC application ID, which uniquely identifies an application
• Secretkey: TRTC application key, which you can use together with SDKAppID to generate a UserSig required to authorize the use of TRTC. You will use this key in step 5.

Step 2. Import the TRTCCalling component

Go to GitHub and clone or download the code. Refer to the Web directory.

Note：

• Since version 0.6.0, you need to manually install the dependencies trtc-js-sdk, tim-js-sdk, and tsignaling.
• To reduce the size of trtc-calling-js.js and prevent version conflict between trtc-calling-js.js and the already-in-use trtc-js-sdk, tim-js-sdk or tsignaling, the latter three are packaged as external dependencies, which you need to install manually before use.

// Import via npm
  npm install trtc-js-sdk --save

  npm install tim-js-sdk --save

  npm install tsignaling --save

  npm install trtc-calling-js --save

// If you import `trtc-calling-js` via a script, you need to manually import the following resources in the specified order.

<script src="./trtc.js"></script>
<script src="./tim-js.js"></script>
<script src="./tsignaling.js"></script>
<script src="./trtc-calling-js.js"></script>

Step 3. Create a TRTCCalling object

Create a TRTCCalling object, setting SDKAppID to the SDKAppID of your application.

// You can refer to `Web/src/trtc-calling/index.js`
import TRTCCalling from 'trtc-calling-js';
let options = {
SDKAppID: 0, // Replace 0 with your `SDKAppID` when connecting
// The `tim` parameter is added starting from v0.10.2
// The parameter guarantees the uniqueness of an existing TIM instance.
tim: tim
};
const trtcCalling = new TRTCCalling(options);

Step 4. Log in to the component and listen for events

// You can refer to `Web/src/components/login/index.vue`
trtcCalling.login({
userID,
userSig,
});
// You can refer to `Web/src/App.vue`
export default {
name: "App",
components: {
},
async created() {
    this.initListener();
},
data() {
    return {};
},
destroyed() {
    this.removeListener();
},
methods: {
    initListener: function() {
        // A remote user called.
        trtcCalling.on(trtcCalling.EVENT.INVITED, this.handleNewInvitationReceived);
        // A remote user answered the call.
        trtcCalling.on(trtcCalling.EVENT.USER_ACCEPT, this.handleUserAccept);
        // A remote user rejected the call.
        trtcCalling.on(trtcCalling.EVENT.REJECT, this.handleInviteeReject);
        // ...
    },
    removeListener: function() {
        trtcCalling.off(trtcCalling.EVENT.INVITED, this.handleNewInvitationReceived);
        trtcCalling.off(trtcCalling.EVENT.USER_ACCEPT, this.handleUserAccept);
        trtcCalling.off(trtcCalling.EVENT.REJECT, this.handleInviteeReject);
    },
    handleNewInvitationReceived: async function(payload) {
    },
    handleUserAccept: function() {
    },
    handleInviteeReject: function() {
    }
}
}

Step 5. Make a one-to-one call

• Caller: Calls a user

  // You can refer to `Web/src/components/video-call/index.vue` or `Web/src/components/audio-call/index.vue`
  trtcCalling.call({
  userID,  // User ID
  type: 2, // Call type. `0`: unknown; `1`: audio call; `2`: video call
  timeout  // Timeout period, in seconds
  });
  

• Callee: Answers the call

  // You can refer to the `Web/src/App.vue handleAcceptCall` method
  // Answer
  trtcCalling.accept();
  // Reject
  trtcCalling.reject()
  

• Turn the local camera on

  trtcCalling.openCamera()
  

• Play the video of the remote user

  trtcCalling.startRemoteView({
  userID, // Remote user ID
  videoViewDomID // The user’s data will be rendered in this DOM node.
  })
  

• Show local video preview

  trtcCalling.startLocalView({
  userID, // Local user ID
  videoViewDomID // The user’s data will be rendered in this DOM node.
  })
  

• Hang up

  trtcCalling.hangup()
  

FAQs

Why can’t I get through to a user? Why am I kicked offline?

The component does not support login of multiple instances or offline signaling. Please make sure that your current login is unique.

Note：

• Multiple instances: A user ID logs in multiple times or on different devices, which disrupts signaling.
• Offline signaling: Only online instances can receive a message. Messages sent to offline instances will not be sent again when the instances go online.

What are the environment requirements?

The desktop version of Chrome offers better support for the features of the TRTC web SDK; therefore, Chrome is recommended for the demo.

TRTCCalling uses the following ports and domain name for data transfer, which should be added to the allowlist of the firewall. After configuration, please use the official demo to check whether the configuration has taken effect.

• TCP port: 8687
• UDP ports: 8000, 8080, 8800, 843, 443, 16285
• Domain name: qcloud.rtc.qq.com. For details, see Firewall Restrictions.
• Supported platforms: Currently, this solution supports the following platforms:

  OS	Browser	Minimum Browser Version Requirement
  macOS	Safari (desktop)	11+
  macOS	Chrome (desktop)	56+
  macOS	Firefox (desktop)	56+
  macOS	Edge (desktop)	80+
  Windows	Chrome (desktop)	56+
  Windows	QQ Browser (desktop, WebKit core)	10.4+
  Windows	Firefox (desktop)	56+
  Windows	Edge (desktop)	80+

Note：

For more information on browser compatibility, see Browsers Supported. You can also run an online test using the TRTC compatibility check page.

• URL protocol support:

  Scenario	Protocol	Receive (Playback)	Send (Publish)	Share Screen	Remarks
  Production	HTTPS	Supported	Supported	Supported	Recommended
  Production	HTTP	Supported	Not supported	Not supported	-
  Local development	http://localhost	Supported	Supported	Supported	Recommended
  Local development	http://127.0.0.1	Supported	Supported	Supported	-
  Local development	http://[local IP]	Supported	Not supported	Not supported	-
  Local development	file:///	Supported	Supported	Supported	-

More

For other FAQs, see TRTCCalling for Web.