开发准备 · 七牛实时音视频云微信小程序 SDK

开始之前

请先确认您已经对这个产品有了大概的了解，并且已经完成了七牛实时音视频云接入流程。
请先了解小程序开发，阅读微信小程序开发者文档。
请在微信小程序后台 -> 开发 -> 开发设置 -> 服务器域名配置中，将 wss://rtmpgate.cloudvdn.com 加到 socket 合法域名中，将 https://pili-rtc-qos.qiniuapi.com 添加到 request 合法域名中。
在小程序的开发后台打开实时播放/录制音视频流的开关（小程序后台 -> 开发 -> 接口设置）。

和其他客户端互通的注意事项

这里的其他客户端是指 Android/iOS/Web/Windows 客户端，如果您使用这些客户端的 SDK 版本小于 2.0.0 ，那么无需特别注意，小程序可以正常地和它们互通。但是如果您使用了其他端 2.0.0 以上的 SDK，就需要特别注意 master 属性的设定以确保小程序可以正常和它们通信。

七牛实时音视频在 2.0.0 都引入了一个重大改动，即支持单用户多流，允许一个用户发布多路流。而小程序目前还不持这个功能，所以既不能发布多路流也不能感知其他端发布的多路流。准确地说，小程序只能感受到其他端发布的那一路 master 流，所以只需要根据您的业务合理地设置 master 属性就能和小程序互通了。

关于各端 master 属性的设置和介绍，可以通过使用各端的文档站上右上角的搜索功能来查阅。

引入 SDK

NPM 安装

npm install --save pili-rtc-wxapp

SDK 引入

引入之后必须点击微信开发者工具 > 工具 > 构建npm 方可使用。关于在小程序中使用 npm 包，详情见微信官方文档npm 支持。

// 引入 pili-rtc-wxapp 以下两种引入方式任选一种
// esModule
import * as QNRTC from 'pili-rtc-wxapp'

// CommonJS
const QNRTC = require('pili-rtc-wxapp')

console.log(QNRTC.version)

const session = new QNRTC.RoomSession()

引入组件

NPM 安装

npm install --save qiniu-wx-player

注意：对于微信官方提供的 <live-pusher> 和 <live-player>，推荐使用 qiniu-wx-player 组件代替微信官方所提供的 <live-pusher> 及 <live-player>。七牛对 qiniu-wx-player 组件做了封装处理,使用起来非常简单, 且搭配七牛的 pili-rtc-wxapp 使开发更加便捷，解决原生组件断网重连需要手动实现的bug。

组件引入

首先，要在 json 文件中引用声明。此时需要提供 qiniu-wx-player 自定义组件的标签名和对应的文件路径。标签名是 player 和 pusher 。如果你此时已经安装好 qiniu-wx-player 并且在微信开发者工具中已构建 npm 成功，那么此时的标签名对应的文件路径可以如下面代码所示。

// json 文件中引用声明
{
  "usingComponents": {
    "player": "/miniprogram_npm/qiniu-wx-player/live-player/index",
    "pusher": "/miniprogram_npm/qiniu-wx-player/live-pusher/index"
  }
}

接下来，在页面的 wxml 中就可以像使用基础组件一样使用 qiniu-wx-player 自定义组件。节点名是 pusher 和 player ，节点属性与官方的 <live-pusher> 和 <live-player> 一致。意思就是只需将微信官方的 <live-pusher> 和 <live-player> 节点名替换成 pusher 和 player 。

<!-- 在页面的 wxml 中使用 -->
<!-- 此时 <pusher> 和 <player> 的属性名，类型，默认值及属性说明都和官方的 <live-pusher> <live-player> 一致 -->
<view>
  <pusher id="pusher" pid="mypusher" mode="RTC" url="" min-bitrate="200" max-bitrate="400" bindstatechange="pusherStateChange"></pusher>
  <player id="player" pid="myplayer" mode="RTC" src="" min-cache="0.2" max-cache="0.8" bindstatechange="playerStateChange"></player>
</view>

qiniu-wx-player自定义组件新增pid属性，该属性会透传给封装的官方组件作为组件id，这样就可以使用官方相关api接口了。

// 全屏
this.selectComponent('#player').createSelectorQuery().select('#myplayer').context(function (res) {
  res.context.requestFullScreen({
    direction: 90
  })
})

注意：如果您需要在微信开发者工具上跑通我们的demo，请先在demo目录下执行 npm install ，然后点击微信开发者工具 > 工具 > 构建 npm 即可。