快速集成(小程序)

最近更新时间:2019-01-18 19:41:13

查看pdf

本文主要介绍如何快速地将腾讯云 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 域名