uniapp如何使用微信小程序直播插件

在uniapp中集成微信小程序直播插件时，遇到以下问题：

  1. 按照官方文档配置后，真机调试无法显示直播组件，是否需要特殊权限？
  2. 直播插件的<live-player>和<live-pusher>标签在uniapp中如何正确引入？
  3. 插件功能正常但观众端延迟较高，如何通过uniapp优化参数配置？
  4. 是否必须通过微信开发者工具操作，还是uniapp可直接打包发布带直播插件的项目？
    求具体实现步骤或踩坑经验分享！
2 回复

在uniapp中使用微信小程序直播插件，需先在微信小程序后台申请插件，然后在manifest.json中配置插件信息。通过requirePlugin引入插件，在页面中创建直播组件即可使用。注意遵循微信小程序的直播规范。


在 UniApp 中使用微信小程序直播插件，需通过以下步骤实现：

1. 申请并添加插件

  • 在微信小程序后台（mp.weixin.qq.com）申请直播插件，获取 AppID。
  • 在 UniApp 项目的 manifest.json 中配置插件：
    "mp-weixin": {
  "appid": "你的小程序AppID",
  "plugins": {
    "live-player-plugin": {
      "version": "插件版本号",
      "provider": "插件AppID"
    }
  }
}

2. 引入插件组件

在页面的 .vue 文件中，通过 <live-pusher> 和 <live-player> 组件实现推流和播放：

<template>
  <view>
    <!-- 推流组件（主播端） -->
    <live-pusher
      url="推流地址"
      mode="SD"
      @statechange="onPushStateChange"
    />
    
    <!-- 播放组件（观众端） -->
    <live-player
      src="播放地址"
      mode="live"
      @statechange="onPlayStateChange"
    />
  </view>
</template>

3. 关键配置说明

  • 推流地址/播放地址：需从微信小程序服务端接口获取（调用 getLivePushUrl 和 getLivePlayUrl）。
  • 组件模式：
    • live-pusher：支持 SD（标清）、HD（高清）等。
    • live-player：设置 mode="live" 实时直播。

4. 注意事项

  • 平台限制：仅支持微信小程序平台，需在条件编译中处理：
    <!-- #ifdef MP-WEIXIN -->
<live-player src="..."/>
<!-- #endif -->
  • 权限要求：需在小程序后台开启「直播」权限，并通过类目审核。
  • 真机测试：部分功能需在真机预览，开发者工具可能受限。

5. 示例代码简化版

<script>
export default {
  methods: {
    onPushStateChange(e) {
      console.log('推流状态:', e.detail.code);
    },
    onPlayStateChange(e) {
      console.log('播放状态:', e.detail.code);
    }
  }
}
</script>

完成以上步骤后，提交小程序审核即可上线直播功能。建议参考微信官方文档更新最新配置要求。

回到顶部