## 一、获取状态栏高度
## 二、定义布局的内容距离顶部的间距为状态栏高度
## 三、定义左上角关闭布局
## 四、定义输入直播间名称布局
## 五、定义工具布局
## 六、 定义开始视频直播按钮
## 七、 最终代码
```
<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 bg-danger " style="left: 90rpx; right : 100rpx; height: 160rpx;"></view>
<!-- 工具 -->
<view class="position-absolute right-0 flex flex-column" style="width: 100rpx;">
<view style="height: 120rpx; width: 100rpx;" class="flex flex-column align-center justify-center bg-main"></view>
<view style="height: 120rpx; width: 100rpx;" class="flex flex-column align-center justify-center bg-main"></view>
<view style="height: 120rpx; width: 100rpx;" class="flex flex-column align-center justify-center bg-main"></view>
<view style="height: 120rpx; width: 100rpx;" class="flex flex-column align-center justify-center bg-main"></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>
</view>
</template>
<script>
export default {
data() {
return {
// 屏幕的高度
windowHeight : 0,
// 保存live-pusher 实例对象
context : null,
// 保存状态栏高度
statusBarHeight : 0,
// 推流地址，支持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: {
// 开启预览
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 优化前端部分问题(二)
- 第七章 登录注册页面开发