跑通示例源码
示例代码运行指引
本示例源码仅针对支付宝原生组件。
准备环境
请确保开发环境满足以下技术要求:
-
已安装 支付宝小程序开发者工具。
-
使用支付宝小程序基础库 1.23.0 及以上版本,低版本需要做 兼容处理。
-
请确保您已自行联系支付宝商务人员,开通了相关权限,并获取到了接入 MRTC 的相应参数,以及完成了挂包(Android 设备需要下载挂包)后,才可以正常使用 RTC room 组件。如果您
-
确保您的支付宝小程序符合以下类目,并开通实时音视频权限(获取到对应的小程序 AppID),详情请参考 申请开通。

前提条件
请到 ZEGO 控制台 注册账号并申请初始化 SDK 时需要的 AppID 与 Server 地址,申请流程请参考 项目管理。
Express 的小程序平台的功能默认开启,使用时如遇问题请联系 ZEGO 技术支持。
获取示例源码
支付宝小程序-GitHub 下载
示例源码目录结构
下面目录结构为 zego-express-alimini-sample 子目录的文件结构,下文所涉及的文件路径均为相对于此目录的路径。
.
├── libs # 依赖库文件夹,存放如 SDK 的 js 文件等
│ └──ZegoExpressMiniProgram.js # 小程序 SDK
├── pages # 小程序页面
│ ├── base # 视频直播《基础推拉流》
│ ├── index # 首页
│ ├── message # 视频直播《实时消息》
│ ├── setting # 自定义设置 设置 AppID
│ └── tokenRole # Token 鉴权 v3
├── resource # 资源文件夹,存放如图片等静态资源
├── utils # 存放共享的工具类、方法等的 js 文件夹
├── app.js # 支付宝小程序的入口文件
├── app.json # 支付宝小程序公共设置
├── app.acss # 支付宝小程序全局样式
├── package.json # npm 包描述文件
└── mini.project.json # 支付宝小程序项目配置描述文件运行示例代码
- 若使用 3.6.0 及以上版本 SDK,
server参数可填写控制台获取的Server 地址或者直接填空字符串。 - 为方便开发者调试,使用 Token 鉴权 > 使用步骤 > 生成 Token 页面提供生成临时 Token 的功能,开发者可直接获取临时 Token 进行使用,但在开发者自己的线上环境中,请通过自己的服务端生成 Token。
- 请使用真机进行调试,且调试时,在支付宝小程序开发者工具中,设置勾选不校验域名。
-
使用编辑器(如 VS Code、WebStorm)打开已下载的项目。
-
将 app.js 文件中的 zegoAppID 及 server 分别修改为 前提条件 中获取到的
AppID和Server 地址,同时在 userID 和 token 中,传入正确的值,否则示例代码无法正常运行。 -
输入从支付宝 BD 获取到的 MRTC 参数,以及身份验证签名 signature。
- MRTC 参数,包含 bizName、subBiz、以及 serverUrl。
- RTC room 组件 的参数 signature,是由 bizName、subBiz、秘钥 key 等加密生成,具体生成规则请参考 流媒体签名使用说明。

-
使用支付宝小程序开发者工具打开示例源码,在“详情”中,勾选如下图左下角的两个选项。

-
编译运行示例代码,请使用手机扫码预览。
若运行过程中出现问题,请联系 ZEGO 技术支持。
体验实时音视频功能
在真机中运行项目,运行成功后,可以看到本端视频画面。
为方便体验,ZEGO 提供了一个 Web 端调试示例,在该页面下,输入相同的 AppID、RoomID,输入不同的 UserID、以及对应的 Token,即可加入同一房间与真机设备互通。当成功开始音视频通话时,可以听到远端的音频,看到远端的视频画面。
