This document describes how to implement browser-based audio calls.
TRTCCalling
component.Currently, 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 official demo to check whether the configuration has taken effect.
The service supports the following platforms:
OS | Browser (Desktop) | Minimum Browser Version Requirement |
---|---|---|
macOS | Safari | 11+ |
macOS | Chrome | 56+ |
macOS | Firefox | 56+ |
macOS | Edge | 80+ |
Windows | Chrome | 56+ |
Windows | QQ Browser (WebKit core) | 10.4+ |
Windows | Firefox | 56+ |
Windows | Edge | 80+ |
Note:For more information on browser compatibility, please 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 address] | Supported | Not supported | Not supported | - |
Local development | file:/// | Supported | Supported | Supported | - |
TestTRTC
and click Create.Web/public/debug/GenerateTestUserSig.js
file.GenerateTestUserSig.js
file:Note:
- In this document, the method to obtain UserSig is to configure a SECRETKEY in the client code. In this method, the SECRETKEY is vulnerable to decompilation and reverse engineering. Once your SECRETKEY is leaked, attackers can steal your Tencent Cloud traffic. Therefore, this method is only suitable for locally running a demo project and feature debugging.
- The correct
UserSig
distribution method is to integrate the calculation code ofUserSig
into your server and provide an application-oriented API. WhenUserSig
is needed, your application can send a request to the business server for a dynamicUserSig
. For more information, see How do I calculate UserSig on the server?.
In the demo directory, run the following commands in turn:
npm install
npm run serve
Open Chrome and visit http://localhost:8080/
. If the above steps are performed correctly, you will see the page below:
Enter a user ID, click Sign in, and select Audio.
Enter the user ID of the callee and click call.
Start the audio call.
TRTCCalling
componentNote:
- Since version 0.6.0, you need to manually install 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.
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);
trtcCalling.login({
userID,
userSig,
});
Caller: call a user
trtcCalling.call({
userID, // User ID
type: 1, // Call type. `0`: unknown; `1`: audio call; `2`: video call
timeout // Timeout threshold, in seconds
});
Callee: process a call invitation
// Answer
trtcCalling.accept();
// Reject
trtcCalling.reject()
Hang up
trtcCalling.hangup()
The TRTCCalling
component does not support login of multiple instances or offline signaling for the time being. Please make sure that your current login is unique.
Note:
- Multiple instances: A user logs in with the same account multiple times or on different devices, which disrupts signaling.
- Offline signaling: Only online instances can receive messages. Messages sent to offline instances will not be sent again when the instances go online.
For FAQs, see TRTCCalling for Web.
If you have other questions, you can fill out a contact form or email colleenyu@tencent.com.
Was this page helpful?