@tanzhenxing/zx-live-pusher v1.0.1

zx-live-pusher 直播推流组件

zx-live-pusher 是基于 uni-app 官方 live-pusher 组件封装的增强版直播推流组件，提供了更简单的接口和更丰富的功能。

平台兼容性

注意：App平台开发推荐使用nvue，相比vue有更好的性能和更多功能。

使用方法

1. 引入组件

<script>
import ZxLivePusher from '@/components/zx-live-pusher/zx-live-pusher.vue'

export default {
  components: {
    ZxLivePusher
  }
}
</script>

2. 基本用法

<template>
  <view class="content">
    <zx-live-pusher
      ref="livePusher"
      :url="pushUrl"
      mode="HD"
      aspect="9:16"
      :beauty="3"
      :whiteness="3"
      @statechange="onStateChange"
      @netstatus="onNetStatus"
      @error="onError"
    />
    
    <view class="controls">
      <button @click="startLive">开始直播</button>
      <button @click="stopLive">结束直播</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pushUrl: 'rtmp://your-rtmp-server/path'
    }
  },
  methods: {
    startLive() {
      this.$refs.livePusher.startPush();
    },
    stopLive() {
      this.$refs.livePusher.stopPush();
    },
    onStateChange(e) {
      console.log('推流状态变化:', e);
    },
    onNetStatus(e) {
      console.log('网络状态:', e);
    },
    onError(e) {
      console.log('推流错误:', e);
    }
  }
}
</script>

3. 使用内置控制按钮

<zx-live-pusher
  :url="pushUrl"
  :show-controls="true"
  :auto-preview="true"
/>

属性说明

事件说明

statechange 事件 code 值说明

方法说明

以下方法都返回Promise对象，可以使用async/await或then/catch处理结果。

使用示例

直播页面示例

<template>
  <view class="live-page">
    <zx-live-pusher
      ref="livePusher"
      :url="pushUrl"
      mode="HD"
      aspect="9:16"
      :beauty="beautyLevel"
      :whiteness="whitenessLevel"
      @statechange="onStateChange"
      @netstatus="onNetStatus"
      @error="onError"
      @started="onStarted"
      @stopped="onStopped"
    />
    
    <view class="operation-bar">
      <view class="beauty-control">
        <slider :value="beautyLevel" :min="0" :max="9" :step="1" @change="onBeautyChange" show-value />
        <text>美颜</text>
      </view>
      
      <view class="whiteness-control">
        <slider :value="whitenessLevel" :min="0" :max="9" :step="1" @change="onWhitenessChange" show-value />
        <text>美白</text>
      </view>
      
      <view class="buttons">
        <button @click="toggleLive">{{ isLiving ? '结束直播' : '开始直播' }}</button>
        <button @click="takeSnapshot">截图</button>
        <button @click="switchCameraPosition">切换摄像头</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pushUrl: 'rtmp://your-rtmp-server/path',
      beautyLevel: 5,
      whitenessLevel: 5,
      isLiving: false
    }
  },
  onReady() {
    // 页面加载完成后自动开启预览
    this.$refs.livePusher.startPreview();
  },
  methods: {
    async toggleLive() {
      if (this.isLiving) {
        await this.$refs.livePusher.stopPush();
        this.isLiving = false;
      } else {
        try {
          await this.$refs.livePusher.startPush();
          this.isLiving = true;
        } catch (err) {
          uni.showToast({
            title: '开始直播失败',
            icon: 'none'
          });
        }
      }
    },
    
    async takeSnapshot() {
      try {
        const result = await this.$refs.livePusher.snapshot();
        uni.showToast({
          title: '截图成功',
          icon: 'success'
        });
        // 可以在这里处理截图，比如上传或保存
      } catch (err) {
        uni.showToast({
          title: '截图失败',
          icon: 'none'
        });
      }
    },
    
    switchCameraPosition() {
      this.$refs.livePusher.switchCamera();
    },
    
    onBeautyChange(e) {
      this.beautyLevel = e.detail.value;
    },
    
    onWhitenessChange(e) {
      this.whitenessLevel = e.detail.value;
    },
    
    onStateChange(e) {
      const { code, message } = e.detail;
      console.log(`[推流状态] code: ${code}, message: ${message}`);
      
      // 处理特定状态码
      if (code < 0) {
        uni.showToast({
          title: `推流异常: ${message}`,
          icon: 'none'
        });
      }
    },
    
    onNetStatus(e) {
      console.log('[网络状态]', e.detail);
    },
    
    onError(e) {
      console.error('[推流错误]', e.detail);
      uni.showModal({
        title: '推流错误',
        content: `错误码: ${e.detail.errCode}, 错误信息: ${e.detail.errMsg}`,
        showCancel: false
      });
    },
    
    onStarted() {
      uni.showToast({
        title: '开始推流成功',
        icon: 'success'
      });
    },
    
    onStopped() {
      uni.showToast({
        title: '已停止推流',
        icon: 'none'
      });
    }
  }
}
</script>

