Based on TRTC and TSignaling, the TRTCCalling SDK encapsulates an easy-to-use API that can quickly realize 1V1 or group real-time communication between Web and Native.
Results show
- Group video call
- Voice calls
Online experience
Webim-1252463788.file.myqcloud.com/demo/index….
1) After registering and logging in, create an IM group, add others to the group, open the chat window, and click real-time audio and video selection (voice or video call).
2) Select the user list and click OK to initiate a real-time call.
3) Call interface
5) Call interface
- Video call
- Voice calls
Use TRTCCalling to implement 1V1 and group real-time calls
Step 1: Register the IM application and enable the TRTC service
Log in to the IM console and click the application card to access the basic configuration page of the application. Click “Open now” in the “Open Tencent Real-time audio and video Service” area. In the dialog box that is displayed, click Ok. The system creates a real-time audio and video application with the same SDKAppID as the current IM application on the real-time audio and video console. The accounts and authentication of the two applications can be reused.
Step 2: Connect to the SDK and initialize the instance
- Install the latest version of tim-JS-SDK, TSignaling, trTC-calling-js through NPM in the project. If the project already integrates tim-jS-SDK or TRTC-calling-JS, simply upgrade it to the latest version.
npm i tim-js -- save
npm i trtc-js-sdk --save
npm i tsignaling --save
npm i trtc-calling-js --save
Copy the code
- Introduce trtcCalling into your project
import TRTCCalling from 'trtc-calling-js'
Vue.prototype.trtcCalling = TRTCCalling
let options = {
SDKAppID: 0 // Replace 0 with the SDKAppID of your cloud communication application
}
const trtcCalling = new TRTCCalling(options)
Copy the code
- If you need to import the script label as an external link, copy tim-js.js, tsignaling. Js, and trTC-calling-js. js to the project and import them in sequence.
<script src="./tim-js.js"></script>
<script src="./trtc-js-sdk.js"></script>
<script src="./tsignaling.js"></script>
<script src="./trtc-calling-js.js"></script>
Copy the code
Step 3: Register the listener function and log in
// An error occurred within the SDK
trtcCalling.on(this.TRTCCalling.EVENT.ERROR, this.onError)
// Be invited to make a call
trtcCalling.on(this.TRTCCalling.EVENT.INVITED,this.onInvited)
// The remote user agrees to enter the call
trtcCalling.on(this.TRTCCalling.EVENT.USER_ENTER, this.onUserEnter)
// The remote user exits the call
trtcCalling.on(this.TRTCCalling.EVENT.USER_LEAVE, this.onUserLeave)
// The invited party refuses the call
trtcCalling.on(this.TRTCCalling.EVENT.REJECT, this.onReject)
// The line is busy
trtcCalling.on(this.TRTCCalling.EVENT.LINE_BUSY, this.onInviteeLineBusy)
// The inviter cancels the call invitation and receives it as the invitee
trtcCalling.on(this.TRTCCalling.EVENT.CALLING_CANCEL,this.onCallingCancel)
// Was kicked out of im system because of multi-instance login or multi-terminal login
trtcCalling.on(this.TRTCCalling.EVENT.KICKED_OUT, this.onKickedOut)
/ / timeout
trtcCalling.on(this.TRTCCalling.EVENT.CALLING_TIMEOUT,this.onCallingTimeout)
The peer end does not respond after the invitation
trtcCalling.on(this.TRTCCalling.EVENT.NO_RESP, this.onNoResp)
// This call is over
trtcCalling.on(this.TRTCCalling.EVENT.CALLING_END, this.onCallingEnd)
// The remote user enabled/disabled the camera
trtcCalling.on(this.TRTCCalling.EVENT.USER_VIDEO_AVAILABLE, this.onUserVideoAvailable)
// The remote user enabled/disabled the microphone
trtcCalling.on(this.TRTCCalling.EVENT.USER_AUDIO_AVAILABLE, this.onUserAudioAvailable)
trtcCalling.login({
userID,
userSig,
})
Copy the code
Step 4 initiate a 1v1 or multi-party call
// Initiate a 1V1 video call
trtcCalling.call({
userID: 'user1'.// Invitee userID
type: 2.Call type: 0- Unknown, 1- voice call, 2- video call
timeout: 0 // Invite timeout, in seconds
})
// Initiate a group video call
trtcCalling.groupCall({
userIDList: ['user1'.'user2'].// List of invitees
type: 2.Call type: 0- Unknown, 1- voice call, 2- video call
groupID: 'group ID'./ / IM group ID
timeout: 0 // Invite timeout, in seconds
})
Copy the code
Step 5: Accept, reject, hang up
/ / answer
trtcCalling.accept({
inviteID, // Invitation ID, which identifies an invitation
roomID, // Call room ID
callType //0- Unknown, 1- voice call, 2- video call
});
/ / deny
trtcCalling.reject({
inviteID, // Invitation ID, which identifies an invitation
isBusy:false.// Whether the line is busy
callType //0- Unknown, 1- voice call, 2- video call
});
/ / hang up
trtcCalling.hangup();
Copy the code
SDK event details
TRTCCalling.EVENT.INVITED
- Triggered when the invitee receives a voice or video invitation
trtcCalling.on(TRTCCalling.EVENT.INVITED, function(payload) {
payload.sponsor / / the inviter
payload.userIDList // List of invitees
//to do Displays the video call invitation interface
});
Copy the code
TRTCCalling.EVENT.USER_ENTER
- The invitee agrees to enter the call
Create the call callingUserList in this callback// Call participants, not including myself
trtcCalling.on(TRTCCalling.EVENT.USER_ENTER, function({ userID }) {
//userID User who enters the call
//to do Displays the video call screen
startLocalView() // Render the local preview screen
startRemoteView(userID) // Render the remote video screen
if (this.callingUserList.indexOf(userID) === -1) {
this.callingUserList.push(userID)
}
});
Copy the code
TRTCCalling.EVENT.USER_LEAVE
- User Leaves a call
// Remove the callingUserList from the list of participating calls
trtcCalling.on(TRTCCalling.EVENT.USER_LEAVE, function({ userID }) {
//userID:userID indicates the user who leaves the call
const index = this.callingUserList.findIndex(item= > item === userID)
if (index >= 0) {
this.callingUserList.splice(index, 1)}});Copy the code
TRTCCalling.EVENT.REJECT
- The invitee refuses to talk
//invitedUserList invitedUserList
trtcCalling.on(TRTCCalling.EVENT.REJECT, function({ userID }) {
// userID Indicates the user who refuses the call
if (this.userID === this.sponsor) { // The user is the inviter
const _index = this.invitedUserList.indexOf(userID)
if (_index >= 0) {
this.invitedUserList.splice(_index, 1)}this.$store.commit('showMessage', {message: `${userID}Refuse to talk '}}}));Copy the code
TRTCCalling.EVENT.LINE_BUSY
- The invitee is busy
trtcCalling.on(TRTCCalling.EVENT.LINE_BUSY, function({ sponsor, userID }) {
/ / sponsor invitation
//userID Busy user
//case: A calls B,B is busy,B refuses to talk, and B does not process the call when A receives the notification that XXX is busy
if( sponsor === this.userID ) { // The user is the inviter
const _index = this.invitedUserID.indexOf(userID)
if (_index >= 0) {
this.invitedUserID.splice(_index, 1)}this.$store.commit('showMessage', {message: `${userID}It was busy `}}}));Copy the code
TRTCCalling.EVENT.CALLING_TIMEOUT
- This call timed out and there is no answer
// When I receive the signaling indicating timeout of the peer end or when I am the invited party but timeout occurs, I notify the upper layer that the call has timed out
// case: User A makes A call to user B. User B is online, but user B does not respond due to timeout
trtcCalling.on(TRTCCalling.EVENT.CALLING_TIMEOUT, function({ sponsor, userIDList }) {
// Sponsor sponsor
// userIDList List of users that have timed out
if( sponsor === this.userID ) { // The user is the inviter
userIDList.forEach((userID) = >{
const _index = this.invitedUserID.indexOf(userID)
if (_index >= 0) {
this.invitedUserID.splice(_index, 1)}this.$store.commit('showMessage', {message: `${userID}Timeout did not respond '})})return
}
// The user is an invitee,
//to do Closes the invited call screen
});
Copy the code
TRTCCalling.EVENT.CALLING_END
- Receiving the callback indicates that the call ends
trtcCalling.on(TRTCCalling.EVENT.CALLING_END, function({ userID, callEnd }) {
/ / userID inviter
//callEnd Call duration
//to do Closes the call screen
})
Copy the code
TRTCCalling.EVENT.USER_VIDEO_AVAILABLE
- The remote user will receive the callback if the camera is enabled or disabled
trtcCalling.on(TRTCCalling.EVENT.USER_VIDEO_AVAILABLE, function({ userID: string, isVideoAvailable: boolean }) {
//userID ID of a remote user
//to do Changes the display status of the remote user camera
//isVideoAvailable True: enable the camera for the remote user false: disable the camera for the remote user
})
Copy the code
TRTCCalling.EVENT.USER_AUDIO_AVAILABLE
- If the microphone is enabled or disabled, the remote user receives the callback
trtcCalling.on(TRTCCalling.EVENT.USER_AUDIO_AVAILABLE, function({ userID: string, isAudioAvailable: boolean }) {
//userID ID of a remote user
//to do Changes the display status of the remote user's microphone
//isAudioAvailable True: enable the microphone for the remote user false: disable the microphone for the remote user
})
Copy the code
In order for developers to access it quickly, we have provided Demo, which supports single chat and group voice and video calling components, on the basis of TRTCCalling SDK, and opened source to Github. Fork&clone can be used locally by developers who make modifications to run demos or integrate components into their own projects.
Matters needing attention
- Listening events must be in the index file to avoid calls missing events distributed by the SDK
- If an invitee goes offline and goes online again within the invitation timeout period, the invitee cannot receive the invitation. Currently, the web only supports online invitations.
References:
-
TRTCCalling Interface Manual
-
Live Video Call (Desktop Browser)
-
TSignaling Interface manual
-
Tencent Cloud IM Online Demo address:
-
Tencent cloud IM online Demo open source address Github