快速集成(小程序)

最近更新时间:2019-07-25 11:26:29

本文主要介绍如何快速地将腾讯云 TRTC 小程序 SDK 集成到您的项目中,只要按照如下步骤进行配置,就可以完成 SDK 的集成工作。

准备工作

在集成小程序 SDK 前,请确保您已完成以下步骤,详见 跑通Demo(小程序)

  • 创建了腾讯云实时音视频应用,购买了相应的套餐,并获取到SDKAppid。
  • 获取私钥文件。
  • 开通小程序类目与推拉流标签权限。
  • 小程序服务器域名配置。

开发环境要求

  • 最新版微信web开发者工具。
  • 小程序基础库最低版本要求:1.7.0。
  • 微信 App iOS 最低版本要求:6.5.21。
  • 微信 App Android 最低版本要求:6.5.19。

下载组件源码

您可以直接从 Github 上下载 SDK 源码压缩包,也可以通过 git clone 下载源码:

$ cd YOUR_PATH
$ git clone https://github.com/tencentyun/TRTCSDK.git

在目录 TRTCSDK/WXMini/pages/components 里包含了 <webrtc-room> 组件的源码。<webrtc-room> 标签是基于 <live-pusher> 和 <live-player> 实现的用于视频通话的小程序组件。

<webrtc-room> 组件的文件清单如下:

目录 说明
bigsmalltemplate 1v1大小画面布局模版
floattemplate 嵌套布局模版
gridtemplate 网格布局模版
config.js 常量配置
webim_wx.js WEBIM 小程序SDK
im_handler.js WEBIM 控制器
webrtc-room.js webrtc-room 组件主程序文件
webrtc-room.json webrtc-room 组件声明文件
webrtc-room.wxml webrtc-room 组件模版文件
webrtc-room.wxss webrtc-room 组件样式文件

