微信小程序实时音视频的使用

小程序提供的live-pusher组件和live-player组件主要用于两种场景：一个是用于视频直播，另一个是用于为您的小程序提供实时音视频相关的功能。live-pusher和live-player两个组件，都有一个叫做 RTC 的模式，通过这种模式，可以在小程序中实现实时视频通话功能。本文我们介绍如何使用live-pusher组件和live-player组件以及腾讯云实时音视频产品来开发一个视频通话的小程序。

实时音视频产品架构

腾讯实时音视频（Tencent Real-Time Communication，TRTC），将腾讯多年来在网络与音视频技术上的深度积累，主打低延时互动直播和多人音视频两大解决方案，通过腾讯云服务向开发者开放，致力于帮助开发者快速搭建低成本、低延时、高品质的音视频互动解决方案。

产品功能

• 视频通话
  即两人或多人视频通话，支持720P、1080P高清画质。单个房间最多支持300人同时在线，最多支持50人同时开启摄像头。
• 语音通话
  即两人或多人语音通话，支持 48kHz，支持双声道。单个房间最多支持300人同时在线，最多支持50人同时开启麦克风。
• 视频互动直播
  支持主播与观众视频连麦互动。支持主播跨房间（跨直播间）PK。支持平滑上下麦，切换过程无需等待，主播延时小于300ms。单个房间可上麦人数无限制，最多支持50人同时连麦。低延时直播模式下，支持10万观众同时播放，播放延时低至1000ms。CDN 旁路直播模式下，观众数量无限制。
• 语音互动直播
  支持主播与观众语音连麦互动。支持主播跨房间（跨直播间）PK。支持平滑上下麦，切换过程无需等待，主播延时小于300ms。单个房间可上麦人数无限制，最多支持50人同时连麦。低延时直播模式下，支持10万观众同时播放，播放延时低至1000ms。CDN 旁路直播模式下，观众数量无限制。

实时音视频SDK使用说明

使用腾讯实时音视频SDK前需要首先注册腾讯云账号并完成 实名认证。注册成功后需要在实时音视频产品中创建一个实时音视频应用，腾讯云会为您的应用分配一个SDKAppID以及相应的UserSig的密钥， 后续的编码中会用到这两个参数。创建实时音视频应用的操作方法为：登录实时音视频控制台，选择【应用管理】->【创建应用】：

创建实时音视频应用成功后可以在应用的列表界面中看到SDKAppID：

点击上图中的【功能配置】，可以在打开页面的【快速上手】中看到UserSig的密钥：

另外在编码前还需要下载trtc-wx.js文件，该文件将用于接下来的小程序视频通话页面，请通过以下的url地址来下载trtc-wx.js文件：
https://web.sdk.qcloud.com/trtc/miniapp/download/trtc-wx.zip

API 使用指引

下图是腾讯实时音视频SDK文档中给出的实时音视频小程序API的调用时序图：

步骤1：初始化TRTC

在 trtc-wx 包中导出的是一个名为 TRTC 的类，您需要在页面onLoad函数中实例化这个类，同时创建 Pusher，并监听 TRTC 抛出的事件。

onLoad(options) {
   
   
    //初始化 TRTC 实例
    this.TRTC = new TRTC(this)
//创建 Pusher
const pusher = this.TRTC.createPusher({
   
   beautyLevel: 9})
    //事件监听
    this.bindTRTCRoomEvent()
  },

使用TRTC类的on(EventCode, handler, context)方法监听TRTC抛出的事件，例如：

//事件监听
  bindTRTCRoomEvent() {
   
   
    const TRTC_EVENT = this.TRTC.EVENT
    this.TRTC.on(TRTC_EVENT.ERROR, (event) => {
   
   
      console.log('* room ERROR', event)
    })
}

步骤2：开始推流

首先需要调用enterRoom方法进入TRTC房间，之后您可以调用start() 方法开始推流。

onLoad(options) {
   
   
    this.TRTC = new TRTC(this)
    const pusher = this.TRTC.createPusher({
   
   beautyLevel: 9})
    this.bindTRTCRoomEvent()
//进入房间
this.TRTC.enterRoom(this.data._rtcConfig)
//开始推流
this.TRTC.getPusherInstance().start() 
  }

调用enterRoom(params)方法后，若房间不存在，系统将自动创建一个新房间，否则直接进入房间，enterRoom(params)的参数说明如下：

• sdkAppID：您的腾讯云账号的 sdkAppID
• userID：您进房的 userID
• userSig：您服务器签发的 userSig
• roomID：您要进入的房间号，如该房间不存在，系统会为您自动创建
• strRoomID：您要进入的字符串房间号，如填写该参数，将优先进入字符串房间
• scene：必填参数，使用场景：
  rtc：实时通话，采用优质线路，同一房间中的人数不应超过300人。
  live：直播模式，采用混合线路，支持单一房间十万人在线（同时上麦的人数应控制在50人以内）

步骤3：对于远端流进行处理

如果收到远端新增视频流，您可以开始播放这路视频，将这个 player 的 muteVideo 状态设置为 false，这里需要您传入这个 player 的 id，更新完成后会返回给您更新后的playerList列表，您只需要将页面的 playerList 同步更新即可。

this.TRTC.on(TRTC_EVENT.REMOTE_VIDEO_ADD, (event) => {
   
   
      console.log('* room REMOTE_VIDEO_ADD',  event)
      const {
   
    player } = event.data
      this.setPlayerAttributesHandler(player, {
   
    muteVideo: false })
    })

如果收到这个远端流减少的通知时，您可以取消对这一路的订阅，将 muteAudio 设置为 true。

    this.TRTC.on(TRTC_EVENT.REMOTE_VIDEO_REMOVE, (event) => {
   
   
      console.log('* room REMOTE_VIDEO_REMOVE', event)
      const {
   
    player } = event.data
      this.setPlayerAttributesHandler(player, {
   
    muteVideo: true })
    })

步骤4：结束音视频通话

调用exitRoom()退出房间，退出房间时需要重置状态机的状态，并同步到页面中，防止下次进房发生状态的混乱。

_hangUp() {
   
   
    const result = this.TRTC.exitRoom()
    this.setData({
   
   
      pusher: result.pusher,
      playerList: result.playerList,
    })
    wx.navigateBack({
   
   delta: 1,})
  }

步骤5：控制是否上行本地音视频流

如若需要变更 live-pusher 标签上 enable-mic 和 enable-camera 的属性，您可以通过调用 setPusherAttributes 函数对状态机中管理的推流状态进行改变，并将返回给您更新后的状态值更新到页面中。

//上行音频流
this.setData({
   
   
  pusher: this.TRTC.setPusherAttributes({
   
   enableMic: true})
})
//上行视频流
this.setData({
   
   
  pusher: this.TRTC.setPusherAttributes({
   
   enableCamera: true})
})

实时音视频代码示例

接下的代码中我们来实现一个视频对话功能的小程序，在小程序的入口页面（home页面)中我们为通话的双方用户指定一个房间号，并为当前用户产生一个随机用户ID，然后跳转到通话页面（room页面)进行视频通话。下面的代码是room页面的代码：

示例代码：room.wxml

<view class="template-1v1">
  <view wx:for="{
    
    {playerList}}" wx:key="streamID" wx:if="{
    
    {item.src && (item.hasVideo || item.hasAudio)}}" class="view-container player-container {
    
    {item.isVisible?'':'none'}}">
    <live-player
            class="player"
            id="{
    
    {item.streamID}}"
            data-userid="{
    
    {item.userID}}"
            data-streamid="{
    
    {item.streamID}}"