跑通通话模式(小程序)

最近更新时间:2021-08-19 11:58:03

本文主要介绍腾讯云 TRTC SDK 的几个最基本功能的使用方法,阅读此文档有助于您对 TRTC 的基本使用流程有一个简单的认识。

环境要求

  • 微信 App iOS 最低版本要求:7.0.9。
  • 微信 App Android 最低版本要求:7.0.8。
  • 小程序基础库最低版本要求:2.10.0。
  • 由于微信开发者工具不支持原生组件(即 <live-pusher> 和 <live-player> 标签),需要在真机上进行运行体验。
  • 由于小程序测试号不具备 <live-pusher> 和 <live-player> 的使用权限,需要申请常规小程序账号进行开发。
  • 不支持 uniapp 开发环境,请使用原生小程序开发环境。

前提条件

  1. 您已 注册腾讯云 账号,并完成 实名认证
  2. 开通小程序类目与推拉流标签权限(如不开通则无法正常使用)
    出于政策和合规的考虑,微信暂未放开所有小程序对实时音视频功能(即 <live-pusher> 和 <live-player> 标签)的支持:
    • 小程序推拉流标签不支持个人小程序,只支持企业类小程序。
    • 小程序推拉流标签使用权限暂时只开放给有限 类目
    • 符合类目要求的小程序,需要在【微信公众平台】>【开发】>【开发管理】>【接口设置】中自助开通该组件权限,如下图所示:

准备工作

在使用基本功能前,请确保您已完成以下步骤,详情请参见 跑通Demo(小程序)快速集成(小程序)

  • 创建了腾讯云实时音视频应用,购买了相应的套餐,并获取到 SDKAppID 和密钥信息。
  • 开通小程序类目与推拉流标签权限。
  • 小程序服务器域名配置。
  • 在您的小程序项目中集成 <trtc-calling> 组件。

部署签名服务

在初始化组件时需要签名服务进行签发 UserSig,详情请参见 如何计算 UserSig

组装参数

参数准备

要使用 <trtc-calling> 组件,必须准备好如下参数:

  • SDKAppID
    进入腾讯云实时音视频 控制台 创建一个新的应用,获得 SDKAppID。
  • UserID
    UserID为字符串类型,您可以自定义指定。例如,直接与您现有的账号体系保持一致,或直接使用小程序的 openid。
    注意:

    同一个音视频房间里不能存在两个相同的 userID

  • UserSig
    基于 SDKAppID 和 UserID 可以计算出 UserSig,计算方法请参见 如何计算 UserSig

TRTCCalling 属性

属性 类型 默认值 必填 说明
id String - 绑定 TRTCCalling 的 DOM ID,可通过 this.selectComponent(ID) 获取实例
config Object - TRTCCalling 初始化配置
backgroundMute Boolean false 进入后台时是否保持音频通话,true 保持、false 挂断

config 参数

参数 类型 必填 说明
sdkAppID Number 开通实时音视频服务创建应用后分配的 SDKAppID
userID String 用户 ID,可以由您的帐号体系指定
userSig String 身份签名(即相当于登录密码),由 userID 计算得出,具体计算方法请参见 如何计算 UserSig
type Number 指定通话类型。1:语音通话,2:视频通话

集成组件

  1. 在需要引入组件的页面目录下,配置相应页面的 xxx.json 文件。
    // index.json
    "usingComponents": {
      "TRTCCalling": "../../components/TRTCCalling/TRTCCalling",
    }
  2. 在相应页面的 xxx.wxml 文件中使用标签。
    // index.wxml
        <TRTCCalling 
            id="TRTCCalling-component"
            config="{{trtcConfig}}"
            backgroundMute="{{true}}"
        ></TRTCCalling>

登录

设置 <trtc-calling> 组件的属性后,获取 <trtc-calling> 组件的对象实例,并调用对象实例的 login() 方法即可完成初始化。

