本文介绍如何使用声网微信小程序 SDK 快速实现音频直播。
声网在 GitHub 上提供一个开源的实时音视频示例项目 Agora-Miniapp-Tutorial。在实现相关功能前,你可以下载并查看源代码。
同时,声网也提供一个微信小程序 Demo。你可以使用 Android 或 iOS 手机上打开微信 App,扫描识别下面的二维码,快速体验声网的小程序解决方案。
请确保你的微信小程序基础库支持 live-pusher 及 live-player 组件,且这两个组件在微信开发者工具中打开。
在微信公众平台账号的开发设置中,给予以下域名请求权限:
wss://miniapp.agoraio.cn
https://uap-ap-web-1.agora.io
https://uap-ap-web-2.agoraio.cn
https://uap-ap-web-3.agora.io
https://uap-ap-web-4.agoraio.cn
https://report-ad.agoralab.co
https://rest-argus-ad.agoralab.co
https://uni-webcollector.agora.io
https://uni-webcollector.agora.io
wss://miniapp.agoraio.cn
https://miniapp-1.agoraio.cn
https://miniapp-2.agoraio.cn
https://miniapp-3.agoraio.cn
https://miniapp-4.agoraio.cn
第一次使用微信小程序时,需要参考如下步骤开通服务:
登录声网控制台,点击左侧导航栏的用量图标 ,进入用量页面。
点击页面左上角聚合用量旁的箭头 ,在下拉框中选择需要开通小程序支持的项目名称。
开通成功后你就可以在用量页面看到小程序的使用情况。
在微信小程序中实现音视频功能,需要使用微信的 live-player 组件和 live-pusher 组件。详见微信小程序 API 说明。
live-player 组件
该组件用于实现微信小程序的实时音视频播放功能。开发者在创建该组件后,还需要在 js 文件中调用 API 接口对应的组件来实现该功能。声网小程序中,创建 live-player 的示例代码如下:
<live-player
id="player"
src="{{rtmp 播放地址}}"
mode="RTC"
bindstatechange="playerStateChange"
object-fit="fillCrop" />
live-pusher 组件
该组件用于实现微信小程序的实时音视频录制功能。开发者在创建该组件后,还需要在 js 文件中调用 API 接口对应的组件来实现该功能。声网小程序中,创建 live-pusher 的示例代码如下:
<live-pusher
url="{{rtmp 推流地址}}"
mode="RTC"
bindstatechange="recorderStateChange" />
下载声网小程序 SDK 并解压。
将 SDK 包中到的 Agora_Miniapp_SDK_for_WeChat.js 文件复制到你的小程序项目文件夹中。
使用 require
将小程序 SDK 集成到项目中:
// ../../lib/Agora_Miniapp_SDK_for_WeChat.js 为你的 js 文件本地路径
const AgoraMiniappSDK = require('../../lib/Agora_Miniapp_SDK_for_WeChat.js');
完成开发环境准备后,你可以参考下图中的业务流程图,在你的项目中实现直播功能。
你需要在该步骤中填入项目的 App ID。请参考开始使用声网平台在控制台创建声网项目并获取 App ID。
调用 init
方法,然后填入获取到的 App ID,初始化客户端对象。
client.init(appId, onSuccess, onFailure);
初始化客户端后,在成功的回调中调用 join
方法加入频道。在该方法中填入以下参数:
token:传入能标识用户角色和权限的 Token。可设为如下一个值:
channel:指明你想要加入的频道名。
uid:用户 ID。整数,且需保持唯一性。
client.join(token, channel, uid, onSuccess, onFailure);
加入频道后,调用 publish
方法发布本地音频流。
client.publish(onSuccess, onFailure);
订阅远端流包含如下步骤:
调用 on
注册监听事件。当有人发布音频流到频道时,会收到该事件。
client.on(event, callback);
收到事件后,在回调中调用 subscribe
方法订阅远端音频流。
client.subscribe(uid, onSuccess, onFailure);
使用小程序 SDK 过程中,你还可以根据场景需要,实现如下功能:
如果你的项目中有切后台的场景需求,还需要调用 rejoin
方法做好重连机制,并在该方法中传入当前频道内所有用户的 uid
列表作为额外参数。其他参数的设置与 join
方法相同。
client.rejoin(token, channel, uid, uids, onSuccess, onFailure);
成功重连后,SDK 会重新发布和订阅音频流,你可以参考声网 Miniapp Tutorial 示例项目中 reinitAgoraClient
的实现方法更新推流及拉流地址。
setRole
方法,将用户角色设置为观众。
client.setRole(role);
调用 leave
方法离开当前频道。
client.leave(onSuccess, onFailure);
你可以参考如下示例代码,在项目中实现想要的功能。
初始化客户端、加入频道、发布音频流
let client = new AgoraMiniappSDK.Client();
this.client = client;
// 初始化客户端对象
client.init(APPID, () => {
console.log(`client init success`);
// 加入频道
client.join(undefined, channel, uid, () => {
console.log(`client join channel success`);
// 注册流事件
this.subscribeEvents(client);
// 发布本地音频流并获取推流 url 地址
client.publish(url => {
console.log(`client publish success`);
}, e => {
console.log(`client publish failed: ${e}`);
});
}, e => {
console.log(`client join channel failed: ${e}`);
})
}, e => {
console.log(`client init failed: ${e}`);
});
注册并监听流事件
// 有新的音频流加入频道
client.on("stream-added", e => {
let uid = e.uid;
const ts = new Date().getTime();
console.log(`stream ${uid} added`);
// 订阅相应 Url 地址的音频流
client.subscribe(uid, (url) => {
console.log(`stream ${uid} subscribed successful`);
// 将 Url 地址发送至 live-player
}, e => {
console.log(`stream subscribed failed ${e} ${e.code} ${e.reason}`);
});
});
重连
client.init(APPID, () => {
// uids 为频道中已有的用户 UID 列表
client.rejoin(undefined, channel, uid, uids, () => {
Utils.log(`client join channel success`);
// 获取本地推流 Url 地址
client.publish(url => {
Utils.log(`client publish success`);
resolve(url);
}, e => {
Utils.log(`client publish failed: ${e.code} ${e.reason}`);
reject(e)
});
}, e => {
Utils.log(`client join channel failed: ${e.code} ${e.reason}`);
reject(e)
})
}, e => {
Utils.log(`client init failed: ${e} ${e.code} ${e.reason}`);
reject(e);
});
在微信开发者工具中导入你的项目后,点击预览,开发者工具会生成一个二维码。手机微信扫描二维码即可进入运行小程序。
使用微信小程序 SDK 开发过程中,你还可以参考如下文档: