163 lines
3.7 KiB
Vue
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>
|