init

rtsp-vue/src/views/video/device/component/cusPlayer.vue

@@ -0,0 +1,203 @@
+<template>
+  <div style="position: absolute;height: 100%;width: 100%;display: flex;align-items: center;justify-content: center;">
+    <div class="video" v-show="isPlay" :id="elId"></div>
+    <div v-show="!isPlay" style="color: #08979C;font-size: 25px;">暂无视频源</div>
+  </div>
+</template>
+
+<script>
+import FlvJsPlayer from 'xgplayer-flv.js';
+import Player from 'xgplayer';
+import { v4 } from 'uuid';
+export default {
+  name: 'CusPlayer',
+  components: {},
+  data() {
+    return {
+      isPlay: false,
+      player: null,
+      elId: ''
+    };
+  },
+  created() {
+    this.elId = v4(); // 避免key重复
+  },
+  mounted() {
+    var that = this;
+    document.addEventListener('visibilitychange', function() {
+      // console.log(document.visibilityState);
+      // console.log(document.hidden);
+      if (document.hidden) {
+        console.log("页面隐藏")
+      }
+    });
+  },
+  methods: {
+    createPlayer(url, hasCloseBtn, index) {
+      if (!url) {
+        return;
+      }
+
+      if (this.player) {
+        this.changeVideo(url);
+        return;
+      }
+
+      this.isPlay = true;
+      this.player = new FlvJsPlayer({
+        id: this.elId,
+        url: url,
+        // fitVideoSize: 'auto',
+        fluid: true,
+        autoplay: true,
+        isLive: true,
+        playsinline: false,
+        screenShot: true,
+        whitelist: [''],
+        ignores: ['time'],
+        closeVideoClick: true,
+        // errorTips: '<span class="app-error">无视频源</span>',
+        customConfig: {
+          isClickPlayBack: false
+        },
+        flvOptionalConfig: {
+          enableWorker: true,
+          enableStashBuffer: false, //关闭缓存
+          stashInitialSize: 2048, //缓存大小2m
+          lazyLoad: false,
+          lazyLoadMaxDuration: 40 * 60,
+          autoCleanupSourceBuffer: true,
+          autoCleanupMaxBackwardDuration: 35 * 60,
+          autoCleanupMinBackwardDuration: 30 * 60
+        } //flv.js可选配置项 [flv.js配置](https://github.com/bilibili/flv.js/blob/master/docs/api.md#config)
+      });
+
+      // 自定义播放器按钮
+      // let divStr =
+      //   '<i class="btn-hover el-icon-camera button-screen-shot" style="font-size: 23px;margin-right: 10px;pointer-events: auto;"></i>' +
+      //   '<i class="btn-hover el-icon-s-tools button-set" style="font-size: 23px;margin-right: 10px;pointer-events: auto;"></i>' +
+      //   '<i class="btn-hover el-icon-video-camera-solid button-history" style="font-size: 23px;margin-right: 10px;pointer-events: auto;"></i>';
+
+      let divStr = '<i class="btn-hover el-icon-d-arrow-left button-playback" style="font-size: 23px;pointer-events: auto;"></i>';
+
+      let divClose = '<i @click="closePlayer" class="btn-hover el-icon-close app-close-btn-c"></i>';
+
+      let util = Player.util;
+      // let customBtn = util.createDom('div', divStr, {}, 'flex align-center justify-center app-player-button'); //'div', divStr, {}, 'class'
+      let customBtn = util.createDom(
+          'div',
+          divStr,
+          { style: 'width: 40px;heigth:40px;position: absolute;right: 155px;top: 7px;' },
+          'flex align-center justify-center app-player-button'
+      ); //'div', divStr, {}, 'class'
+      let closeBtn = util.createDom('div', divClose, {}, 'app-close-btn');
+      let xgControls = this.player.root.querySelector('xg-controls');
+      let xgError = this.player.root.querySelector('xg-error');
+      xgControls.appendChild(customBtn);
+      this.player.root.appendChild(closeBtn);
+
+      // let shot = customBtn.querySelector('.button-screen-shot');
+      // let set = customBtn.querySelector('.button-set');
+      // let history = customBtn.querySelector('.button-history');
+      let closeBtnc = closeBtn.querySelector('.app-close-btn-c');
+      let playback = customBtn.querySelector('.button-playback');
+
+      this.player.on('play', () => {});
+      this.player.on('focus', () => {
+        if (hasCloseBtn) {
+          closeBtn.style.display = 'block';
+        }
+      });
+      this.player.on('ended', () => {});
+      this.player.on('blur', () => {
+        closeBtn.style.display = 'none';
+      });
+
+      this.player.on('error', () => {});
+
+      if (closeBtnc) {
+        closeBtnc.addEventListener('click', () => {
+          this.closePlayer();
+        });
+      }
+
+      // 点击视频时间，设置selectIndex
+      this.player.video.addEventListener('click', () => {
+        // this.selectIndex = index;
+        // this.$parent.setSelectIndex(index);
+        this.$emit('clickPlayer', index);
+      });
+
+      // if (shot) {
+      //   shot.addEventListener('click', () => {
+      //     this.screenShot(index);
+      //   });
+      // }
+      // if (set) {
+      //   set.addEventListener('click', () => {
+      //     this.setPlay(index);
+      //   });
+      // }
+      // if (history) {
+      //   history.addEventListener('click', () => {
+      //     this.playHistory(index);
+      //   });
+      // }
+    },
+
+    changeVideo(url) {
+      this.player.src = url;
+    },
+
+    closePlayer() {
+      this.isPlay = false;
+      if (this.player) {
+        this.player.destroy();
+        this.player = null;
+      }
+    }
+  },
+
+  beforeDestroy() {
+    if (this.player) {
+      this.player.destroy();
+    }
+    // clearInterval(this.intvBuffer);
+    console.log('销毁了');
+  }
+
+  // destroyed() {
+  //   if(this.player){
+  //     this.player.destroy();
+  //   }
+  // }
+};
+</script>
+<style>
+.btn-hover:hover {
+  color: #08979c;
+  cursor: pointer;
+}
+.btn-hover {
+  color: #ffffff;
+}
+.video {
+  position: relative !important;
+  height: 100% !important;
+  width: 100% !important;
+  padding-top: 0px !important;
+}
+.app-close-btn {
+  position: absolute;
+  top: 0px;
+  right: 5px;
+  z-index: 500;
+  display: none;
+}
+.app-close-btn-c {
+  color: #aaffff;
+  font-size: 25px;
+  pointer-events: auto;
+  z-index: 500;
+}
+</style>

