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.
![]() |
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.
SDKAppID
and signature keySDKAppID
and SecretKey
.SDKAppID
to generate a UserSig
required to authorize the use of TRTC. You will use this key in step 5.TRTCCalling
componentGo 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 betweentrtc-calling-js.js
and the already-in-usetrtc-js-sdk
,tim-js-sdk
ortsignaling
, 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>
TRTCCalling
objectCreate 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);
// 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() {
}
}
}
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()
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.
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.
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.
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 | - |
For other FAQs, see TRTCCalling for Web.
Was this page helpful?