小程序直播
  • 平台类型
  • 框架 / 引擎
  • iOS
  • Android
  • macOS
  • Windows
  • Linux
  • Web
  • 小程序

集成指引

更新时间:2020-09-26 16:21

1 准备环境

请确保开发环境满足以下技术要求:

  • 已安装微信开发者工具
  • 使用微信小程序基础库 2.3.0 及以上版本(否则不支持音视频播放、录制组件)

2 集成 SDK

请选择以下任一方法集成即构小程序 SDK:

方法一:从官网下载 SDK

  1. 请从 ZegoExpress-MiniProgram 下载 SDK。

历史版本更新,请查看:小程序 JS SDK 历史更新日志

  1. 将下载下来的文件包解压缩后拷贝到小程序项目所在文件夹下。

  2. 使用 require 将 SDK 集成到项目中即可:

 <script src="ZegoExpressWebRTC-x.x.x.js"></script>

注意:require 需填写项目中 SDK 的实际文件路径。

方法二: 使用npm获取 SDK

  1. 在终端运行安装命令

    npm i miniprogram-zego
  2. 在开发者工具菜单栏中选择 工具 > 构建 npm,并勾选“使用 npm 模块”选项。

  3. 在项目中添加如下代码:

    let { ZegoExpressEngine } = require("zego-express-engine-miniprogram"); // 以npm的方式引用

小程序使用npm 详见官方文档

3 集成小程序直播插件

3.1 申请插件

  1. 登录 微信小程序后台,在 设置>基本设置 中,确定已具备符合接入的类目.

  2. 在小程序管理后台的“设置-第三方设置”中选择“添加插件”,在弹出的面板中搜索“即构直播助手”,选中插件并添加,等待后台审核。

  • 插件名称:即构直播助手。
  • 插件 AppID:wx2b8909dae7727f25。
  • 插件最低版本限制:1.0.4。

3.2 在小程序中引入插件代码

插件申请审核通过后,使用插件前要在小程序工程的 app.json 中声明需要使用的插件,例如:

{
  "plugins": {
    "zego-e-commerce": {
      "version": "1.0.4",
      "provider": "wx2b8909dae7727f25"
    }
  }
}

3.3 小程序使用插件中的推拉流组件

  1. 在 page 或 component 的 .json 文件中定义需要引入的 zego-pusher 组件,使用 plugin:// 协议。
{
    "usingComponents": {
      "zego-pusher": "plugin://zego-e-commerce/zego-pusher",    //推流组件
    }
}
  1. 在 wxml 文件加载上一步引入的 zego-pusher 组件。
    <zego-pusher wx:if="{{loginType==='anchor'}}" id="zg-pusher" url="{{pushUrl}}" class="push-content" bindstatechange="onPushStateChange" bindnetstatus="onPushNetStateChange"></zego-pusher>
  1. 在 page 或 component 的 .json 文件中定义需要引入的 zego-player 组件,使用 plugin:// 协议。
{
   "usingComponents": {
       "zego-player": "plugin://zego-e-commerce/zego-player",    //拉流组件
   }
}
  1. 在 wxml 文件加载上一步引入的 zego-player 组件。
    <zego-player wx:if="{{loginType==='audience'}}" id="zg-player" sid="{{sid}}" url="{{playUrl}}" objectFit="fillCrop" class="play-content" bindstatechange="onPlayStateChange" bindnetstatus="onPlayNetStateChange"></zego-player>