Implementation idea and solution of calling global monitoring for applet

explain

Ben demo Is based on Tencent cloud calling Applet The related logic is modified to realize global listening , After receiving the invitation signal, jump to the specified page （ This page has registered TUICalling Components ） Perform component initialization , It is recommended to know the official website before using demo Related documents of , I won't explain more here , If you think this article is helpful to you, please give me a compliment ！

Global monitoring effect display

Answer .gif

Hang up .gif

be based on calling Modification description of components

The implementation idea of global monitoring is based on the original calling Based on the component, the signaling is put into app.js file , And in appLaunch Realize the listening of invitation signaling , Process the invitation event after listening to the invitation event , And set the required parameters to globalData When it is convenient to get , Then jump to the page initialization component to handle the invitation event , Besides, I didn't leave because of the invitation TRTCDelegate, Therefore, hang up events are handled separately by signaling , Due to the hurry of time , So this demo Only ideas and references are provided

Mind mapping

Change your mind .png

project demo GitHub Address gate

Modify the code of the point part

1. app.js Import signaling related files

import TSignaling from './components/TUICalling/TRTCCalling/node\_module/tsignaling-wx'

import TSignalingClient from './components/TUICalling/TRTCCalling/TSignalingClient'

import TIM from './components/TUICalling/TRTCCalling/node\_module/tim-wx-sdk'

import { CALL\_STATUS } from './components/TUICalling/TRTCCalling/common/constants'

1. Set the required global parameters

      userInfo: null,

      headerHeight: 0,

      statusBarHeight: 0,

      sdkAppID: Signature.sdkAppID,

      userID: '',

      userSig: '',

      token: '',

      expiresIn: '',

      phone: '',

      sessionID: '',

      callStatus: CALL\_STATUS.IDLE, //  Current call status of the user 

      callType: 1,

      callEvent: null,

      inviteId: '',

      inviteID: '',

      inviter: '',

      roomID: '',

      isSponsor: false,

      \_connectUserIDList: [],

      \_isGroupCall: false,

      \_groupID: '',

      \_unHandledInviteeList: [],

      inviteData: null,

      inviteeList: []

1. Signaling initialization and listening

    wx.$TIM = TIM.create({SDKAppID: Signature.sdkAppID})

    wx.$TSignaling = new TSignaling({SDKAppID: Signature.sdkAppID, tim: wx.$TIM})

    wx.TSignalingClient = new TSignalingClient({ TSignaling: wx.$TSignaling })

      //  New invitation callback event 

      wx.$TSignaling.on(TSignaling.EVENT.NEW\_INVITATION\_RECEIVED, this.handleNewInvitationReceived, this);

      // SDK Ready  Callback 

      wx.$TSignaling.on(TSignaling.EVENT.SDK\_READY, this.handleSDKReady, this);

      //  Kicked offline 

      wx.$TSignaling.on(TSignaling.EVENT.KICKED\_OUT, this.handleKickedOut, this);

1. Invitation event handling

 handleNewInvitationReceived(event) {

    console.log(TAG\_NAME, 'onNewInvitationReceived', event);

    const { data: { inviter, inviteeList, data, inviteID, groupID } } = event

    const inviteData = JSON.parse(data)

    wx.$globalData.inviteData = inviteData

    wx.$globalData.inviteeList = inviteeList

    //  Judge here inviteeList.length  Greater than 2, It is used to judge multi person calls in non group situations 

    // userIDs  For synchronization  native  No... In use  groupID  Judgment basis for group chat 

    const isGroupCall = groupID || inviteeList.length >= 2 || inviteData.data && inviteData.data.userIDs && inviteData.data.userIDs.length >= 2 ? true : false

    let callEnd = false

    //  The logic here is used for invite Signaling 

    //  When the group call has ended ,room\_id  Nonexistence or  call\_end  by  0

    if (isGroupCall && (!inviteData.room\_id || (inviteData.call\_end && inviteData.call\_end === 0))) {

      callEnd = true

    }

    // 1v1 When hanging up , Notify the end and duration of the call at the opposite end 

    if (!isGroupCall && inviteData.call\_end >= 0) {

      callEnd = true

    }

    if(callEnd) {

      return

    }

    if(wx.$globalData.callStatus === CALL\_STATUS.CALLING || wx.$globalData.callStatus === CALL\_STATUS.CONNECTED) {

      wx.$TSignaling.reject({ inviteID, type: data.call\_type, lineBusy: 'line\_busy' })

      return

    }

    const callInfo = {

      \_isGroupCall: !!isGroupCall,

      \_groupID: groupID || '',

      \_unHandledInviteeList: [...inviteeList, inviter],

    }

    if (isGroupCall && !groupID) {

      callInfo.\_unHandledInviteeList = [...inviteData.data.userIDs]

    }

    wx.$globalData.callStatus = CALL\_STATUS.CALLING

    wx.$globalData.callType = inviteData.call\_type

    wx.$globalData.inviteID = inviteID

    wx.$globalData.inviter= inviter

    wx.$globalData.roomID = inviteData.room\_id

    wx.$globalData.isSponsor = false

    wx.$globalData.\_connectUserIDList = [inviter]

    wx.$globalData.\_isGroupCall = callInfo.\_isGroupCall

    wx.$globalData.\_groupID = callInfo.\_groupID

    wx.$globalData.\_unHandledInviteeList = callInfo.\_unHandledInviteeList

    wx.$globalData.callEvent = event

    wx.navigateTo({

      url: '/pages/calling/calling', //  Page to jump to 

    })

  }

1. Jump page introduction TUICalling Components

    <TUICalling

    id="TUICalling-component"

    config="{{config}}"

  ></TUICalling>

1. Specify page onLoad Method to initialize and process components

   const config = {

      sdkAppID: wx.$globalData.sdkAppID,

      userID: wx.$globalData.userID,

      userSig: wx.$globalData.userSig

      }

      this.setData({

      config: { ...this.data.config, ...config },

      }, () => {

      this.TUICalling = this.selectComponent('#TUICalling-component')

      this.TUICalling.init()

      wx.$globalData.callStatus === CALL\_STATUS.CALLING && this.TUICalling.handleNewInvitationReceived(wx.$globalData.callEvent)

      }) 

1. TUICalling.js Invitation event handling

 //  New invitation callback event 

    handleNewInvitationReceived(event) {

      console.log(`${TAG\_NAME}, handleNewInvitationReceived`, event)

      this.data.config.type = wx.$globalData.callType

      this.getUserProfile([event.data.inviter || event.data.sponsor])

      this.setData({

        config: this.data.config,

        callStatus: 'calling',

        isSponsor: false,

      })

    }

1. Hang up as the inviting party

    /\*\*

     \*  When you receive a callback as the invitee , You can call this function to reject an incoming call 

     \*/

    async reject() {

      console.log(`${TAG\_NAME}, reject`)

      const inviteID = wx.$globalData.inviteID

      const data = wx.$globalData.callEvent.data

      wx.$TSignaling.reject({

        inviteID,

        data: JSON.stringify(data)

      }).then(res => {

        this.triggerEvent('sendMessage', {

          message: res.data.message,

        })

      })