社区首页 >专栏 >小程序Calling 全局监听实现思路和解决方案

小程序Calling 全局监听实现思路和解决方案

原创

良人

修改于 2022-01-28 18:00:57

2.4K3

说明

本demo是基于腾讯云calling小程序修改了相关逻辑来实现全局监听，在收到邀请信令后跳转到指定页面（该页面注册了TUICalling组件）进行组件初始化，使用前建议先了解官网demo的相关文档，这里就不多做说明，如果觉得这篇文章对你有帮助麻烦点个赞！

全局监听效果展示

基于calling组件的修改说明

全局监听的实现思路就是在原有calling组件的基础上将信令放到了app.js文件，并在appLaunch实现邀请信令的监听，监听到邀请事件后处理邀请事件，并且把需要的参数设置为globalData方便取的时候获取，然后跳转页面初始化组件处理邀请事件，此外由于邀请没有走TRTCDelegate,所以挂断事件也是用信令单独处理的，由于时间比较催促，所以本demo仅提供思路和参考

思维导图

项目demo GitHub地址传送门

修改点部分代码

app.js 引入信令相关文件

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'

设置需要的全局参数

      userInfo: null,

      headerHeight: 0,

      statusBarHeight: 0,

      sdkAppID: Signature.sdkAppID,

      userID: '',

      userSig: '',

      token: '',

      expiresIn: '',

      phone: '',

      sessionID: '',

      callStatus: CALL\_STATUS.IDLE, // 用户当前的通话状态

      callType: 1,

      callEvent: null,

      inviteId: '',

      inviteID: '',

      inviter: '',

      roomID: '',

      isSponsor: false,

      \_connectUserIDList: [],

      \_isGroupCall: false,

      \_groupID: '',

      \_unHandledInviteeList: [],

      inviteData: null,

      inviteeList: []

信令初始化和监听

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

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

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

      // 新的邀请回调事件

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

      // SDK Ready 回调

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

      // 被踢下线

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

邀请事件处理

 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

    // 此处判断inviteeList.length 大于2，用于在非群组下多人通话判断

    // userIDs 为同步 native 在使用无 groupID 群聊时的判断依据

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

    let callEnd = false

    // 此处逻辑用于通话结束时发出的invite信令

    // 群通话已结束时，room\_id 不存在或者 call\_end 为 0

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

      callEnd = true

    }

    // 1v1通话挂断时，通知对端的通话结束和通话时长

    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', // 需要跳转的页面

    })

  }

跳转的页面引入 TUICalling 组件

    <TUICalling

    id="TUICalling-component"

    config="{{config}}"

  ></TUICalling>

指定页面onLoad方法进行组件初始化和处理

   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)

      })

TUICalling.js 邀请事件处理

 // 新的邀请回调事件

    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,

      })

    }

作为邀请方挂断处理

    /\*\*

     \* 当您作为被邀请方收到的回调时，可以调用该函数拒绝来电

     \*/

    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,

        })

      })

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

实时音视频