Files
2023-03-24 13:28:06 +08:00

163 lines
3.7 KiB
Vue

<template>
<div
:class="`monitor-item flex items-center flex-col`"
:style="`width: ${width}px;height: ${height}px;`"
>
<!-- <img src="../../assets/screen.png" class="monitor-screen" /> -->
<div class="video-wrap">
<video class="monitor-screen" ref="videoElementRef"></video>
<!-- <div class="overlay" @click="router.push('/monitor/detail')"></div> -->
</div>
<div class="flex w-full justify-between pt-2 pl-4 pr-4">
<div class="controls flex justify-between">
<!-- <img src="../../assets/prev.png" alt="" /> -->
<div
ref="playBtnRef"
@click="switchPlayStatus"
:class="`playbtn iconfont icon-${
isPlaying ? 'zanting_o' : 'bofang_o'
}`"
alt=""
></div>
<div class="desc">{{ name }}</div>
<div
class="fullscreen iconfont icon-quanping_o"
@click="videoFullscreen"
></div>
<!-- <img src="../../assets/next.png" alt="" /> -->
</div>
</div>
</div>
</template>
<script setup name="camera">
import flvjs from "flv.js";
import { onMounted, onUnmounted, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
width: {
type: [String, Number],
// default: 800,
},
height: {
type: [String, Number],
default: 420,
},
source: {
type: String,
// default:
// "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
},
name: {
type: String,
default: "摄像头",
},
});
const { width, height, source, name } = toRefs(props);
const videoElementRef = ref();
// const playBtnRef = ref();
let flvPlayer = flvjs.createPlayer({
type: "flv",
url: source.value,
// url: "http://localhost:8000/lycoris_recoil.flv",
});
const isPlaying = ref(false);
// 切换播放状态
const switchPlayStatus = () => {
if (!videoElementRef.value) return;
if (videoElementRef.value.paused) {
console.log(flvPlayer);
flvPlayer.play();
isPlaying.value = true;
} else {
flvPlayer.pause();
isPlaying.value = false;
}
};
const flvPlayerEventHandler = (e) => {
console.log(e);
};
const videoFullscreen = () => {
videoElementRef.value.requestFullscreen();
};
onMounted(() => {
if (flvjs.isSupported()) {
flvPlayer.attachMediaElement(videoElementRef.value);
flvPlayer.load();
flvPlayer.on("ERROR", flvPlayerEventHandler);
// flvPlayer.play();
}
});
onUnmounted(() => {
console.log("destroy player here");
function flvDestroy() {
flvPlayer.off("ERROR", flvPlayerEventHandler);
flvPlayer.pause();
flvPlayer.unload();
flvPlayer.detachMediaElement();
flvPlayer.destroy();
flvPlayer = null;
}
flvDestroy();
});
</script>
<style lang="scss" scoped>
.monitor-item {
overflow: hidden;
// width: 400px;
// height: 280px;
// background-color: #158eff;
background-image: url(../../assets/monitor.png);
background-size: 100% 100%;
.video-wrap {
background-color: #333;
position: relative;
margin-top: 10%;
width: 98%;
height: 65%;
.monitor-screen {
width: 100%;
height: 100%;
}
.overlay {
z-index: 99;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}
.controls {
width: 100%;
.playbtn {
font-size: 40px;
color: #fff;
}
.fullscreen {
font-size: 40px;
color: #fff;
}
img {
width: 28px;
height: 28px;
}
}
.desc {
font-family: PingFangSC-Medium;
font-size: 16px;
color: #ffffff;
letter-spacing: 0;
line-height: 24px;
text-shadow: 0 0 7px #158eff;
font-weight: 500;
}
}
</style>