fixed

src/views/Monitor/camera.vue

@@ -0,0 +1,131 @@
+<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="" /> -->
+        <img
+          ref="playBtnRef"
+          @click="switchPlayStatus"
+          src="../../assets/play.png"
+          alt=""
+        />
+        <!-- <img src="../../assets/next.png" alt="" /> -->
+      </div>
+      <div class="desc">摄像头1</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,
+  },
+});
+const { width, height } = toRefs(props);
+
+const videoElementRef = ref();
+// const playBtnRef = ref();
+
+let flvPlayer = flvjs.createPlayer({
+  type: "flv",
+  url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
+  //   url: "http://localhost:8000/lycoris_recoil.flv",
+});
+
+// 切换播放状态
+const switchPlayStatus = () => {
+  if (!videoElementRef.value) return;
+  if (videoElementRef.value.paused) {
+    console.log(flvPlayer);
+    flvPlayer.play();
+  } else {
+    flvPlayer.pause();
+  }
+};
+const flvPlayerEventHandler = (e) => {
+  console.log(e);
+};
+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: 100px;
+    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>