beauty="0"
whiteness="0"
aspect="16:9"
@statechange="statechange"
@netstatus="netstatus"
@error="error"
</live-pusher>
<!-- 顶部状态栏 -->
<cover-view class="top-bar">
<cover-view class="quality-selector" @click="switchMode()">
<text class="current-quality">{{ currentQuality.text }}</text>
</cover-view>
<cover-view class="left-info">{{ formattedTime }}</cover-view>
<cover-image
src="/static/live-creame.png"
class="control-icon"
@click="switchCamera()"
/>
</cover-view>
<!-- 底部状态栏 -->
<cover-view class="bottom-bar">
<cover-image src="/static/live-left.png" class="control-icon" />
<cover-image
class="live-icon"
/>
<cover-image src="/static/live-right.png" class="control-icon" />
</cover-view>
</view>
</template>
<script>
import { device } from "@/utils/device.js";
export default {
data() {
return {
isPushing: false,
currentQuality: { value: "FHD", text: "超清" },
livesrc: "/static/live-start.png",
elapsedTime: 0,
timer: null,
pushurl: "",
};
},
computed: {
formattedTime() {
const hours = Math.floor(this.elapsedTime / 3600)
.toString()
.padStart(2, "0");
const minutes = Math.floor((this.elapsedTime % 3600) / 60)
.toString()
.padStart(2, "0");
const seconds = (this.elapsedTime % 60).toString().padStart(2, "0");
return ${hours}:${minutes}:${seconds};
},
pusherProps() {
const base = {};
// 只有华为苹果才加 mode
if (device.isHuawei || device.isApple) {
console.log("huaweihuaiwe");
base.mode = this.currentQuality.value;
}
return base;
},
},
onLoad(options) {
this.pushurl = options.pushurl;
console.log(this.pushurl);
// #ifdef APP-PLUS
// 动态设置为横屏
if (plus.screen) {
if (device.isApple) {
plus.screen.lockOrientation("landscape-secondary");
} else {
plus.screen.lockOrientation("landscape-primary");
}
}
plus.navigator.setFullscreen(true); // 隐藏手机顶部状态栏
// #endif
if (!device.isHuawei && !device.isApple) {
this.currentQuality = { value: "SD", text: "标清" };
}
},
onBackPress(options) {
// #ifdef APP-PLUS
// 恢复默认屏幕方向
if (plus.screen) {
plus.screen.lockOrientation("portrait-primary");
}
plus.navigator.setFullscreen(false); // 显示手机顶部状态栏
// #endif
},
onUnload() {
// #ifdef APP-PLUS
// 恢复默认屏幕方向 按安卓默认返回按钮 onUnload没有调用
if (plus.screen) {
plus.screen.unlockOrientation();
}
plus.navigator.setFullscreen(false); // 显示手机顶部状态栏
// #endif
},
onReady() {
// 注意:需要在onReady中 或 onLoad 延时
this.context = uni.createLivePusherContext("livePusher", this);
setTimeout(() => {
this.startPreview();
this.switchCamera();
}, 300); // 延迟 300ms 确保页面渲染完成
},
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() {
this.context.start({
success: (a) => {
console.log("livePusher.start:" + JSON.stringify(a));
},
});
},
close() {
this.context.close({
success: (a) => {
console.log("livePusher.close:" + JSON.stringify(a));
},
});
},
snapshot() {
this.context.snapshot({
success: (e) => {
console.log(JSON.stringify(e));
},
});
},
resume() {
this.context.resume({
success: (a) => {
console.log("livePusher.resume:" + JSON.stringify(a));
},
});
},
pause() {
this.context.pause({
success: (a) => {
console.log("livePusher.pause:" + JSON.stringify(a));
},
});
},
stop() {
this.context.stop({
success: (a) => {
console.log(JSON.stringify(a));
},
});
},
switchCamera() {
this.context.switchCamera({
success: (a) => {
console.log("livePusher.switchCamera:" + JSON.stringify(a));
},
});
},
startPreview() {
this.context.startPreview({
success: (a) => {
console.log("livePusher.startPreview:" + JSON.stringify(a));
},
});
},
stopPreview() {
this.context.stopPreview({
success: (a) => {
console.log("livePusher.stopPreview:" + JSON.stringify(a));
},
});
},
switchMode() {
if (device.isHuawei || device.isApple) {
console.log("Switching mode...");
console.log("this.currentQuality.value:", this.currentQuality.value);
if (this.currentQuality.value === "SD") {
this.currentQuality.value = "HD";
this.currentQuality.text = "高清";
} else if (this.currentQuality.value === "HD") {
this.currentQuality.value = "FHD";
this.currentQuality.text = "超清";
} else if (this.currentQuality.value === "FHD") {
this.currentQuality.value = "SD";
this.currentQuality.text = "标清";
}
console.log("Current quality:", this.currentQuality.text);
}
},
pushlive() {
if (this.isPushing) {
this.isPushing = false;
this.livesrc = "/static/live-start.png";
this.stopTimer();
this.stop();
} else {
this.isPushing = true;
this.livesrc = "/static/live-stop.png";
this.startTimer();
this.start();
}
},
startTimer() {
this.elapsedTime = 0;
this.timer = setInterval(() => {
this.elapsedTime++;
// // 模拟观众增长
// if (this.elapsedTime % 5 === 0) {
// this.viewerCount += Math.floor(Math.random() * 5)
// }
}, 1000);
},
stopTimer() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
},
};
</script>
<style>
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
}
.livePusher {
flex: 1;
}
.top-bar {
position: fixed;
top: 30rpx;
left: 10rpx;
right: 10rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.bottom-bar {
position: fixed;
left: 10rpx;
right: 10rpx;
bottom: 30rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.control-icon {
width: 30rpx;
height: 30rpx;
}
.live-icon {
width: 40rpx;
height: 40rpx;
}
.quality-selector {
flex-direction: row;
align-items: center;
padding: 10rpx 18rpx;
background-color: rgba(255, 255, 255, 0.15);
border-radius: 40rpx;
}
.current-quality {
color: #ffffff;
font-size: 15rpx;
font-weight: 500;
}
</style>
0 个回复