实时音视频小程序 (多端框架)

本文主要介绍如何快速地将腾讯云 TRTC WeChat SDK 在小程序多端框架中集成到您的项目中。
准备工作
集成 TRTC WeChat SDK 之前需要了解的事项。
live-player 与 live-pusher 使用说明
Live-player 和 live-pusher 在 App 端使用时，无需像小程序那样提供资质才能开通。按照以下指南操作即可使用。
SDK 版本要求
iOS SDK：需使用版本号 ≥ 1.6.16
Android SDK：需使用版本号 ≥ 1.6.15 (低于该版本的 SDK 仍可使用 live-player 与 live-pusher，但是无法与腾讯云直播服务配合使用，因此建议您升级至最新的 SDK)。
开发者工具版本要求
使用 live-player 和 live-pusher 组件需要勾选 Live SDK。如果开发者工具中未显示该扩展 SDK，请将开发者工具升级至最新版本，版本至少 ≥ 1.06.2506252。
依赖的扩展 SDK
Android：XWeb SDK 或 XWeb Embed SDK 以及 Live SDK。
﻿
﻿
iOS：Media SDK 以及 Live SDK。
﻿
摄像头、麦克风权限获取
需要在 project.minapp.json 中进行权限描述配置，文件路径如下图。
﻿
以 Android 为例：
﻿
配置后通过组件或者 API，拉起系统的摄像头时，首次会触发系统的弹窗。
如果您点击拒绝，则应用后续无法访问相机，您可通过 wx.getAppAuthorizeSetting 获取当前应用的权限授权情况。
注意：
Android 和 iOS 的权限返回有所区别，开发者需根据平台条件判断。
开始集成
SDK 提供了 ES Module 类型的模块。
步骤1：导入 SDK 到项目中
1. 您需要在项目中使用 trtc-wx 包。
npm i trtc-wx-sdk --save
2. 在项目脚本里引入模块。此处可引入静态文件，也可通过 小程序构建 npm 直接引入。
import TRTC from './static/trtc-wx'; // 静态文件引入
import TRTC from 'trtc-wx-sdk'; // 小程序构建npm引入
步骤2：进入房间
2.1 初始化 TRTC 实例
import TRTC from 'trtc-wx-sdk';
// 生命周期函数--监听页面加载
onLoad(options) {
    this.TRTC = new TRTC(this)
},
2.2 绑定事件回调
相关事件会通知您服务器推送的一些信息，具体事件可参见 事件表。
<live-pusher
        bindstatechange="_pusherStateChangeHandler"
        bindnetstatus="_pusherNetStatusHandler"
        binderror="_pusherErrorHandler"
        bindbgmstart="_pusherBGMStartHandler"
        bindbgmprogress="_pusherBGMProgressHandler"
        bindbgmcomplete="_pusherBGMCompleteHandler"
        bindaudiovolumenotify="_pusherAudioVolumeNotify"
