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

在uniapp中如何集成微信小程序的直播组件？需要引入哪些特定的API或配置？能否提供一个完整的示例代码，包括组件的引入和使用步骤？另外，在真机调试和发布时有哪些需要注意的兼容性问题？

2 回复

在uniapp中使用微信小程序直播组件，需在pages.json中配置直播页面为原生组件，使用<live-player>和<live-pusher>标签实现直播功能。注意需在微信小程序后台开通直播权限，并在manifest.json中声明相关权限。


在 UniApp 中使用微信小程序直播组件，需通过微信小程序的 <live-pusher> 和 <live-player> 组件实现推流和播放功能。以下是具体步骤和示例代码：

步骤说明：

  1. 配置 manifest.json
    在微信小程序平台配置中声明直播组件权限：

    "mp-weixin": {
  "appid": "你的小程序AppID",
  "setting": {
    "urlCheck": false
  },
  "requiredPrivateInfos": ["getLocation"],
  "permission": {
    "scope.record": {
      "desc": "用于直播录制音频"
    }
  },
  "usingComponents": true
}

  2. 在页面中使用组件

    • 推流组件（主播端）：
      <template>
  <live-pusher
    url="推流地址"
    mode="SD"
    :muted="false"
    :enable-camera="true"
    :auto-focus="true"
    @statechange="onPushStateChange"
  />
</template>
    • 播放组件（观众端）：
      <template>
  <live-player
    src="播放地址"
    mode="live"
    autoplay
    @statechange="onPlayStateChange"
  />
</template>

  3. 获取推流/播放地址
    需通过微信小程序后台或服务端接口获取临时直播地址（通常与直播间ID绑定）。

  4. 处理状态事件
    通过 @statechange 监听直播状态：

    methods: {
  onPushStateChange(e) {
    console.log('推流状态:', e.detail.code);
  },
  onPlayStateChange(e) {
    if (e.detail.code === 2004) {
      console.log('观众开始播放');
    }
  }
}

注意事项：

  • 平台限制：仅支持微信小程序平台，需通过条件编译包裹代码：
    <!-- #ifdef MP-WEIXIN -->
<live-player src="..."/>
<!-- #endif -->
  • 权限要求：需在小程序后台开启“直播”类目，并配置合法域名。
  • 测试建议：使用微信开发者工具的“真机调试”验证功能，因模拟器可能无法正常预览。

通过以上步骤即可快速集成直播功能。若有复杂需求（如美颜、连麦），需结合微信原生API或第三方SDK扩展。

回到顶部