开发准备
开始之前
- 请先确认您已经对这个产品有了大概的了解,并且已经完成了七牛实时音视频云接入流程。
- 请先了解小程序开发,阅读微信小程序开发者文档。
- 请在微信小程序后台 -> 开发 -> 开发设置 -> 服务器域名配置中,将 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 即可。