/>
// 生命周期函数--监听页面加载
onLoad(options) {
    this.TRTC = new TRTC(this)
    this.bindTRTCRoomEvent()
},
// 事件监听
bindTRTCRoomEvent() {
    const TRTC_EVENT = this.TRTC.EVENT
    // 初始化事件订阅
    this.TRTC.on(TRTC_EVENT.LOCAL_JOIN, (event) => {
        console.log('* room LOCAL_JOIN', event)
    })
    this.TRTC.on(TRTC_EVENT.LOCAL_LEAVE, (event) => {
        console.log('* room LOCAL_LEAVE', event)
    })
    this.TRTC.on(TRTC_EVENT.ERROR, (event) => {
        console.log('* room ERROR', event)
    })
    // 远端用户加入
    this.TRTC.on(TRTC_EVENT.REMOTE_USER_JOIN, (event) => {
        console.error('* room REMOTE_USER_JOIN', event)
    })
    // 远端用户退出
    this.TRTC.on(TRTC_EVENT.REMOTE_USER_LEAVE, (event) => {
        console.error('* room REMOTE_USER_LEAVE', event)
    })
    // 远端用户推送视频
    this.TRTC.on(TRTC_EVENT.REMOTE_VIDEO_ADD, (event) => {
        console.log('* room REMOTE_VIDEO_ADD',  event)
    })
    // 远端用户取消推送视频
    this.TRTC.on(TRTC_EVENT.REMOTE_VIDEO_REMOVE, (event) => {
        console.log('* room REMOTE_VIDEO_REMOVE', event)
    })
    // 远端用户推送音频
    this.TRTC.on(TRTC_EVENT.REMOTE_AUDIO_ADD, (event) => {
        console.log('* room REMOTE_AUDIO_ADD', event)
    })
    // 远端用户取消推送音频
    this.TRTC.on(TRTC_EVENT.REMOTE_AUDIO_REMOVE, (event) => {
        console.log('* room REMOTE_AUDIO_REMOVE', event)
    })
    // 远端用户音量更新
    this.TRTC.on(TRTC_EVENT.REMOTE_AUDIO_VOLUME_UPDATE, (event) => {
        console.log('* room REMOTE_AUDIO_VOLUME_UPDATE', event)
    })
    // 本地用户音量更新
    this.TRTC.on(TRTC_EVENT.LOCAL_AUDIO_VOLUME_UPDATE, (event) => {
        console.log('* room LOCAL_AUDIO_VOLUME_UPDATE', event)
    })
},
// 请保持跟 wxml 中绑定的事件名称一致
_pusherStateChangeHandler(event) {
    this.TRTC.pusherEventHandler(event)
},
_pusherNetStatusHandler(event) {
    this.TRTC.pusherNetStatusHandler(event)
},
_pusherErrorHandler(event) {
    this.TRTC.pusherErrorHandler(event)
},
_pusherBGMStartHandler(event) {
    this.TRTC.pusherBGMStartHandler(event)
},
_pusherBGMProgressHandler(event) {
    this.TRTC.pusherBGMProgressHandler(event)
},
_pusherBGMCompleteHandler(event) {
    this.TRTC.pusherBGMCompleteHandler(event)
},
_pusherAudioVolumeNotify(event) {
    this.TRTC.pusherAudioVolumeNotify(event)
},
_playerStateChange(event) {
    this.TRTC.playerEventHandler(event)
},
_playerFullscreenChange(event) {
    this.TRTC.playerFullscreenChange(event)
},
_playerNetStatus(event) {
    this.TRTC.playerNetStatus(event)
},
_playerAudioVolumeNotify(event) {
    this.TRTC.playerAudioVolumeNotify(event)
}
2.3 进入音视频通话房间
需要先调用 createPusher 初始化 pusher 实例并配置初始参数，再调用 enterRoom 获取新的 pusher 实例，通过 setData 赋值给 live-pusher 标签，之后调用 start 开始进入音视频通话房间。
注意：
进房成功后，将会产生音视频通话用量和对应费用。详细计费请见 音视频通话计费说明。
// 生命周期函数--监听页面加载
onLoad(options) {
    this.TRTC = new TRTC(this)
    this.bindTRTCRoomEvent()
    this.init()
    this.enterRoom(options)
},
init() {
  const pusherConfig = {
    beautyLevel: 9,
  }
  this.setData({
    pusher: this.TRTC.createPusher(pusherConfig)
  })
},
enterRoom(options) {
  const { roomID, sdkAppID, userID, userSig } = options
  this.setData({
    pusher: this.TRTC.enterRoom({
      roomID,
      sdkAppID,
      userID,
      userSig,
    }),
  }, () => {  
     this.TRTC.getPusherInstance().start() // 开始推流并进入trtc房间
  })
},
 <live-pusher
        url="{{pusher.url}}"
        mode="{{pusher.mode}}"
        enable-camera="{{pusher.enableCamera}}"
        enable-mic="{{pusher.enableMic}}"
/>
步骤3：订阅音视频流
在远端用户进入的回调中，更新 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 })
})
// 远端用户推送音频
this.TRTC.on(TRTC_EVENT.REMOTE_AUDIO_ADD, (event) => {
  console.log('* room REMOTE_AUDIO_ADD', event)
  const { player } = event.data
  this.setPlayerAttributesHandler(player, { muteAudio: false })
})
// 设置某个 player 属性
setPlayerAttributesHandler(player, options) {
  this.setData({
    playerList: this.TRTC.setPlayerAttributes(player.streamID, options),
  })
},
<view wx:for="{{playerList}}" wx:key="id">
  <live-player
    id="{{item.id}}"
    src= "{{item.src}}"
    data-userid="{{item.userID}}"
    data-streamid="{{item.streamID}}"
    data-streamtype="{{item.streamType}}"
  />
</view>
步骤4：发布音视频流
在进入房间后，调用 getPusherInstance().start() 或者开启自动推流模式即可开始推流。
 enterRoom(options) {
    this.setData({
      pusher: this.TRTC.enterRoom(options),
    }, () => {
      this.TRTC.getPusherInstance().start() // 开始推流
    })
  },
 <live-pusher
    url="{{pusher.url}}"
    autopush="{{true}}"
/>
步骤5：退出房间
5.1 主动退出当前房间
通话结束时调用 exitRoom 方法退出音视频通话房间，整个音视频通话会话结束。
exitRoom() {
    const result = this.TRTC.exitRoom()
    // 状态机重置，会返回更新后的pusher和playerList
    this.setData({
        pusher: result.pusher,
        playerList: result.playerList,
    })
},
5.2 被动退出当前房间
除了用户主动退出房间，在以下情况下，用户会收到 KICKED_OUT 事件，表示当前用户被动退出房间：
let onKickedout = function(event){
  console.log('被服务端踢出或房间被解散')
}
this.TRTC.on(EVENT.KICKED_OUT, onKickedout)
小程序 (多端框架)

本页目录：

准备工作

live-player 与 live-pusher 使用说明

SDK 版本要求

开发者工具版本要求

依赖的扩展 SDK

摄像头、麦克风权限获取

开始集成

步骤1：导入 SDK 到项目中

步骤2：进入房间

2.1 初始化 TRTC 实例

2.2 绑定事件回调

2.3 进入音视频通话房间

步骤3：订阅音视频流

步骤4：发布音视频流

步骤5：退出房间

5.1 主动退出当前房间

5.2 被动退出当前房间