Page({
    // ...
    data: {
        trtcConfig: {
            sdkAppID: 0, // 开通实时音视频服务创建应用后分配的 SDKAppID
            userID: 'test_user_001', // 用户 ID,可以由您的帐号系统指定
            userSig: 'xxxxxxxxxxxx', // 身份签名,相当于登录密码的作用
            type: 2, // 通话模式
        },
    },
    /**
    * 生命周期函数--监听页面加载
    */
    onLoad: function (options) {
        // 将初始化后到TRTCCalling实例注册到this.TRTCCalling中,this.TRTCCalling 可使用TRTCCalling所以方法功能。
        this.TRTCCalling = this.selectComponent('#TRTCCalling-component');
        // 绑定需要监听到事件
        this.bindTRTCCallingRoomEvent();
        // 登录TRTCCalling
        this.TRTCCalling.login();
    },
    /**
    * 生命周期函数--监听页面卸载
    */
    onUnload: function () {
        // 取消监听事件
        this.unbindTRTCCallingRoomEvent();
        // 退出登录
        this.TRTCCalling.logout();
    },
    invitedEvent() {
        console.log('收到邀请')
    },

    hangupEvent() {
        console.log('挂断')
    },

    rejectEvent() {
        console.log('对方拒绝')
    },

    userLeaveEvent() {
        console.log('用户离开房间')
    },

    onRespEvent() {
        console.log('对方无应答')
    },

    callingTimeoutEvent() {
        console.log('无应答超时')
    },

    lineBusyEvent() {
        console.log('对方忙线')
    },

    callingCancelEvent() {
        console.log('取消通话')
    },

    userEnterEvent() {
        console.log('用户进入房间')
    },

    callEndEvent() {
        console.log('通话结束')
    },

    // 绑定 TRTCCalling
    bindTRTCCallingRoomEvent: function() {
        const TRTCCallingEvent = this.TRTCCalling.EVENT
        this.TRTCCalling.on(TRTCCallingEvent.INVITED, this.invitedEvent)
        // 处理挂断的事件回调
        this.TRTCCalling.on(TRTCCallingEvent.HANG_UP, this.hangupEvent)
        this.TRTCCalling.on(TRTCCallingEvent.REJECT, this.rejectEvent)
        this.TRTCCalling.on(TRTCCallingEvent.USER_LEAVE, this.userLeaveEvent)
        this.TRTCCalling.on(TRTCCallingEvent.NO_RESP, this.onRespEvent)
        this.TRTCCalling.on(TRTCCallingEvent.CALLING_TIMEOUT, this.callingTimeoutEvent)
        this.TRTCCalling.on(TRTCCallingEvent.LINE_BUSY, this.lineBusyEvent)
        this.TRTCCalling.on(TRTCCallingEvent.CALLING_CANCEL, this.callingCancelEvent)
        this.TRTCCalling.on(TRTCCallingEvent.USER_ENTER, this.userEnterEvent)
        this.TRTCCalling.on(TRTCCallingEvent.CALL_END, this.callEndEvent)
    },
    // 取消 TRTCCalling 监听事件
    unbindTRTCCallingRoomEvent() {
        const TRTCCallingEvent = this.TRTCCalling.EVENT
        this.TRTCCalling.off(TRTCCallingEvent.INVITED, this.invitedEvent)
        this.TRTCCalling.off(TRTCCallingEvent.HANG_UP, this.hangupEvent)
        this.TRTCCalling.off(TRTCCallingEvent.REJECT, this.rejectEvent)
        this.TRTCCalling.off(TRTCCallingEvent.USER_LEAVE, this.userLeaveEvent)
        this.TRTCCalling.off(TRTCCallingEvent.NO_RESP, this.onRespEvent)
        this.TRTCCalling.off(TRTCCallingEvent.CALLING_TIMEOUT, this.callingTimeoutEvent)
        this.TRTCCalling.off(TRTCCallingEvent.LINE_BUSY, this.lineBusyEvent)
        this.TRTCCalling.off(TRTCCallingEvent.CALLING_CANCEL, this.callingCancelEvent)
        this.TRTCCalling.off(TRTCCallingEvent.USER_ENTER, this.userEnterEvent)
        this.TRTCCalling.off(TRTCCallingEvent.CALL_END, this.callEndEvent)
    },
    // ...
})

进行通话

通过组件实例的 API call() 即可开始通话。type: 1:语音通话,2: 视频通话

Page({
    // ...
    call: function() {
        this.TRTCCalling.call({ userID: this.data.userId, type:2})
    },
    // ...
})

目录