本文介绍如何建立一个简单的项目并使用声网小程序 SDK 实现基础的视频直播。
声网提供一个小程序的 Demo App。你可以使用 Android 或 iOS 手机上打开微信 App,扫描识别下面的二维码,快速体验声网的小程序解决方案。
开始前,请确保你的开发环境满足如下条件:
在微信公众平台的小程序开发选项中,切换到接口设置页签,打开实时播放音视频流和实时录制音视频流的开关。
在小程序的开发设置里,将如下域名配到服务器域名里,其中 request 合法域名区域填入以 https 开头的域名;socket 合法域名区域点入以 wss 开头的域名。
如果你使用的 SDK 为 v2.5.3 或更高版本,你需要在 request 合法域名及 socket 合法域名中添加以下域名:
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
第一次使用微信小程序时,需要参考如下步骤开通服务:
登录声网控制台,点击左侧导航栏的用量图标 ,进入用量页面。
点击页面左上角聚合用量旁的箭头 ,在下拉框中选择需要开通小程序支持的项目名称。
开通成功后你就可以在用量页面看到小程序的使用情况。
参考如下步骤创建一个新的小程序。
成功创建小程序后,微信开发者工具的左侧会显示当前小程序的界面。你还可以点击真机调试,并扫描生成的二维码,在手机上进行体验。
在微信小程序中实现音视频功能,需要使用微信的 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" />
你可以通过下载压缩包或 npm 任一种方式集成小程序 SDK。
下载声网小程序 SDK 并解压。
将 SDK 包中到的 Agora_Miniapp_SDK_for_WeChat.js 文件复制到你的小程序项目文件夹中。
使用 require
将小程序 SDK 导入到你的项目中:
```js
// ..Agora_Miniapp_SDK_for_WeChat.js 为你的 js 文件本地路径
const AgoraMiniappSDK = require('..Agora_Miniapp_SDK_for_WeChat.js');
```
如果你使用 v2.6.0 或更高版本的小程序 SDK 以及 1.02.1808300 或更高版本的微信开发者工具 ,可通过 npm 安装小程序 SDK。
npm init
完成后,打开你的项目文件夹中的 package.json
文件。在 dependencies
字段中添加 agora-miniapp-sdk
及版本号,设为 latest
即使用最新版本。{
"name": "premium-miniapp",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"agora-miniapp-sdk": "latest"
},
...
}
npm install
require
将小程序 SDK 导入到你的项目中:const AgoraMiniappSDK = require("agora-miniapp-sdk");
完成上述步骤后,你可以参考下图中的业务流程图,在你的项目中实现通话功能。
调用 client.init 方法创建并初始化一个用于控制通话的客户端对象。你需要将 APPID 替换为你的声网项目的 App ID。详见获取 App ID。
let client = new AgoraMiniappSDK.Client();
client.init(APPID () => {
Utils.log(`client init success`);
}, e => {
Utils.log(`client init failed: ${e} ${e.code} ${e.reason}`);
reject(e)
});
调用 client.join
方法加入频道。
在 client.join
中你需要将 yourToken
替换成你自己生成的 Token。并填入想要加入的频道名以及用户 uid
。在测试阶段,你可以直接在控制台生成临时 Token。在生产环境,我们推荐你在自己的服务端生成 Token,详见在服务端生成 Token。
client.join(yourToken, channel, uid, () => {
Utils.log(`client join channel success`);
}, e => {
Utils.log(`client join channel failed: ${e.code} ${e.reason`);
reject(e)
});
成功加入频道后,就能调用 client.publish 方法将本地音视频流发布到频道中。成功发布后,SDK 会返回该路音视频流的 URL。
client.publish(url => {
Utils.log(`client publish success`);
resolve(url);
}, e => {
Utils.log(`client publish failed: ${e.code} ${e.reason}`);
reject(e)
});
当远端流发布到频道时,会触发 stream-added
事件,我们需要通过 client.on
监听该事件并在回调中订阅新加入的远端流。
client.on("stream-added", e => {
client.subscribe(uid => {
Utils.log(`stream ${uid} subscribed successful`);
}, e => {
Utils.log(`stream subscribed failed ${e} ${e.code} ${e.reason}`);
});
});
当远端用户取消发布流或退出频道时,关闭及移除对应的流。
client.on("stream-removed", e => {
let uid = e.uid;
Utils.log(`stream ${uid} removed`);
this.removeMedia(uid);
});
在实际使用中,你还可以根据使用场景实现如下功能。
重连
如果你的项目中有切后台的场景需求,声网推荐调用 client.rejoin
方法做好重连机制。你需要在该方法中传入当前频道内所有用户的 uid
作为额外参数。其他参数的设置与 join
方法相同。
client.rejoin(yourToken, channel, uid, uids, () => {
Utils.log(`client join channel success`);
}, e => {
Utils.log(`client join channel failed: ${e.code} ${e.reason`);
});
设置用户角色
小程序 SDK 与 RTC Native SDK 互通的场景下,如果 Native 端的频道场景为直播,且小程序端作为观众加入频道,则还需在加入频道前调用 setRole
方法,将用户角色设置为观众。
client.setRole(audience);
你可以直接参考如下示例代码,在项目中实现想要的功能。
let client = new AgoraMiniappSDK.client();
this.client = client;
// 初始化客户端
client.init(APPID, () => {
Utils.log(`client init success`);
// 加入频道
client.join(yourToken, channel, uid, () => {
Utils.log(`client join channel success`);
// 发布本地流
if (this.isBroadcaster()) {
client.publish(url => {
Utils.log(`client publish success`);
resolve(url);
}, e => {
Utils.log(`client publish failed: ${e.code} ${e.reason}`);
reject(e)
});
} else {
resolve();
}
}, 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 开发过程中,你还可以参考如下文档: