场景实践

实时语音通话(小程序)

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

效果展示

主动呼叫被叫接听

如需快速实现语音的通话功能,您可以直接基于我们提供的 Demo 进行修改适配,也可以使用我们提供的 TRTCCalling 组件并实现自定义 UI 界面。

环境要求

  • 微信 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 的 UI 界面

步骤1:创建新的应用

  1. 登录实时音视频控制台,选择【开发辅助】>【快速跑通Demo】。
  2. 输入应用名称,例如 TestVideoCall ,单击【创建】。
注意:

本功能同时使用了腾讯云 实时音视频 TRTC即时通信 IM 两个基础 PaaS 服务,开通实时音视频后会同步开通即时通信 IM 服务。 即时通信 IM 属于增值服务,详细计费规则请参见 即时通信 IM 价格说明

步骤2:下载 SDK 和 Demo 源码

  1. 根据实际业务需求下载 SDK 及配套的 Demo 源码。
  2. 下载完成后,单击【已下载,下一步】。

步骤3:配置 Demo 工程文件

  1. 进入修改配置页,根据您下载的源码包,选择相应的开发环境。
  2. 找到并打开 ./debug/GenerateTestUserSig.js 文件。
  3. 设置 GenerateTestUserSig.js 文件中的相关参数:
    • SDKAPPID:默认为0,请设置为实际的 SDKAppID。
    • SECRETKEY:默认为空字符串,请设置为实际的密钥信息。
  4. 粘贴完成后,单击【已复制粘贴,下一步】即创建成功。
  5. 编译完成后,单击【回到控制台概览】即可。
注意:

  • 本文提到的生成 UserSig 的方案是在客户端代码中配置 SECRETKEY,该方法中 SECRETKEY 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通 Demo 和功能调试
  • 正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向 App 的接口,在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig

步骤4:编译运行

  1. 打开微信开发者工具,选择【小程序】,单击新建图标,选择【导入项目】。
  2. 填写您微信小程序的 AppID,单击【导入】。
    注意:

    此处应输入您微信小程序的 AppID,而非 SDKAppID。

  3. 单击【预览】,生成二维码,通过手机微信扫码二维码即可进入小程序。
    说明:

    小程序 <live-player> 和 <live-pusher> 标签需要在手机微信上才能使用,微信开发者工具上无法使用。为了小程序能够使用腾讯云房间管理服务,您需要在手机微信上开启调试功能:手机微信扫码二维码后,单击右上角【...】>【打开调试】。

修改组件模版 UI

小程序的实时音视频能力依赖 live-pusherlive-player 这两个小程序的原生组件,如果您需要定制化自己的 UI 界面,可以修改 components/TRTCCalling/template/audio-template 下的文件,根据您的业务场景进行修改。

搭建自己的视频通话

  1. 复制 TRTCCalling 到 components 文件。
  2. 添加组件到对应 page。
    {
      "usingComponents": {
        "TRTCCalling": "../../components/TRTCCalling/TRTCCalling",
    }
            <TRTCCalling 
          id="TRTCCalling-component"
          config="{{trtcConfig}}"
          backgroundMute="{{true}}"
        ></TRTCCalling>
    trtcConfig = {
      sdkAppID: 0, // 开通实时音视频服务创建应用后分配的 SDKAppID
      userID: 'test_user_001', // 用户 ID,可以由您的帐号系统指定
      userSig: 'xxxxxxxxxxxx', // 身份签名,相当于登录密码的作用
      type: 2, // 通话模式
    }
  3. 初始化 TRTCCalling 组件。
      // 将初始化后到TRTCCalling实例注册到this.TRTCCalling中,this.TRTCCalling 可使用TRTCCalling所以方法功能。
      this.TRTCCalling = this.selectComponent('#TRTCCalling-component');
      // 登录TRTCCalling
      this.TRTCCalling.login();
  4. 进行通话。
    • 主叫方:呼叫某个用户
      this.TRTCCalling.call({ userID: this.data.userId, type:2})
    • 被呼叫方:接受新的呼叫
      TRTCCalling 组件已实现被呼叫方接听页面功能,如果您需要定制化自己的 UI 界面,可以修改 components/TRTCCalling/template/calling-template 下的文件,根据您的业务场景进行修改。
  5. 退出页面,退出登录。
        // 退出登录
        this.TRTCCalling.logout();

组件 API 列表

TRTCCalling 组件的 API 接口列表如下:

接口函数 接口功能
login 登录 IM,所有功能需要先进行登录后才能使用
logout 登出 IM,登出后无法再进操作
call C2C 邀请通话,被邀请方会收到 INVITED 的通知
groupCall IM 群组邀请通话,被邀请方会收到 INVITED 的通知
accept 作为被邀请方接听来电
reject 作为被邀请方拒绝来电
hangup 结束通话
setMicMute 是否静音 mic
setHandsFree 是否开启免提
目录