直播推流组件

live-pusher 组件用于实现实时音视频录制和直播推流，支持多平台使用。用户可以通过该组件将音视频内容推送到指定的服务器，实现直播推流功能。

1. 什么是 live-pusher 组件？

live-pusher 组件是一种直播推流工具，允许用户通过摄像头录制音视频并实时推送到指定的服务器。该组件常用于直播、会议、互动等场景，支持静音、美颜、前后置摄像头切换等功能。

使用场景

• 实时直播推流：通过摄像头采集音视频内容并推送到服务器。
• 视频会议：进行多人视频通话和互动。
• 社交直播：提供类似抖音、映客等应用中的直播推流功能。
• 互动教学：在在线教育平台中进行实时授课和互动。

2. live-pusher 组件的常用属性

live-pusher 组件提供了多种属性，用于控制推流的模式、视频质量、音频设置等。以下是常用属性的详细说明及使用示例。

属性名	类型	默认值	说明
url	String	无	推流地址，支持 RTMP 协议
mode	String	SD	推流视频模式，支持 SD（标清）、HD（高清）、FHD（超清）
muted	Boolean	false	是否静音录制
enable-camera	Boolean	true	是否启用摄像头
auto-focus	Boolean	true	是否自动对焦
beauty	Number	0	美颜效果，取值范围 0-9，0 表示关闭
whiteness	Number	0	美白效果，取值范围 0-9，0 表示关闭
min-bitrate	Number	200	最小码率，单位 kbps
max-bitrate	Number	1000	最大码率，单位 kbps
device-position	String	front	摄像头位置，支持 front（前置）和 back（后置）
orientation	String	vertical	视频画面方向，支持 vertical（竖直）和 horizontal（水平）
local-mirror	String	auto	控制本地预览画面是否镜像，支持 auto、enable、disable
audio-reverb-type	Number	0	音频混响效果，取值范围 0-7
enable-mic	Boolean	true	是否启用麦克风
@statechange	EventHandle	无	状态变化事件，返回 code
@netstatus	EventHandle	无	网络状态变化事件，返回 info
@error	EventHandle	无	渲染错误事件，返回 errMsg 和 errCode

2.1 推流地址 url

• 说明：指定推流的音视频地址，支持 RTMP 协议。
• 类型：String
• 默认值：无

<template>
  <view>
    <!-- 指定推流地址 -->
    <live-pusher :url="streamUrl" mode="HD" style="width: 100%; height: 300px;" />
  </view>
</template>

<script setup>
const streamUrl = 'rtmp://example.com/live-stream';
</script>

2.2 推流模式 mode

• 说明：设置推流的视频质量模式，支持 SD（标清）、HD（高清）、FHD（超清）。
• 类型：String
• 默认值：SD

<template>
  <view>
    <!-- 设置推流模式为高清 -->
    <live-pusher :url="streamUrl" mode="HD" style="width: 100%; height: 300px;" />
  </view>
</template>

<script setup>
const streamUrl = 'rtmp://example.com/live-stream';
</script>

2.3 静音推流 muted

• 说明：是否在推流时禁用音频，静音推流。
• 类型：Boolean
• 默认值：false

<template>
  <view>
    <!-- 静音推流 -->
    <live-pusher :url="streamUrl" :muted="true" style="width: 100%; height: 300px;" />
  </view>
</template>

<script setup>
const streamUrl = 'rtmp://example.com/live-stream';
</script>

2.4 摄像头镜像 local-mirror

• 说明：控制本地预览画面是否镜像，支持 auto（默认）、enable（镜像）、disable（不镜像）。
• 类型：String
• 默认值：auto

<template>
  <view>
    <!-- 设置本地镜像预览 -->
    <live-pusher :url="streamUrl" local-mirror="enable" style="width: 100%; height: 300px;" />
  </view>
</template>

<script setup>
const streamUrl = 'rtmp://example.com/live-stream';
</script>

2.5 推流事件监听 @statechange, @netstatus, @error

• 说明：监听推流状态变化、网络状态变化和推流错误等事件。
• 类型：EventHandle

<template>
  <view>
    <!-- 监听推流事件 -->
    <live-pusher :url="streamUrl" mode="HD" @statechange="onStateChange" @netstatus="onNetStatus" @error="onError" style="width: 100%; height: 300px;" />
  </view>
</template>

<script setup>
const streamUrl = 'rtmp://example.com/live-stream';

// 监听状态变化
const onStateChange = (e) => {
  console.log('推流状态变化:', e.detail.code);
};

// 监听网络状态
const onNetStatus = (e) => {
  console.log('网络状态:', e.detail.info);
};

// 监听推流错误
const onError = (e) => {
  console.error('推流错误:', e.detail.errMsg);
};
</script>

3. 直播推流与控制功能

以下案例展示了如何使用 live-pusher 组件进行直播推流，并结合按钮实现推流的开始、暂停、恢复等控制功能。

<template>
  <view>
    <!-- 推流视频 -->
    <live-pusher id="livePusher" :url="streamUrl" mode="HD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="3" :whiteness="2" style="width: 100%; height: 300px;" />

    <!-- 控制按钮 -->
    <view class="control-buttons">
      <button @click="start">开始推流</button>
      <button @click="pause">暂停推流</button>
      <button @click="resume">恢复推流</button>
      <button @click="stop">停止推流</button>
      <button @click="switchCamera">切换摄像头</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 推流地址
const streamUrl = 'rtmp://example.com/live-stream';

// 创建 livePusher 上下文
let livePusherContext;
onMounted(() => {
  livePusherContext = uni.createLivePusherContext('livePusher');
});

// 开始推流
const start = () => {
  livePusherContext.start({
    success: (res) => {
      console.log('开始推流成功', res);
    },
  });
};

// 暂停推流
const pause = () => {
  livePusherContext.pause({
    success: (res) => {
      console.log('暂停推流成功', res);
    },
  });
};

// 恢复推流
const resume = () => {
  livePusherContext.resume({
    success: (res) => {
      console.log('恢复推流成功', res);
    },
  });
};

// 停止推流
const stop = () => {
  livePusherContext.stop({
    success: (res) => {
     

 console.log('停止推流成功', res);
    },
  });
};

// 切换摄像头
const switchCamera = () => {
  livePusherContext.switchCamera({
    success: (res) => {
      console.log('切换摄像头成功', res);
    },
  });
};
</script>

<style scoped>
.control-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}

button {
  padding: 10px 20px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>