mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-13 00:50:40 +08:00
refactor: 架构升级
This commit is contained in:
小莫唐尼
@@ -0,0 +1,280 @@
|
||||
# live-pusher
|
||||
|
||||
## Instructions
|
||||
|
||||
推荐 uni直播 ，官方内置，使用简单，且价格便宜，更具高性价比！ 详情 。
|
||||
|
||||
实时音视频录制，也称直播推流。
|
||||
|
||||
平台差异说明
|
||||
|
||||
### Syntax
|
||||
|
||||
- 使用 `<live-pusher />`（或 `<live-pusher></live-pusher>`，当需要包裹子节点时）。
|
||||
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
||||
|
||||
#### Properties
|
||||
|
||||
| 属性 | 类型 | 默认值 | 必填 | 说明 | 平台差异说明 |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| url | string | | 是 | 推流地址，支持RTMP协议。 | |
|
||||
| mode | string | SD | 否 | 推流视频模式，可取值：SD（标清）, HD（高清）, FHD（超清）。 | |
|
||||
| aspect | string | 3:2 | 否 | 视频宽高比例 | |
|
||||
| muted | Boolean | false | 否 | 是否静音。 | |
|
||||
| enable-camera | Boolean | true | 否 | 开启摄像头。 | |
|
||||
| auto-focus | Boolean | true | 否 | 自动聚集。 | |
|
||||
| beauty | Number | 0 | 否 | 美颜，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。 | |
|
||||
| whiteness | Number | 0 | 否 | 美白，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。 | |
|
||||
| orientation | String | "vertical" | 否 | 画面方向 | |
|
||||
| min-bitrate | Number | 200 | 否 | 最小码率。 | |
|
||||
| max-bitrate | Number | 1000 | 否 | 最大码率。 | |
|
||||
| audio-quality | string | high | 否 | 高音质(48KHz)或低音质(16KHz)，值为high, low | 微信小程序1.7.0 |
|
||||
| waiting-image | string | | 否 | 进入后台时推流的等待画面 | 微信小程序1.7.0 |
|
||||
| waiting-image-hash | string | | 否 | 等待画面资源的MD5值 | 微信小程序1.7.0 |
|
||||
| zoom | boolean | false | 否 | 调整焦距 | 微信小程序2.1.0 |
|
||||
| device-position | string | front | 否 | 前置或后置，值为front, back | 微信小程序2.3.0 |
|
||||
| background-mute | boolean | false | 否 | 进入后台时是否静音 | 微信小程序1.7.0 |
|
||||
| remote-mirror | boolean | false | 否 | 设置推流画面是否镜像，产生的效果在 live-player 反应到 | 微信小程序2.10.0 |
|
||||
| local-mirror | string | auto | 否 | 控制本地预览画面是否镜像 | 微信小程序2.10.0 |
|
||||
| audio-reverb-type | number | 0 | 否 | 音频混响类型 | 微信小程序2.10.0 |
|
||||
| enable-mic | boolean | true | 否 | 开启或关闭麦克风 | 微信小程序2.10.0 |
|
||||
| enable-agc | boolean | false | 否 | 是否开启音频自动增益 | 微信小程序2.10.0 |
|
||||
| enable-ans | boolean | false | 否 | 是否开启音频噪声抑制 | 微信小程序2.10.0 |
|
||||
| audio-volume-type | string | voicecall | 否 | 音量类型 | 微信小程序2.10.0 |
|
||||
|
||||
#### Events
|
||||
|
||||
| 参数 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| code | Number | |
|
||||
| message | string | |
|
||||
|
||||
#### Platform Compatibility
|
||||
|
||||
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/live-pusher.html`
|
||||
|
||||
### Examples
|
||||
|
||||
### Example (Example 1)
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<live-pusher id='livePusher' ref="livePusher" class="livePusher" url=""
|
||||
mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2"
|
||||
aspect="9:16" @statechange="statechange" @netstatus="netstatus" @error = "error"
|
||||
></live-pusher>
|
||||
<button class="btn" @click="start">开始推流</button>
|
||||
<button class="btn" @click="pause">暂停推流</button>
|
||||
<button class="btn" @click="resume">resume</button>
|
||||
<button class="btn" @click="stop">停止推流</button>
|
||||
<button class="btn" @click="snapshot">快照</button>
|
||||
<button class="btn" @click="startPreview">开启摄像头预览</button>
|
||||
<button class="btn" @click="stopPreview">关闭摄像头预览</button>
|
||||
<button class="btn" @click="switchCamera">切换摄像头</button>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 2)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<live-pusher id='livePusher' ref="livePusher" class="livePusher" url=""
|
||||
mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2"
|
||||
aspect="9:16" @statechange="statechange" @netstatus="netstatus" @error = "error"
|
||||
></live-pusher>
|
||||
<button class="btn" @click="start">开始推流</button>
|
||||
<button class="btn" @click="pause">暂停推流</button>
|
||||
<button class="btn" @click="resume">resume</button>
|
||||
<button class="btn" @click="stop">停止推流</button>
|
||||
<button class="btn" @click="snapshot">快照</button>
|
||||
<button class="btn" @click="startPreview">开启摄像头预览</button>
|
||||
<button class="btn" @click="stopPreview">关闭摄像头预览</button>
|
||||
<button class="btn" @click="switchCamera">切换摄像头</button>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Example (Example 3)
|
||||
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onReady() {
|
||||
// 注意：需要在onReady中 或 onLoad 延时
|
||||
this.context = uni.createLivePusherContext("livePusher", this);
|
||||
},
|
||||
methods: {
|
||||
statechange(e) {
|
||||
console.log("statechange:" + JSON.stringify(e));
|
||||
},
|
||||
netstatus(e) {
|
||||
console.log("netstatus:" + JSON.stringify(e));
|
||||
},
|
||||
error(e) {
|
||||
console.log("error:" + JSON.stringify(e));
|
||||
},
|
||||
start: function() {
|
||||
this.context.start({
|
||||
success: (a) => {
|
||||
console.log("livePusher.start:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
close: function() {
|
||||
this.context.close({
|
||||
success: (a) => {
|
||||
console.log("livePusher.close:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
snapshot: function() {
|
||||
this.context.snapshot({
|
||||
success: (e) => {
|
||||
console.log(JSON.stringify(e));
|
||||
}
|
||||
});
|
||||
},
|
||||
resume: function() {
|
||||
this.context.resume({
|
||||
success: (a) => {
|
||||
console.log("livePusher.resume:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
pause: function() {
|
||||
this.context.pause({
|
||||
success: (a) => {
|
||||
console.log("livePusher.pause:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
stop: function() {
|
||||
this.context.stop({
|
||||
success: (a) => {
|
||||
console.log(JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
switchCamera: function() {
|
||||
this.context.switchCamera({
|
||||
success: (a) => {
|
||||
console.log("livePusher.switchCamera:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
startPreview: function() {
|
||||
this.context.startPreview({
|
||||
success: (a) => {
|
||||
console.log("livePusher.startPreview:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
stopPreview: function() {
|
||||
this.context.stopPreview({
|
||||
success: (a) => {
|
||||
console.log("livePusher.stopPreview:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example (Example 4)
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
onReady() {
|
||||
// 注意：需要在onReady中 或 onLoad 延时
|
||||
this.context = uni.createLivePusherContext("livePusher", this);
|
||||
},
|
||||
methods: {
|
||||
statechange(e) {
|
||||
console.log("statechange:" + JSON.stringify(e));
|
||||
},
|
||||
netstatus(e) {
|
||||
console.log("netstatus:" + JSON.stringify(e));
|
||||
},
|
||||
error(e) {
|
||||
console.log("error:" + JSON.stringify(e));
|
||||
},
|
||||
start: function() {
|
||||
this.context.start({
|
||||
success: (a) => {
|
||||
console.log("livePusher.start:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
close: function() {
|
||||
this.context.close({
|
||||
success: (a) => {
|
||||
console.log("livePusher.close:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
snapshot: function() {
|
||||
this.context.snapshot({
|
||||
success: (e) => {
|
||||
console.log(JSON.stringify(e));
|
||||
}
|
||||
});
|
||||
},
|
||||
resume: function() {
|
||||
this.context.resume({
|
||||
success: (a) => {
|
||||
console.log("livePusher.resume:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
pause: function() {
|
||||
this.context.pause({
|
||||
success: (a) => {
|
||||
console.log("livePusher.pause:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
stop: function() {
|
||||
this.context.stop({
|
||||
success: (a) => {
|
||||
console.log(JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
switchCamera: function() {
|
||||
this.context.switchCamera({
|
||||
success: (a) => {
|
||||
console.log("livePusher.switchCamera:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
startPreview: function() {
|
||||
this.context.startPreview({
|
||||
success: (a) => {
|
||||
console.log("livePusher.startPreview:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
stopPreview: function() {
|
||||
this.context.stopPreview({
|
||||
success: (a) => {
|
||||
console.log("livePusher.stopPreview:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference: [Official Documentation](https://uniapp.dcloud.net.cn/component/live-pusher.html)
|
||||
Reference in New Issue
Block a user