uniapp live-pusher 不显示摄像头内容怎么办？

在使用uniapp的live-pusher组件时，摄像头画面无法显示，只有黑屏。已确认摄像头权限已开启，且代码按照官方文档配置，但依然不生效。具体代码如下：

<live-pusher
    url="rtmp://xxx"
    mode="SD"
    autopush
></live-pusher>

请问可能是什么原因导致的？需要检查哪些配置项或权限？是否与设备兼容性有关？

yibo5220 1楼

检查权限是否开启，摄像头权限必须允许。确认live-pusher组件设置正确，url和mode参数无误。真机调试，模拟器不支持。重启应用或设备试试。

bupafengyu 2楼

在 UniApp 中使用 live-pusher 组件时，如果摄像头内容不显示，通常由以下原因导致。请按以下步骤排查和解决：

1. 检查基础配置

权限配置：确保在 manifest.json 中已正确配置摄像头和麦克风权限（仅限 App 端）。

{
  "app-plus": {
    "distribute": {
      "android": {
        "permissions": [
          "<uses-permission android:name=\"android.permission.CAMERA\"/>",
          "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>"
        ]
      },
      "ios": {}
    }
  }
}

动态权限申请：在 App 端首次使用需动态申请权限，可通过 uni.authorize 实现：
```
uni.authorize({
  scope: 'scope.camera',
  success: () => { console.log("授权成功"); }
});
```

2. 组件属性检查

确保 live-pusher 属性配置正确：

<live-pusher
  url="rtmp://example.com/live/stream"
  mode="SD"
  :enable-camera="true"
  :muted="false"
  :auto-focus="true"
  class="pusher"
></live-pusher>

关键属性：
- url：推流地址需有效（可先用测试地址验证）。
- enable-camera：必须为 true。
- mode：分辨率设置（如 SD、HD），不匹配可能导致黑屏。

3. 样式与层级问题

宽高设置：组件必须有明确宽高，否则无法显示：
```
.pusher {
  width: 100%;
  height: 400px;
}
```
层级覆盖：检查是否有其他元素（如 view、image）遮挡 live-pusher。

4. 平台兼容性

H5 不支持：live-pusher 仅支持 App 端（含 iOS、Android）和微信小程序，H5 无法使用。
微信小程序：需在 app.json 中声明 live-pusher 权限，并检查域名是否在合法名单。

5. 设备与系统问题

摄像头占用：确保其他应用未占用摄像头。
系统权限：前往手机设置检查应用是否已获摄像头权限。
硬件问题：重启设备或测试其他应用确认摄像头正常。

6. 代码示例（完整推流流程）

<template>
  <view>
    <live-pusher
      ref="pusher"
      url="你的推流地址"
      mode="HD"
      :enable-camera="true"
      @statechange="onStateChange"
      class="pusher"
    />
    <button @click="startPush">开始推流</button>
  </view>
</template>

<script>
export default {
  methods: {
    startPush() {
      const pusher = this.$refs.pusher;
      pusher.start(); // 手动触发推流
    },
    onStateChange(e) {
      console.log("推流状态:", e.detail);
    }
  }
}
</script>

<style>
.pusher {
  width: 100%;
  height: 500px;
}
</style>

总结步骤

确认平台兼容性（非 H5）。
检查权限配置与动态申请。
验证 live-pusher 属性（尤其是 enable-camera 和 url）。
确保样式宽高有效且无遮挡。
通过 @statechange 事件监听错误信息（如 -1307 表示摄像头打开失败）。