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