<style lang="scss">
.live-page {
  position: relative;
  width: 100%;
  height: 100vh;
  
  .operation-bar {
    position: absolute;
    bottom: 40rpx;
    left: 0;
    right: 0;
    padding: 20rpx;
    background-color: rgba(0, 0, 0, 0.3);
    
    .beauty-control,
    .whiteness-control {
      margin-bottom: 20rpx;
      
      text {
        color: #fff;
        font-size: 24rpx;
        margin-left: 10rpx;
      }
    }
    
    .buttons {
      display: flex;
      justify-content: space-around;
      
      button {
        flex: 1;
        margin: 0 10rpx;
        font-size: 28rpx;
        height: 70rpx;
        line-height: 70rpx;
      }
    }
  }
}
</style>

注意事项

1. 在App平台使用本组件，需要在 manifest.json 中勾选 LivePusher(直播推流) 模块。
2. live-pusher 是原生组件，在小程序中层级最高，需要使用 cover-view 覆盖。
3. 在App端的nvue页面中使用时没有层级限制。
4. 推流前需要确保有可用的网络连接，且用户已授予相机和麦克风权限。
5. 如需在安卓后台继续推流，请配置应用为前台服务。

常见问题

1. 推流地址格式

推流地址一般为RTMP格式，例如：rtmp://domain/app/stream。

2. 获取不到摄像头/麦克风权限

确保已经在应用中申请了相机和麦克风权限，可以在组件挂载前先调用权限申请API：

onLoad() {
  // 请求相机权限
  uni.authorize({
    scope: 'scope.camera',
    success() {
      console.log('相机权限已获取');
    },
    fail() {
      uni.showModal({
        title: '提示',
        content: '请允许使用摄像头权限',
        showCancel: false
      });
    }
  });
  
  // 请求麦克风权限
  uni.authorize({
    scope: 'scope.record',
    success() {
      console.log('麦克风权限已获取');
    },
    fail() {
      uni.showModal({
        title: '提示',
        content: '请允许使用麦克风权限',
        showCancel: false
      });
    }
  });
}

3. 如何处理网络异常

可以在netstatus事件中监控网络状态，当检测到网络异常时，可以尝试重新连接或提示用户：

onNetStatus(e) {
  const info = e.detail;
  
  // 检测网络质量
  if (info.netSpeed < 100) { // 网速过低
    uni.showToast({
      title: '网络状况不佳，请检查网络连接',
      icon: 'none'
    });
  }
  
  // 也可以根据videoBitrate等参数动态调整画质
  if (info.videoBitrate < 200) {
    // 可以考虑降低画质
    // this.mode = 'SD';
  }
}

更多资源

• uni-app官方文档 - live-pusher组件
• uni.createLivePusherContext API文档