uniapp live-pusher如何使用

在uniapp中使用live-pusher组件时，如何正确配置推流参数？我按照官方文档设置了url和mode，但始终无法成功推流到服务器。具体需要检查哪些设置？是否还需要额外配置权限或后台服务？调试时出现错误代码1002该如何解决？希望能得到详细的实现步骤和常见问题排查方法。

2 回复

uniapp的live-pusher组件用于直播推流。基本用法：

  1. 在template中添加：
<live-pusher
  url="rtmp://推流地址"
  mode="SD"
  @statechange="onStateChange"
/>

  1. 需要配置manifest.json，勾选直播推流权限。

  2. 注意：仅App端支持，H5和小程序不支持。


在 UniApp 中，live-pusher 组件用于实现实时音视频推流（直播推流），常用于直播、视频通话等场景。以下是基本使用方法、关键属性和注意事项：

基本使用

  1. 在页面中添加组件：

    <template>
  <view>
    <live-pusher
      url="rtmp://your-push-server-url"  // 推流地址
      mode="SD"
      autopush
      @statechange="onPushStateChange"
      style="width: 100%; height: 300px;"
    ></live-pusher>
  </view>
</template>

  2. JavaScript 控制：

    export default {
  methods: {
    onPushStateChange(e) {
      console.log('推流状态变化:', e.detail);
    }
  }
}

关键属性

  • url：推流服务器地址（必需，支持 RTMP 协议）。
  • mode：视频模式（如 SD 标清、HD 高清）。
  • autopush：是否自动推流（默认 false，建议设为 true 或通过方法控制）。
  • muted：是否静音。
  • enable-camera：是否开启摄像头。
  • beauty：美颜等级（0-9）。
  • whiteness：美白等级（0-9）。

常用方法

通过 ref 调用组件方法：

<live-pusher ref="pusher" ...></live-pusher>

// 开始推流
this.$refs.pusher.start();
// 停止推流
this.$refs.pusher.stop();
// 切换摄像头
this.$refs.pusher.switchCamera();
// 暂停/恢复推流
this.$refs.pusher.pause();
this.$refs.pusher.resume();

注意事项

  1. 平台支持：主要在 App 端有效（iOS/Android），H5 和小程序支持有限（需查具体平台文档）。
  2. 权限：确保应用有摄像头和麦克风权限。
  3. 推流地址：需从直播服务商（如腾讯云、阿里云）获取有效的 RTMP 地址。
  4. 真机测试：推流功能需在真机运行，模拟器可能无法使用。

示例代码

<template>
  <view>
    <live-pusher
      ref="livePusher"
      url="rtmp://example.com/live/stream"
      mode="HD"
      autopush
      beauty="5"
      @statechange="onStateChange"
    />
    <button @click="switchCamera">切换摄像头</button>
  </view>
</template>

<script>
export default {
  methods: {
    onStateChange(e) {
      console.log('状态:', e.detail.code, e.detail.message);
    },
    switchCamera() {
      this.$refs.livePusher.switchCamera();
    }
  }
}
</script>

遇到具体问题可参考 UniApp 官方文档或对应平台（如微信小程序）的 live-pusher 文档。

回到顶部