场景实践

实时视频通话(小程序)

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

效果展示

主动呼叫被叫接听

如需快速实现视频通话功能,您可以直接基于我们提供的 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/video-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 结束通话
startRemoteView 开始渲染某个远端用户的视频数据
stopRemoteView 停止渲染某个远端用户的视频数据
openCamera 开启摄像头,并渲染在指定的 TXCloudVideoView 中
closeCamera 关闭摄像头
switchCamera 切换前后摄像头
setMicMute 是否静音 mic
setHandsFree 是否开启免提
目录