## 一、獲取狀態欄高度
## 二、定義布局的內容距離頂部的間距為狀態欄高度
## 三、定義左上角關閉布局
## 四、定義輸入直播間名稱布局
## 五、定義工具布局
## 六、 定義開始視頻直播按鈕
## 七、 最終代碼
```
<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 優化前端部分問題(二)
- 第七章 登錄注冊頁面開發