从零开始创建一个超简单的TRTC音视频通讯程序(小程序篇)

原创

F颜

修改于 2020-06-18 18:01:22

1.9K0

修改于 2020-06-18 18:01:22

文章被收录于专栏：跟颜哥学习云开发跟颜哥学习云开发

1、前置条件

1.1、开通小程序类目与推拉流标签权限

出于政策和合规的考虑，微信暂未放开所有小程序对实时音视频功能（即 <live-pusher> 和 <live-player> 标签）的支持：

小程序推拉流标签不支持个人小程序，只支持企业类小程序。
小程序推拉流标签使用权限暂时只开放给有限类目。
符合类目要求的小程序，需要在【微信公众平台】>【开发】>【接口设置】中自助开通该组件权限，如下图所示：

1.2、通过控制台创建应用

进入腾讯云实时音视频控制台创建一个新的应用，获得sdkAppId并记录

点击快速上手，查看秘钥，复制秘钥

2、下载SDK并配置

2.1、下载SDK

2.2、创建小程序

2.3、安装和配置trtc-room插件

导入components目录下的trtc-room插件（没有则导入整个components）和debug目录

此时，trtc-room组件已经安装好了。

3、开始写代码

此时，准备工作已经做好，可以开启我们所熟悉的写代码环节了。

第一步，在json配置文件中引入组件(index.json为例)

"usingComponents": {
    "trtc-room": "/components/trtc-room/trtc-room"
}

第二步，准备好音视频容器(index.wxml为例)

<trtc-room id="trtcroom" config="{{trtcConfig}}"></trtc-room>

第三步，生成签名(UserSig)

客户端生成(index.js为例) 步骤2中debug目录下有生成签名的工具类

修改GenerateTestUserSig.js中的配置

const SDKAPPID = 11111111111//修改为步骤一记录的sdkAppId

const SECRETKEY = '7121aa26ae13903038061gh393fd7e42235589c97ce99c115411cb6253237506'//第一步记录的密钥

引入签名生成工具类并生成UserSig(index.js为例)

import{ genTestUserSig }from'../../../debug/GenerateTestUserSig.js'//咱们在需要在js文件中引用它

//这里接第四步代码

第四步，建立连接并使用(index.js为例)

如下代码所示，暂时在代码里写死用户ID和房间号，以作测试。

Page({
  data: {
    trtcConfig:{
      sdkAppID: '',  // 开通实时音视频服务创建应用后分配的 SDKAppID
      userID: '', // 用户 ID，可以由您的帐号系统指定
      userSig: '', // 身份签名，相当于登录密码的作用
      template: '', // 画面排版模式
    }
  },
  //事件处理函数
  bindViewTap: function() {
    
  },
  onLoad: function () {
    let userID = 'test';//测试用户test
    const Signature = genTestUserSig(userID);
    this.setData({
      trtcConfig: {
        sdkAppID: Signature.sdkAppID,  // 开通实时音视频服务创建应用后分配的 SDKAppID
        userID: userID, // 用户 ID，可以由您的帐号系统指定
        userSig: Signature.userSig, // 身份签名，相当于登录密码的作用
        template: 'grid',        // 画面排版模式
      }
    }, () => {
      let trtcRoomContext = this.selectComponent('#trtcroom')
      let EVENT = trtcRoomContext.EVENT

      if (trtcRoomContext) {
        trtcRoomContext.on(EVENT.LOCAL_JOIN, (event) => {
          // 进房成功后发布本地音频流和视频流 
          trtcRoomContext.publishLocalVideo()
          trtcRoomContext.publishLocalAudio()
        })
        // 监听远端用户的视频流的变更事件
        trtcRoomContext.on(EVENT.REMOTE_VIDEO_ADD, (event) => {
          // 订阅（即播放）远端用户的视频流
          let userID = event.data.userID
          let streamType = event.data.streamType// 'main' or 'aux'            
          trtcRoomContext.subscribeRemoteVideo({ userID: userID, streamType: streamType })
        })

        // 监听远端用户的音频流的变更事件
        trtcRoomContext.on(EVENT.REMOTE_AUDIO_ADD, (event) => {
          // 订阅（即播放）远端用户的音频流
          let userID = event.data.userID
          trtcRoomContext.subscribeRemoteAudio({ userID: userID })
        })

        // 进入房间，这里是写死的房间号1002
        trtcRoomContext.enterRoom({ roomID: 1002 }).catch((res) => {
          console.error('room joinRoom 进房失败:', res)
        })
      }
    })
  }
})