uniapp直播项目学习笔记4-推流功能

1.使用live-pusher 创建推流组件，具体配置如下，详细说明可查看https://uniapp.dcloud.io/api/media/live-pusher-context?id=createlivepushercontext

<live-pusher
		id='livePusher'
		ref="livePusher" 
		class="livePusher" 
		:url="url"
		:mode="mode" 
		:enable-camera="enableCamera" 
		:auto-focus="true" 
		:device-position="position"
		:beauty="beauty" 
		:whiteness="whiteness"
		aspect="9:16" 
		@statechange="statechange" 
		@netstatus="netstatus" 
		@error = "error"
		:style="'height: '+windowHeight+'px;'"
		style="width: 750rpx;"></live-pusher>

2.使用uni.createLivePusherContext(livePusherId, this) 创建 live-pusher 上下文 livePusherContext 对象。将其拿到然后实现预览预览等功能。

具体说明：https://uniapp.dcloud.io/api/media/live-pusher-context?id=createlivepushercontext

		onLoad() {
			let res = uni.getSystemInfoSync()
			this.windowHeight = res.windowHeight
		},
		onReady() {
			this.context = uni.createLivePusherContext('livePusher', this)
			this.startPreview()
		},
		methods: {
			// 开启预览
			startPreview(){
				this.context.startPreview({
					success:(e)=>{
						console.log(e);
					}
				})
			},

3.实现具体功能

以美颜为例，在点击时将其对于的popup的dialog组件的type名称传递过去，并赋值到data中，这样就知道具体点击了哪个功能，从而用v-if控制对应dailog的显示隐藏

<view style="height: 120rpx;width: 100rpx;"
 class="flex flex-column align-center justify-center" 
@click="openPopup('beauty')"







<!-- 美颜 -->
<view v-else-if="popupType === 'beauty'">
		<slider :min="0" :max="9" :step="1" :value="beauty" :block-size="18" show-value @change="handleSliderChange"/>
</view>
<!-- 美白 -->
<view v-else>
	<slider :min="0" :max="9" :step="1" :value="whiteness" :block-size="18" show-value @change="handleSliderChange"/>
</view>

美颜功能可用slider组件进行实现

具体配置：https://uniapp.dcloud.io/component/slider

  弹出框的具体标题显示可用计算属性拿到data中的数据后进行返回再动态绑定到组件上

		computed: {
			popupTitle() {
				let o = {
					mode:"画质",
					beauty:"美颜",
					whiteness:"美白",
				}
				return o[this.popupType]
			}