增加萤石视频监控

base-ui/package.json

@@ -18,6 +18,7 @@
     "core-js": "^3.26.1",
     "echarts": "^5.4.1",
     "element-ui": "2.13.2",
+    "ezuikit-js": "^0.7.0",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",

base-ui/src/views/supervise/monitoringCenter/index.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="imgDemo">
+    <div   style="text-align:center;height: 1500px;">
+      <div id="video-container"  >
+      </div>
+        <div style="text-align:center;" >
+          <el-button type="primary" size="small"   @click="togglePlay">{{ play ? '正在播放' : '停止' }}</el-button>
+          <!--        <el-tooltip effect="dark" :content="play ? '正在播放' : '停止'" >
+                    <i :class="play ? 'el-icon-video-pause' : 'el-icon-video-play'" @click="togglePlay"  ></i>
+                  </el-tooltip>-->
+          <el-button type="primary" size="small"   @click="isCapturePicture">视频截图</el-button>
+          <!--        <el-tooltip effect="dark" content="视频截图">
+                    <i class="el-icon-camera" @click="isCapturePicture"></i>
+                  </el-tooltip>-->
+          <!--        <el-tooltip effect="dark" :content="enableZ ? '电子放大-已开启' : '电子放大-已关闭'">
+                    <i :class="enableZ ? 'el-icon-zoom-out' : 'el-icon-zoom-in'" @click="toggleZoom"></i>
+                  </el-tooltip>-->
+          <el-button type="primary" size="small"   @click="isFullScreen">全屏</el-button>
+          <!--        <div effect="dark" content="全屏">
+                    <div   @click="isFullScreen" style="width: 100px;height: 100px;background: image('![](../assets/images/place.png)') "></div>
+                  </div>-->
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import EZUIKit from 'ezuikit-js';
+	// import { login1 } from '@/api/system/user/login.js'
+  export default {
+    name: '',
+    data() {
+      return {
+        token: '',
+        player: null,
+        enableZ:false, //默认关闭电子放大
+        play: false //默认停止播放
+      }
+    },
+    created(){
+      this.getVideoData()
+    },
+    methods: {
+      getVideoData(){
+         this.player = new EZUIKit.EZUIKitPlayer({
+          id: 'video-container', // 视频容器ID
+          accessToken: 'at.cnqo1upn5o4m2zkh6htzpd6a5u5cxklx-2315mkg9mw-11hq79z-g6qxd1wmw',
+          url: 'ezopen://open.ys7.com/109860978/1.hd.live',
+          audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
+          autoplay: true,
+          templete: "security",
+          header: ["capturePicture"],
+          footer: ['talk','fullScreen'],
+          width: 608,
+           plugin: ['talk'],
+          height: 437
+        })
+      },
+      // 开启/关闭 电子放大
+     /* toggleZoom(){
+        console.log(this.enableZ);
+        console.log(this.player);
+        console.log(!this.player || !this.play);
+        if(!this.player ) return;
+        switch (this.enableZ) {
+          case true:
+
+            console.log("1111111111111111");
+            this.player.closeZoom();
+            this.enableZ = false;
+            break;
+          case false:
+            console.log("2222222222222222");
+            this.player.enableZoom();
+            this.enableZ = true;
+            break;
+          default:
+            break;
+        }
+      },*/
+      // 播放/停止 监控
+      togglePlay(){
+        if(!this.player) return;
+        switch (this.play) {
+          case true:
+            this.player.stop();
+            this.play = false;
+            break;
+          case false:
+            this.player.play();
+            this.play = true;
+            break;
+          default:
+            break;
+        }
+      },
+      // 视频截图
+      isCapturePicture(){
+        if(!this.player || !this.play) return;
+        this.player.capturePicture();
+      },
+      // 全屏
+      isFullScreen(){
+        if(!this.player || !this.play) return;
+        this.player.fullScreen();
+      }
+
+      },
+      beforeDestroy() {
+        this.player && this.player.stop() //销毁并停止直播视频
+      }
+//  	getToken(){
+//  		let params = {
+//  			password: "329653",
+//					roleSid: "",
+//					token: "",
+//					userName: "15097329653",
+//					verifyCode: ""
+//  		}
+//  		login1(params).then(res => {
+//  			this.token = res.data.token
+//  			window.sessionStorage.setItem('token', res.data.token)
+//        })
+//  	}
+  }
+</script>
+
+<style lang="scss" scoped>
+  .imgDemo {
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(#fff,#f5f7f4, #fff);
+  }
+  canvas {
+  }
+  #video-container{
+   position: relative;
+  }
+  ::v-deep #video-container iframe{
+    width: 100% !important;
+  }
+  .mask{
+    position: absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:500px;
+    background: rgba(255, 255, 255, .6) url('../../../assets/images/place.png') no-repeat center;
+    background-size: 100px;
+  }
+  .controll{
+    display: flex;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 48px;
+    line-height: 48px;
+    background: rgba(0, 0, 0, 0.65);
+    padding: 0 15px;
+    z-index: 2;
+    opacity:0;
+    transition: all 0.3s;
+    .left{
+      width: 50%;
+      i{
+        margin-right: 10px;
+      }
+    }
+    .right{
+      width: 50%;
+      text-align: right;
+    }
+    i{
+      vertical-align: middle;
+      color: #fff;
+      font-size: 30px;
+    }
+  }
+  #video-container:hover .controll{
+    opacity: 0.65;
+  }
+</style>