## 一、点击画质显示popup弹出层
## 二、 实现popup弹出层基础布局
## 三、实现切换画质布局
## 四、实现画质列表动态渲染
## 五、实现切换画质功能
## 六、 最终代码
```
<template>
<view>
<live-pusher
id="livePusher"
ref="livePusher"
class="livePusher"
url=""
:mode="mode"
:muted="true"
:enable-camera="enableCamera"
:auto-focus="autoFocus"
:beauty="beauty"
whiteness="whiteness"
device-position = "devicePosition"
@statechange="statechange"
@netstatus="netstatus"
@error="error"
:style="{'height' : windowHeight + 'px' }"
style="width:750rpx"
>
</live-pusher>
<view style="position: fixed; left : 0; right : 0; height: 500rpx;" :style="{'top' : statusBarHeight + 'px'}">
<!-- 关闭符号 -->
<view class="flex align-center justify-center" style="width: 90rpx; height:90rpx; background-color: yellow;">
<text class="iconfont text-white"></text>
</view>
<!-- 输入直播间标题 -->
<view class="position-absolute rounded p-2 flex align-center" style="left: 90rpx; right : 100rpx; height: 160rpx; background-color: rgba(0,0,0,0.2);">
<view class="position-relative rounded" style="width: 120rpx; height: 120rpx;">
<image src="/static/gift/3.png" style="width: 120rpx; height: 120rpx;"></image>
<text class="text-white position-absolute font" style="left:0; right:0; bottom:0;">更换封面</text>
</view>
<view class="flex-1 ml-2">
<input class="mb-2" type="text" value="" placeholder="请输入直播间标题"/>
<text class="text-white font">#请选择分类</text>
</view>
</view>
<!-- 工具 -->
<view class="position-absolute right-0 flex flex-column" style="width: 100rpx;">
<view @click="switchCamera" style="height: 120rpx; width: 100rpx;" class="flex flex-column align-center justify-center">
<text class="iconfont text-white mb-1"></text>
<text class="text-white font">翻转</text>
</view>
<view @click="openPopup('mode')" style="height: 120rpx; width: 100rpx;" class="flex flex-column align-center justify-center">
<text class="iconfont text-white mb-1"></text>
<text class="text-white font">画质</text>
</view>
<view style="height: 120rpx; width: 100rpx;" class="flex flex-column align-center justify-center">
<text class="iconfont text-white mb-1"></text>
<text class="text-white font">美颜</text>
</view>
<view style="height: 120rpx; width: 100rpx;" class="flex flex-column align-center justify-center">
<text class="iconfont text-white mb-1"></text>
<text class="text-white font">美白</text>
</view>
</view>
</view>
<!-- 开启直播按钮 -->
<view class="position-fixed bg-main flex align-center justify-center rounded-circle" style="left : 100rpx; right : 100rpx; bottom: 100rpx; height : 120rpx;">
<text class="text-white font-md ">开始视频直播</text>
</view>
<uni-popup type="bottom" ref="popup">
<view class="bg-white">
<view class="flex align-center justify-center border-bottom" style="height : 90rpx;">
<text class="font">提示</text>
</view>
<view>
<view @click="chooseMode(item)" v-for="(item,index) in modeList" :key="index" :class="mode === item.type ? 'bg-main' : ''" class="flex align-center justify-center py-2 " hover-class="bg-light">
<text class="font-md " :class="mode === item.type ? 'text-white' : ''">{{item.desc}}</text>
</view>
</view>
<view class="f-divider"></view>
<view class="flex align-center justify-center " style="height : 90rpx;">
<text class="font">取消</text>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
// 屏幕的高度
windowHeight : 0,
// 保存live-pusher 实例对象
context : null,
// 保存状态栏高度
statusBarHeight : 0,
// 画质数据列表
modeList : [
{
type : "SD",
desc : "标清"
},
{
type : "HD",
desc : "高清"
},
{
type : "FHD",
desc : "超清"
}
],
// 推流地址，支持RTMP协议。
url : "",
// 推流视频模式，可取值：SD（标清）, HD（高清）, FHD（超清）。
mode : "SD",
// 开启摄像头
enableCamera : true,
// 自动聚集
autoFocus : true,
// 美颜，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。
beauty : 0,
// 美白，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。
whiteness : 0,
// 前置或后置，值为front, back
devicePosition : "back"
};
},
onLoad() {
const res = uni.getSystemInfoSync()
this.windowHeight = res.windowHeight
this.statusBarHeight = res.statusBarHeight
},
onReady() {
this.context = uni.createLivePusherContext("livePusher",this)
this.startPreview()
},
methods: {
// 切换相机镜头
switchCamera(){
this.context.switchCamera({
success: (e) => {
console.log(e)
this.devicePosition = this.devicePosition === "back" ? 'front' : 'back'
}
})
},
// 拉起popup弹窗
openPopup(){
this.$refs.popup.open()
},
// 切换画质
chooseMode(item){
this.mode = item.type
uni.showToast({
title : "画质切换为" + item.desc,
icon : "none"
})
this.$refs.popup.close()
},
// 开启预览
startPreview(){
this.context.startPreview({
success : (e)=>{
console.log(e)
}
})
},
// 监听直播状态的变化
statechange(e){
console.log(e)
},
// 监听直播网络状态变化
netstatus(e){
console.log(e)
},
// 监听直播错误变化
error(e){
console.log(e)
}
}
};
</script>
<style></style>
```
- 第一章 项目介绍和准备
- 1.1 课程介绍
- 1.2 环境搭建和项目创建
- 1.3 引入全局样式
- 1.4 引入图标库
- 1.5 底部导航和凸起按钮配置
- 第二章 首页开发
- 2.1 首页开发(一)
- 2.2 首页开发(二)
- 第三章 直播间(用户端)开发
- 3.1 基础布局开发(一)
- 3.2 基础布局开发(二)
- 3.3 个人信息和观看情况
- 3.4 接收礼物组件(一) - 布局
- 3.5 接收礼物组件(二) - 自动滚动
- 3.6 接收礼物组件(三) - 自动消失
- 3.7 底部操作条
- 3.8 弹幕组件开发(一) - 输入框弹出层
- 3.9 弹幕组件开发(二) - 置于底部功能
- 3.10 弹幕组件开发(三) - 发送弹幕
- 3.11 送礼物弹框组件(一) - 布局
- 3.12 送礼物弹框组件(二) - 功能
- 第四章 充值金币页开发
- 4.1 充值金币页开发(一)
- 4.2 充值金币页开发(二)
- 第五章 直播间(主播端)开发
- 5.1 创建直播页 - 推流组件
- 5.2 创建直播页 - 布局(一)
- 5.3 创建直播页 - 布局(二)
- 5.4 创建直播页 - 镜头反转
- 5.5 创建直播页 - 切换画质
- 5.6 创建直播页 - 美颜和美白
- 5.7 关于退出创建直播页黑边问题
- 5.8 主播直播间(一)
- 5.9 主播直播间(二)
- 第六章 个人中心页面开发
- 6.1 个人中心页
- 第七章 egg.js基础
- 第八章 后台管理系统开发
- 8.1 创建项目和基础配置
- 第九章 交互和部署上线
- 9.1 登录注册交互实现
- 9.2 个人中心交互实现
- 9.3 退出登录以及初始化用户信息
- 9.5 权限验证
- 9.6 首页交互 - 上拉加载与下拉刷新
- 9.7 创建订单和微信支付(一)
- 9.8 创建订单和微信支付(二)
- 9.9 微信支付调试和充值页交互
- 9.10 直播间交互
- 9.11 socket.io安装与通讯(一)
- 9.12 socket.io安装和通讯(二)
- 9.13 加入直播间(一)
- 9.14 加入直播间(二)
- 9.15 加入直播间(三)
- 9.16 离开直播间
- 9.17 直播间实时在线用户列表
- 9.18 直播间实时弹幕功能
- 9.19 直播间送礼物功能
- 9.20 创建直播功能交互(一)
- 9.21 创建直播功能交互(二)
- 9.22 优化前端部分问题(一)
- 9.23 优化前端部分问题(二)
- 第七章 登录注册页面开发