集成组件

  • 把 webrtc-room 文件夹拷贝到您的小程序项目的 components 目录下(如果没有 components 文件夹则创建之)。

  • 在 Page.json 文件中添加如下代码,usingComponents 的作用是引用<webrtc-room> 组件。

    // Page.json 文件
    {
    "navigationBarTitleText": "视频通话",
    "usingComponents": {
      "webrtc-room": "/pages/components/webrtc-room/webrtc-room"
    }
    }
  • 在 Page.wxml 文件中添加如下代码,其作用是创建一个叫做 “myroom” 的<webrtc-room> 组件。

    // Page.wxml 文件
    <webrtc-room id="myroom"
      roomID="{{roomID}}"
      userID="{{userID}}"
      userSig="{{userSig}}"
      sdkAppID="{{sdkAppID}}"
      privateMapKey="{{privateMapKey}}"
      template="{{template}}"
      beauty="{{beauty}}"
      muted="{{muted}}"
      debug="{{debug}}"
      bindRoomEvent="onRoomEvent"
      enableIM="{{enableIM}}"
      bindIMEvent="onIMEvent">
    </webrtc-room>
  • 在 Page.js 文件中添加如下代码,其作用是操作<webrtc-room> 组件。

    // Page.js 文件
    Page({
      data: {
          //...
          roomID: '', // [必选]房间号,可以由您的服务指定
          userID: '', // [必选]用户 ID,可以由您的服务指定,或者使用小程序的 openid
          userSig: '', // [必选]身份签名,需要从自行搭建的签名服务获取
          sdkAppID: '', // [必选]开通实时音视频服务创建应用后分配的 sdkAppID
          template: 'float', // [必选]标识组件使用的界面模版,组件内置了 bigsmall,float,grid 三种布局
          privateMapKey: '', // 房间权限 key,需要从自行搭建的签名服务获取
                             // 如果您没有在【控制台】>【实时音视频】>【您的应用名称】>【帐号信息】中启用权限密钥,可不用填
          beauty: 3, // 美颜指数,取值 0 - 9,数值越大效果越明显
          muted: false, // true 静音 false 不静音
          debug: false, // true 打印推流 debug 信息 fales 不打印推流 debug 信息
          enableIM: false // 是否启用IM
          // 其他配置参数可查看 API 文档
      },
      // 标签通过 onRoomEvent 返回内部事件
      onRoomEvent: function(e){
          switch(e.detail.tag){
              case 'error': {
                  //发生错误
                  var code = e.detail.code;
                  var detail = e.detail.detail;
                  break;
              }
          }
      },
      // 通过 onIMEvent 返回 IM 消息事件,如果 enableIM 已关闭,则可以忽略 onIMEvent
      onIMEvent: function(e){
          switch(e.detail.tag){
              case 'big_group_msg_notify': 
                  //收到群组消息
                  console.debug( e.detail.detail )
                  break;
              case 'login_event': 
                  //登录事件通知
                  console.debug( e.detail.detail )
                  break;
              case 'connection_event': 
                  //连接状态事件
                  console.debug( e.detail.detail )
                  break;
              case 'join_group_event': 
                  //进群事件通知
                  console.debug( e.detail.detail )
                  break;
          }
      },
    
      onLoad: function (options) {
          // 这里需要调用签名服务获取 userSig 等签名信息
          // userSig 需要在您的业务服务器上计算,否则会泄露您的私钥从而造成安全隐患
          // userSig 的计算请阅读文档:https://cloud.tencent.com/document/product/647/17275
          let self = this;
          wx.request({
              url: '',  // 您的计算 usersig 的服务器地址
              data: {}, // 计算 usersig 所需要的参数,这里留空了,一般是需要带上 userid
                        // 因为 usersig 本质上就是对 userid 和一些信息做了一个 ECDH 签名
              method: 'POST',
              success: function (res) {
                  // HTTP 回包解析,此处代码仅仅是示例,正常情况下,应该可以解析出 userid,usersig 等信息
                 // 有了这些信息,我们就可以调用 webrtc-room 对象实例的 start 方法来启动组件了
                  self.setData({
                      userID: res.data.userID,
                      sdkAppID: res.data.sdkAppID,
                      roomID: res.data.roomID,
                      userSig: res.data.userSig, 
                      privateMapKey: res.data.privateMapKey // 房间权限 key,需要从自行搭建的签名服务获取
                    //如果您没有在【控制台】>【实时音视频】>【您的应用名称】>【帐号信息】中启用权限密钥,可不用填
                  }, function() {
                      var webrtcroomCom = self.selectComponent('#myroom');
                      if (webrtcroomCom) {
                          webrtcroomCom.start();
                      }
                  })
              },
              fail: function (res) {
                  console.error('请求失败');
              }
          });     
      }
    })

常见问题

1. 运行出错如何排查?

  • 请检查开通的小程序类目是否正确,推拉流标签在小程序控制台是否开启。
  • 如果使用官方 demo 运行可以,请参考此文档再重新部署一遍。
  • 依然不行可以提工单或客服电话(400-9100-100)联系我们。

2. 运行小程序进入多人音视频看不到画面?

  • 请确认使用手机来运行,微信开发者工具内部的模拟器目前还不支持直接运行。
  • 请确认小程序基础库版本 wx.getSystemInfo 可以查询到该信息,1.7.0 以上的基础库才支持音视频能力。
  • 请确认小程序所属的类目,由于监管要求,并非所有类目的小程序都开放了音视频能力,已支持的类目请参考 微信小程序官方文档
  • 如有更多需求,或希望深度合作,可以提工单或客服电话(400-9100-100)联系我们。

3. live-pusher、live-player标签使用及错误码参考

4. 如果需要上线或者部署正式环境怎么办?

  • 请申请域名并做备案
  • 请将服务端代码部署到申请的服务器上
  • 请将业务 server 域名、WebRTC 音视频鉴权服务域名、推流域名及 IM 域名配置到小程序控制台 request 合法域名里面:
域名 说明
https://official.opensso.tencent-cloud.com WebRTC 音视频鉴权服务域名
https://yun.tim.qq.com WebRTC 音视频鉴权服务域名
https://cloud.tencent.com 推流域名
https://webim.tim.qq.com IM 域名