rtsp-vue/src/views/video/device/component/flv.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="app-container">
+    <el-card>
+        <el-row :gutter="1" type="flex" align="middle">
+          <el-col :span="4">
+            <el-text class="mx-1" type="primary">设备IP：{{ tableData.ip }}</el-text>
+          </el-col>
+          <el-col :span="3">
+            <div style="display: flex;">
+              <el-text class="mx-1" type="primary">设备类型：</el-text>
+              <dict-tag :options="device_type" :value="tableData.type"/>
+            </div>
+          </el-col>
+          <el-col :span="10">
+            <div style="display: flex;">
+              <el-text class="mx-1" type="primary">播放地址：</el-text>
+              <el-input v-model="playUrl" placeholder="播放地址" disabled style="width: 85%"></el-input>
+            </div>
+          </el-col>
+          <el-col :span="4">
+            <el-button @click="handlePlay" type="primary">刷新</el-button>
+            <el-button @click="handleCopy" type="primary">复制</el-button>
+            <el-button @click="handleCatch" type="primary">捕捉</el-button>
+          </el-col>
+        </el-row>
+    </el-card>
+    <div style="height: 20px;"></div>
+    <el-card>
+        <div style="width: 800px; height: 600px;" v-if="selected == 0">
+          <el-row :gutter="10" >
+            <el-col :span="24">
+              <div @click="clickVideo(0)" class="selectVideo">
+                <CusPlayer @clickPlayer="clickPlayer" ref="video"></CusPlayer>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      <div style="height: 20px;"></div>
+    </el-card>
+  </div>
+</template>
+
+<script setup name="Flv">
+import {useRoute} from 'vue-router'
+import {ref, onMounted} from 'vue';
+import 'xgplayer';
+import FlvJsPlayer from 'xgplayer-flv.js';
+import CusPlayer from './cusPlayer.vue';
+import {getDevice} from "@/api/video/device";
+
+const {proxy} = getCurrentInstance();
+const {device_type} = proxy.useDict('device_type');
+
+const route = useRoute();
+
+const selected = ref(0);
+const videoIndex = ref(0);
+const tableData = ref([]);
+const selectValue = ref('');
+const playUrl = ref('');
+const useffmpeg = ref(false);
+const video = ref(null);
+
+onMounted(() => {
+  getDetails(route.query.deviceId);
+})
+
+const getDetails = async (deviceId) => {
+  const res = await getDevice(deviceId);
+  tableData.value = res.data;
+  playUrl.value = `http://localhost:8866/live?url=${tableData.value.url}`;
+  handlePlay();
+}
+
+const handleCatch = () => {
+  console.log("捕捉事件开始")
+}
+
+const handleCopy = async () => {
+  try {
+    if (!navigator.clipboard) {
+      throw new Error('浏览器不支持复制功能');
+    }
+    await navigator.clipboard.writeText(playUrl.value);
+    proxy.$modal.msgSuccess('复制成功');
+  } catch (error) {
+    console.error('复制失败:', error);
+    try {
+      const textArea = document.createElement('textarea');
+      textArea.value = playUrl.value;
+      document.body.appendChild(textArea);
+      textArea.select();
+      const success = document.execCommand('copy');
+      document.body.removeChild(textArea);
+      if (success) {
+        proxy.$modal.msgSuccess('复制成功');
+      } else {
+        throw new Error('复制失败');
+      }
+    } catch (fallbackError) {
+      console.error('备用复制方法失败:', fallbackError);
+      proxy.$modal.msgError('复制失败，请手动复制');
+    }
+  }
+};
+
+
+const handlePlay = () => {
+  if (playUrl.value) {
+    video.value.createPlayer(playUrl.value, 0)
+  } else {
+    alert('请填写播放地址');
+  }
+};
+
+const clickVideo = (index) => {
+  videoIndex.value = index;
+}
+
+const clickPlayer = (index) => {
+  videoIndex.value = index;
+}
+</script>
+
+<style>
+.selectVideo {
+  height: 600px;
+  width: 800px;
+}
+</style>