小程序官方直播插件怎么接入

即構直播助手是微信官方認證的微信小程序插件，可為開發者提供便捷、強大的微信小程序音視頻直播服務，讓你快速實現小程序直播、多人連麥互動等功能。下面一起來看看，如何快速接入即構小程序直播插件。

 

一、准備環境

 

請確保開發環境滿足以下技術要求：

• 已安裝微信開發者工具
• 使用微信小程序基礎庫 2.3.0 及以上版本（否則不支持音視頻播放、錄制組件）

 

二、集成SDK

 

集成即構小程序SDK有兩種方法，大家可以任選一種：

 

方法一：從即構官網下載

1.點擊這里下載SDK

2.將下載下來的文件包解壓縮后拷貝到小程序項目所在文件夾下。

3.使用 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的方式引用

 

三、集成小程序直播插件

1.申請插件

登錄微信小程序后台，在“設置>基本設置”中，確定小程序主體/類目為可接入直播功能的類目。

 

關於哪些類目可使用即構直播插件，請戳這里了解~

 

2.添加插件

在小程序管理后台的“設置-第三方設置”中選擇“添加插件”，在彈出的面板中搜索“即構直播助手”，選中插件並添加，等待后台審核。

插件名稱：即構直播助手。

插件 AppID：wx2b8909dae7727f25。

插件最低版本限制：1.0.4。

 

3.在小程序中引入插件代碼

插件申請審核通過后，使用插件前要在小程序工程的 app.json 中聲明需要使用的插件，例如：

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

4.使用小程序插件中的推拉流組件

1）在 page 或 component 的 .json 文件中定義需要引入的 zego-pusher 組件，使用 plugin:// 協議

{
    "usingComponents": {
      "zego-pusher": "plugin://zego-e-commerce/zego-pusher",    //推流組件
    }
}

2）在 wxml 文件加載上一步引入的 zego-pusher 組件

    <zego-pusher wx:if="{{loginType==='anchor'}}" id="zg-pusher" url="{{pushUrl}}" class="push-content" bindstatechange="onPushStateChange" bindnetstatus="onPushNetStateChange"></zego-pusher>

3）在 page 或 component 的 .json 文件中定義需要引入的 zego-player 組件，使用 plugin:// 協議

{
   "usingComponents": {
       "zego-player": "plugin://zego-e-commerce/zego-player",    //拉流組件
   }
}

4）在 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>

 

以上就是直播小程序插件的接入方法，大家在接入過程中有任何問題，歡迎留言或私聊我~