inl-ui 0.1.21 → 0.1.22

package/dist/tplib/index.cjs

@@ -4540,7 +4540,7 @@ class WebRtcMt {
       }
     }
   }
-  retryTime;
+  // protected retryTime;
   // 拉流创建播放器
   createVideo(plays) {
     this.mediaServerAddrMap.set(plays.videoElm, plays);
@@ -4551,7 +4551,6 @@ class WebRtcMt {
       fetch(addRtspProxyUrl, {
         method: "GET"
       }).then(response => {
-        this.retryTime = 0;
         response.json().then(res => {
           if (res.code === 0) {
             this.startPlay(plays);
@@ -4563,12 +4562,9 @@ class WebRtcMt {
           }
         });
       }).catch(err => {
-        if (!this.retryTime) {
-          this.retryTime = 60;
-          setTimeout(() => {
-            this.rePlay();
-          }, 60 * 1e3);
-        }
+        setTimeout(() => {
+          this.rePlay();
+        }, 3 * 60 * 1e3);
       });
     });
   }
@@ -4627,7 +4623,7 @@ class WebRtcMt {
     this.stopPlay();
     setTimeout(() => {
       this.init(this.opt);
-    }, 1e3);
+    }, 5 * 1e3);
   }
   // 播放
   play(videoElm) {

package/dist/tplib/index.d.ts

@@ -49,7 +49,6 @@ declare class WebRtcMt {
         sdpUrl: any;
     };
     protected init(opt: WebRtc): void;
-    protected retryTime: any;
     protected createVideo(plays: PlayVideoArgs): Promise<unknown>;
     log(type: "err" | "info" | "warn", text: string): void;
     stopPlay(id?: string): void;

package/dist/tplib/index.js

@@ -4536,7 +4536,7 @@ class WebRtcMt {
       }
     }
   }
-  retryTime;
+  // protected retryTime;
   // 拉流创建播放器
   createVideo(plays) {
     this.mediaServerAddrMap.set(plays.videoElm, plays);
@@ -4547,7 +4547,6 @@ class WebRtcMt {
       fetch(addRtspProxyUrl, {
         method: "GET"
       }).then(response => {
-        this.retryTime = 0;
         response.json().then(res => {
           if (res.code === 0) {
             this.startPlay(plays);
@@ -4559,12 +4558,9 @@ class WebRtcMt {
           }
         });
       }).catch(err => {
-        if (!this.retryTime) {
-          this.retryTime = 60;
-          setTimeout(() => {
-            this.rePlay();
-          }, 60 * 1e3);
-        }
+        setTimeout(() => {
+          this.rePlay();
+        }, 3 * 60 * 1e3);
       });
     });
   }
@@ -4623,7 +4619,7 @@ class WebRtcMt {
     this.stopPlay();
     setTimeout(() => {
       this.init(this.opt);
-    }, 1e3);
+    }, 5 * 1e3);
   }
   // 播放
   play(videoElm) {

package/dist/video/index.cjs

@@ -6,10 +6,12 @@ var vue = require('vue');
 var iconsVue = require('@ant-design/icons-vue');
 var axios = require('axios');
 var vueRouter = require('vue-router');
+var EZUIKit = require('ezuikit-js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+var EZUIKit__default = /*#__PURE__*/_interopDefaultLegacy(EZUIKit);
 
 const config = {
   prefix: "inl",
@@ -4526,7 +4528,7 @@ class WebRtcMt$1 {
       }
     }
   }
-  retryTime;
+  // protected retryTime;
   // 拉流创建播放器
   createVideo(plays) {
     this.mediaServerAddrMap.set(plays.videoElm, plays);
@@ -4537,7 +4539,6 @@ class WebRtcMt$1 {
       fetch(addRtspProxyUrl, {
         method: "GET"
       }).then(response => {
-        this.retryTime = 0;
         response.json().then(res => {
           if (res.code === 0) {
             this.startPlay(plays);
@@ -4549,12 +4550,9 @@ class WebRtcMt$1 {
           }
         });
       }).catch(err => {
-        if (!this.retryTime) {
-          this.retryTime = 60;
-          setTimeout(() => {
-            this.rePlay();
-          }, 60 * 1e3);
-        }
+        setTimeout(() => {
+          this.rePlay();
+        }, 3 * 60 * 1e3);
       });
     });
   }
@@ -4613,7 +4611,7 @@ class WebRtcMt$1 {
     this.stopPlay();
     setTimeout(() => {
       this.init(this.opt);
-    }, 1e3);
+    }, 5 * 1e3);
   }
   // 播放
   play(videoElm) {
@@ -4790,9 +4788,9 @@ const VideoPlayerV2 = vue.defineComponent({
     });
     vue.onBeforeUnmount(() => {
       stopPlay();
-      stopV(`videoPlayer_${uuid}`);
-      const videoElement = document.getElementById(uuid);
+      const videoElement = document.getElementById(`videoPlayer_${uuid}`);
       if (videoElement) {
+        videoElement.pause();
         videoElement.src = null;
         videoElement.srcObject = null;
         videoElement.remove();
@@ -5235,23 +5233,12 @@ const VideoBoxV2 = vue.defineComponent({
       camera.value = res.data.data;
       streams.value = JSON.parse(camera.value.brandTypePo?.streamTypeDict || "[]");
     };
-    let interval;
     let timeout;
     let show = vue.ref(true);
-    const timer = setInterval(() => {
-      show.value = false;
-      setTimeout(() => {
-        show.value = true;
-      }, 500);
-    }, _prop.intervalTime * (0.5 + Math.random()));
-    vue.onBeforeUnmount(() => {
-      clearInterval(interval);
-      clearInterval(timer);
-    });
+    vue.onBeforeUnmount(() => {});
     const fill = vue.ref("fill");
     vue.watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
-        clearInterval(interval);
         getVideoParams(val);
         getVideoDetail(val);
         const fillVal = localStorage.getItem(val);
@@ -6128,7 +6115,62 @@ const AlarmVideo = vue.defineComponent({
 });
 var alarmVideo = installComponent(AlarmVideo, "alarm-video");
 
+const CloudVideo = vue.defineComponent({
+  props: {
+    // 视频信息|视频源uuid
+    cameraId: {
+      require: true,
+      type: String
+    },
+    channelNo: {
+      type: Number,
+      default: 1
+    },
+    // token
+    token: {
+      type: String,
+      default: ""
+    },
+    // template
+    template: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: [],
+  setup(prop, _context) {
+    const uuid = vue.ref(UUID());
+    const initVideo = async () => {
+      const res = await axios__default["default"].post("https://open.ys7.com/api/lapp/v2/live/address/get", void 0, {
+        params: {
+          accessToken: prop.token,
+          deviceSerial: prop.cameraId,
+          channelNo: prop.channelNo || 1
+        }
+      });
+      const parent = document.getElementById(`cloudVideo_${uuid.value}`)?.parentNode;
+      const opt = {
+        id: `cloudVideo_${uuid.value}`,
+        url: res.data.data.url,
+        accessToken: prop.token,
+        template: "pcLive",
+        height: parent?.clientHeight
+      };
+      new EZUIKit__default["default"].EZUIKitPlayer(opt);
+    };
+    vue.onMounted(() => {
+      initVideo();
+    });
+    return () => vue.createVNode("div", {
+      "id": `cloudVideo_${uuid.value}`,
+      "class": "cloudVideo"
+    }, null);
+  }
+});
+var cloudVideo = installComponent(CloudVideo, "cloud-video");
+
 exports.AlarmVideo = alarmVideo;
+exports.CloudVideo = cloudVideo;
 exports.PollingPlay = pollingPlay;
 exports.VideoBox = videoBox;
 exports.VideoPlayerV1 = videoPlayerV1;

package/dist/video/index.d.ts

@@ -2,7 +2,7 @@ import * as vue from 'vue';
 import { PropType } from 'vue';
 import * as vue_jsx_runtime from 'vue/jsx-runtime';
 
-declare const _default$5: vue.DefineComponent<{
+declare const _default$6: vue.DefineComponent<{
     teams: {
         type: {
             (arrayLength: number): any[];
@@ -73,7 +73,7 @@ interface videoInfo$1 {
     [key: string]: string | number | boolean | videoInfo$1 | Array<videoInfo$1>;
 }
 
-declare const _default$4: vue.DefineComponent<{
+declare const _default$5: vue.DefineComponent<{
     camera: {
         require: boolean;
         type: PropType<String | videoInfo$1>;
@@ -128,7 +128,7 @@ interface videoInfo {
     [key: string]: string | number | boolean | videoInfo | Array<videoInfo>;
 }
 
-declare const _default$3: vue.DefineComponent<{
+declare const _default$4: vue.DefineComponent<{
     camera: {
         require: boolean;
         type: PropType<String | videoInfo>;
@@ -152,7 +152,7 @@ declare const _default$3: vue.DefineComponent<{
     intervalTime: number;
 }, {}>;
 
-declare const _default$2: vue.DefineComponent<{
+declare const _default$3: vue.DefineComponent<{
     camera: {
         require: boolean;
         type: StringConstructor;
@@ -229,7 +229,7 @@ declare const _default$2: vue.DefineComponent<{
     btns: string[];
 }, {}>;
 
-declare const _default$1: vue.DefineComponent<{
+declare const _default$2: vue.DefineComponent<{
     theme: {
         type: StringConstructor;
         default: string;
@@ -269,7 +269,7 @@ declare const _default$1: vue.DefineComponent<{
     countDown: number;
 }, {}>;
 
-declare const _default: vue.DefineComponent<{
+declare const _default$1: vue.DefineComponent<{
     camera: {
         require: boolean;
         type: StringConstructor;
@@ -346,4 +346,44 @@ declare const _default: vue.DefineComponent<{
     showInfo: boolean;
 }, {}>;
 
-export { _default$1 as AlarmVideo, _default$5 as PollingPlay, _default$2 as VideoBox, _default$3 as VideoPlayerV1, _default$4 as VideoPlayerV2, _default as videoBoxV2 };
+declare const _default: vue.DefineComponent<{
+    cameraId: {
+        require: boolean;
+        type: StringConstructor;
+    };
+    channelNo: {
+        type: NumberConstructor;
+        default: number;
+    };
+    token: {
+        type: StringConstructor;
+        default: string;
+    };
+    template: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, never[], never, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    cameraId: {
+        require: boolean;
+        type: StringConstructor;
+    };
+    channelNo: {
+        type: NumberConstructor;
+        default: number;
+    };
+    token: {
+        type: StringConstructor;
+        default: string;
+    };
+    template: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {}, {
+    token: string;
+    template: string;
+    channelNo: number;
+}, {}>;
+
+export { _default$2 as AlarmVideo, _default as CloudVideo, _default$6 as PollingPlay, _default$3 as VideoBox, _default$4 as VideoPlayerV1, _default$5 as VideoPlayerV2, _default$1 as videoBoxV2 };

package/dist/video/index.js

@@ -2,6 +2,7 @@ import { defineComponent, ref, watch, onBeforeUnmount, createVNode, resolveCompo
 import { FullscreenOutlined, createFromIconfontCN } from '@ant-design/icons-vue';
 import axios from 'axios';
 import { useRouter } from 'vue-router';
+import EZUIKit from 'ezuikit-js';
 
 const config = {
   prefix: "inl",
@@ -4518,7 +4519,7 @@ class WebRtcMt$1 {
       }
     }
   }
-  retryTime;
+  // protected retryTime;
   // 拉流创建播放器
   createVideo(plays) {
     this.mediaServerAddrMap.set(plays.videoElm, plays);
@@ -4529,7 +4530,6 @@ class WebRtcMt$1 {
       fetch(addRtspProxyUrl, {
         method: "GET"
       }).then(response => {
-        this.retryTime = 0;
         response.json().then(res => {
           if (res.code === 0) {
             this.startPlay(plays);
@@ -4541,12 +4541,9 @@ class WebRtcMt$1 {
           }
         });
       }).catch(err => {
-        if (!this.retryTime) {
-          this.retryTime = 60;
-          setTimeout(() => {
-            this.rePlay();
-          }, 60 * 1e3);
-        }
+        setTimeout(() => {
+          this.rePlay();
+        }, 3 * 60 * 1e3);
       });
     });
   }
@@ -4605,7 +4602,7 @@ class WebRtcMt$1 {
     this.stopPlay();
     setTimeout(() => {
       this.init(this.opt);
-    }, 1e3);
+    }, 5 * 1e3);
   }
   // 播放
   play(videoElm) {
@@ -4782,9 +4779,9 @@ const VideoPlayerV2 = defineComponent({
     });
     onBeforeUnmount(() => {
       stopPlay();
-      stopV(`videoPlayer_${uuid}`);
-      const videoElement = document.getElementById(uuid);
+      const videoElement = document.getElementById(`videoPlayer_${uuid}`);
       if (videoElement) {
+        videoElement.pause();
         videoElement.src = null;
         videoElement.srcObject = null;
         videoElement.remove();
@@ -5227,23 +5224,12 @@ const VideoBoxV2 = defineComponent({
       camera.value = res.data.data;
       streams.value = JSON.parse(camera.value.brandTypePo?.streamTypeDict || "[]");
     };
-    let interval;
     let timeout;
     let show = ref(true);
-    const timer = setInterval(() => {
-      show.value = false;
-      setTimeout(() => {
-        show.value = true;
-      }, 500);
-    }, _prop.intervalTime * (0.5 + Math.random()));
-    onBeforeUnmount(() => {
-      clearInterval(interval);
-      clearInterval(timer);
-    });
+    onBeforeUnmount(() => {});
     const fill = ref("fill");
     watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
-        clearInterval(interval);
         getVideoParams(val);
         getVideoDetail(val);
         const fillVal = localStorage.getItem(val);
@@ -6120,4 +6106,58 @@ const AlarmVideo = defineComponent({
 });
 var alarmVideo = installComponent(AlarmVideo, "alarm-video");
 
-export { alarmVideo as AlarmVideo, pollingPlay as PollingPlay, videoBox as VideoBox, videoPlayerV1 as VideoPlayerV1, videoPlayerV2 as VideoPlayerV2, VideoBoxV2$1 as videoBoxV2 };
+const CloudVideo = defineComponent({
+  props: {
+    // 视频信息|视频源uuid
+    cameraId: {
+      require: true,
+      type: String
+    },
+    channelNo: {
+      type: Number,
+      default: 1
+    },
+    // token
+    token: {
+      type: String,
+      default: ""
+    },
+    // template
+    template: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: [],
+  setup(prop, _context) {
+    const uuid = ref(UUID());
+    const initVideo = async () => {
+      const res = await axios.post("https://open.ys7.com/api/lapp/v2/live/address/get", void 0, {
+        params: {
+          accessToken: prop.token,
+          deviceSerial: prop.cameraId,
+          channelNo: prop.channelNo || 1
+        }
+      });
+      const parent = document.getElementById(`cloudVideo_${uuid.value}`)?.parentNode;
+      const opt = {
+        id: `cloudVideo_${uuid.value}`,
+        url: res.data.data.url,
+        accessToken: prop.token,
+        template: "pcLive",
+        height: parent?.clientHeight
+      };
+      new EZUIKit.EZUIKitPlayer(opt);
+    };
+    onMounted(() => {
+      initVideo();
+    });
+    return () => createVNode("div", {
+      "id": `cloudVideo_${uuid.value}`,
+      "class": "cloudVideo"
+    }, null);
+  }
+});
+var cloudVideo = installComponent(CloudVideo, "cloud-video");
+
+export { alarmVideo as AlarmVideo, cloudVideo as CloudVideo, pollingPlay as PollingPlay, videoBox as VideoBox, videoPlayerV1 as VideoPlayerV1, videoPlayerV2 as VideoPlayerV2, VideoBoxV2$1 as videoBoxV2 };

package/dist/video/style.css

@@ -1,2 +1,3 @@
 .playVideos{display:flex;flex-direction:column;height:100%;padding-left:20px}.playVideos .operate{display:flex;justify-content:space-between;margin:5px 0}.playVideos .operate .button{cursor:pointer}.playVideos .grid{display:grid;flex:1;overflow:hidden}.playVideos .grid .video{background:#000;border:1px solid hsla(216,7%,59%,.3);height:100%;object-fit:fill;overflow:hidden;width:100%}.playVideos .grid.full{height:100%;left:0;position:fixed;top:0;width:100%;z-index:10}.playVideos .type1{grid-template-columns:1fr;grid-template-rows:1fr}.playVideos .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.playVideos .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type8 .video:first-child{grid-column:1/4;grid-row:1/4}.playVideos .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.playVideos .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type13 .video:first-child{grid-column:1/3;grid-row:1/3}.playVideos .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}@keyframes moveBottom{0%{bottom:0}to{bottom:-66px}}.videoComponent{background:#000;height:100%;position:relative;width:100%}.videoComponent.fill{object-fit:fill}.videoComponent.contain{object-fit:contain}.videoBox{height:100%;overflow:hidden;position:relative}.videoBox.alarm:before{border:2px solid #ea5858;box-shadow:inset 0 0 10px 8px rgba(234,88,88,.5);content:"";height:100%;pointer-events:none;position:absolute;top:0;width:100%;z-index:7}.videoBox:hover .selectFields{animation-duration:1s;animation-fill-mode:both;animation-name:moveBottom}.videoBox:hover .footer-min{display:flex}.videoBox:hover .footer-min .name-min span,.videoBox:hover .footer-min .tool{display:block}.videoBox .selectFields{background:rgba(0,0,0,.3);bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;height:66px;position:absolute;width:100%}.videoBox .selectFields .info{border:0;color:#fff;line-height:33px;overflow:hidden;padding:0 5px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.videoBox .selectFields .info .value{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.videoBox .footer-min{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border-radius:4px 4px 0 0;bottom:0;display:none;height:44px;justify-content:space-between;position:absolute;width:100%}.videoBox .footer-min .name-min{align-items:center;display:flex;padding-left:15px}.videoBox .footer-min .name-min span{color:#fff;display:none;font-size:16px;font-weight:600}.videoBox .footer-min .tool{display:none}.videoBox .footer-min .tool img{cursor:pointer;height:20px;margin-right:15px;width:20px}.videoControls{align-items:center;display:flex;flex-direction:column;width:100%}.videoControls .videoControl{height:126px;position:relative;width:126px}.videoControls .videoControl .bg{height:100%;position:relative;width:100%}.videoControls .videoControl img{cursor:pointer;position:absolute}.videoControls .videoControl .up{left:52px;top:14px}.videoControls .videoControl .lup{left:26px;top:26px;transform:rotate(-45deg)}.videoControls .videoControl .rup{left:78px;top:27px;transform:rotate(45deg)}.videoControls .videoControl .left{left:14px;top:52px;transform:rotate(-90deg)}.videoControls .videoControl .right{left:90px;top:52px;transform:rotate(90deg)}.videoControls .videoControl .ldown{left:26px;top:78px;transform:rotate(215deg)}.videoControls .videoControl .down{left:52px;top:90px;transform:rotate(180deg)}.videoControls .videoControl .rdown{left:78px;top:78px;transform:rotate(135deg)}.videoControls .btns{background:#e0e7f2;border-radius:19px;height:28px;margin:8px 8px 0;padding:3px;width:56px}.videoControls .btns img{cursor:pointer;margin-right:1px}
-.videoAlarmDia.dark{background:linear-gradient(90deg,#3e7eff,#1e4e75 30%,#1e4e75 70%,#3e7eff);padding:1px}.videoAlarmDia.dark .ant-modal-close{color:#fff}.videoAlarmDia.dark .ant-modal-header{background-color:#22396f;border-bottom-color:transparent;padding-left:20px}.videoAlarmDia.dark .ant-modal-header .ant-modal-title{align-items:center;background-image:linear-gradient(90deg,#2852a8 0,rgba(40,82,168,0) 50%);color:#fff;display:flex;height:42px;padding-left:10px}.videoAlarmDia.dark .ant-modal-content{background-color:#22396f}.videoAlarmDia.dark .ant-modal-content .body,.videoAlarmDia.dark .ant-modal-content .body .alarmList .alarm .name,.videoAlarmDia.dark .ant-modal-content .body .alarmList .title,.videoAlarmDia.dark .ant-modal-content .body .themeImg{color:#fff}.videoAlarmDia.dark .ant-modal-content .body .tabs .tabContainer .allTab .tab{background:#ffffff1a;color:#fff}.videoAlarmDia.dark .ant-modal-content .body .tabs .tabContainer .allTab .tab.active{background:#3e7eff;color:#fff}.videoAlarmDia .ant-modal-body{padding-top:18px}.videoAlarmDia .body{display:flex;flex-direction:column;height:660px}.videoAlarmDia .body .title{color:#000;font-size:18px}.videoAlarmDia .body .themeImg{height:18px;margin-right:5px;width:18px}.videoAlarmDia .body .current{align-self:center;display:flex;height:400px;justify-content:center;margin:10px 0 25px;width:750px}.videoAlarmDia .body .current .grid{grid-gap:3px;background-color:transparent;display:grid;height:100%;overflow:hidden;width:100%}.videoAlarmDia .body .current .grid .videoBox{background-color:#000}.videoAlarmDia .body .alarmList{display:flex;flex-wrap:wrap;justify-content:flex-start;max-height:80px;overflow:auto}.videoAlarmDia .body .alarmList .title{font-size:14px;font-weight:600;margin-bottom:10px}.videoAlarmDia .body .alarmList .alarm{align-items:center;border-radius:5px;color:#000;cursor:pointer;height:24px;margin-bottom:10px;margin-right:10px;padding:5px}.videoAlarmDia .body .alarmList .alarm img{height:16px;margin-right:5px;width:16px}.videoAlarmDia .body .alarmList .alarm .name{font-size:14px;white-space:nowrap}.videoAlarmDia .body .alarmList .alarm1{background:rgba(234,88,88,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm2{background:rgba(255,146,20,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm3{background:rgba(255,196,20,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm4{background:rgba(62,126,255,.1);color:#354052}.videoAlarmDia .body .tip{align-items:center;display:flex;margin:0}.videoAlarmDia .body .tip .sumNum{margin-right:16px}.videoAlarmDia .body .tip .timeNum{color:#3e7eff;font-weight:600;margin-right:5px}.videoAlarmDia .body .tabs{align-items:center;display:flex;margin:10px 0 5px}.videoAlarmDia .body .tabs .themeImg{cursor:pointer;overflow:visible}.videoAlarmDia .body .tabs .endIcon{margin-left:10px}.videoAlarmDia .body .tabs .tabContainer{display:flex;overflow:hidden}.videoAlarmDia .body .tabs .tabContainer .allTab{display:flex;height:40px;left:0;position:relative}.videoAlarmDia .body .tabs .tabContainer .allTab .tab{background:#f2f3f8;border-radius:4px;cursor:pointer;font-size:14px;height:32px;line-height:32px;margin-right:10px;padding:0 10px;position:relative;text-align:center;white-space:nowrap}.videoAlarmDia .body .tabs .tabContainer .allTab .tab.active{background:#1d33a2;color:#fff}.videoAlarmDia .body .tabs .tabContainer .allTab .tab.active:after{border:10px solid transparent;border-top-color:#1d33a2;content:"";height:0;left:50%;position:absolute;top:30px;width:0}.videoAlarmDia .body .numLine{align-items:center;display:flex}.videoAlarmDia .body .numLine .cameraNum{color:#3e7eff;font-weight:600}.videoAlarmDia .body .numLine .tipImg{height:18px;margin:0 5px 0 25px;width:18px}.videoAlarmDia .body .numLine .alarmNum{color:#fa4141;font-weight:600}.videoAlarmDia .body .otherAlarm{align-items:center;display:flex}.videoAlarmDia .body .otherAlarm .ant-tag{cursor:pointer;font-size:14px}.videoAlarmDia .body .otherAlarm .tipImg{height:18px;margin-right:5px;width:18px}.videoAlarmDia .body .otherAlarm .annotation{height:12px;margin:2px;width:12px}.videoAlarmDia .body .type1{grid-template-columns:1fr;grid-template-rows:1fr}.videoAlarmDia .body .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.videoAlarmDia .body .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.videoAlarmDia .body .type8 .videoBox:first-child{grid-column:1/4;grid-row:1/4}.videoAlarmDia .body .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.videoAlarmDia .body .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.videoAlarmDia .body .type13 .videoBox:first-child{grid-column:1/3;grid-row:1/3}.videoAlarmDia .body .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}
+.videoAlarmDia.dark{background:linear-gradient(90deg,#3e7eff,#1e4e75 30%,#1e4e75 70%,#3e7eff);padding:1px}.videoAlarmDia.dark .ant-modal-close{color:#fff}.videoAlarmDia.dark .ant-modal-header{background-color:#22396f;border-bottom-color:transparent;padding-left:20px}.videoAlarmDia.dark .ant-modal-header .ant-modal-title{align-items:center;background-image:linear-gradient(90deg,#2852a8 0,rgba(40,82,168,0) 50%);color:#fff;display:flex;height:42px;padding-left:10px}.videoAlarmDia.dark .ant-modal-content{background-color:#22396f}.videoAlarmDia.dark .ant-modal-content .body,.videoAlarmDia.dark .ant-modal-content .body .alarmList .alarm .name,.videoAlarmDia.dark .ant-modal-content .body .alarmList .title,.videoAlarmDia.dark .ant-modal-content .body .themeImg{color:#fff}.videoAlarmDia.dark .ant-modal-content .body .tabs .tabContainer .allTab .tab{background:#ffffff1a;color:#fff}.videoAlarmDia.dark .ant-modal-content .body .tabs .tabContainer .allTab .tab.active{background:#3e7eff;color:#fff}.videoAlarmDia .ant-modal-body{padding-top:18px}.videoAlarmDia .body{display:flex;flex-direction:column;height:660px}.videoAlarmDia .body .title{color:#000;font-size:18px}.videoAlarmDia .body .themeImg{height:18px;margin-right:5px;width:18px}.videoAlarmDia .body .current{align-self:center;display:flex;height:400px;justify-content:center;margin:10px 0 25px;width:750px}.videoAlarmDia .body .current .grid{grid-gap:3px;background-color:transparent;display:grid;height:100%;overflow:hidden;width:100%}.videoAlarmDia .body .current .grid .videoBox{background-color:#000}.videoAlarmDia .body .alarmList{display:flex;flex-wrap:wrap;justify-content:flex-start;max-height:80px;overflow:auto}.videoAlarmDia .body .alarmList .title{font-size:14px;font-weight:600;margin-bottom:10px}.videoAlarmDia .body .alarmList .alarm{align-items:center;border-radius:5px;color:#000;cursor:pointer;height:24px;margin-bottom:10px;margin-right:10px;padding:5px}.videoAlarmDia .body .alarmList .alarm img{height:16px;margin-right:5px;width:16px}.videoAlarmDia .body .alarmList .alarm .name{font-size:14px;white-space:nowrap}.videoAlarmDia .body .alarmList .alarm1{background:rgba(234,88,88,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm2{background:rgba(255,146,20,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm3{background:rgba(255,196,20,.1);color:#354052}.videoAlarmDia .body .alarmList .alarm4{background:rgba(62,126,255,.1);color:#354052}.videoAlarmDia .body .tip{align-items:center;display:flex;margin:0}.videoAlarmDia .body .tip .sumNum{margin-right:16px}.videoAlarmDia .body .tip .timeNum{color:#3e7eff;font-weight:600;margin-right:5px}.videoAlarmDia .body .tabs{align-items:center;display:flex;margin:10px 0 5px}.videoAlarmDia .body .tabs .themeImg{cursor:pointer;overflow:visible}.videoAlarmDia .body .tabs .endIcon{margin-left:10px}.videoAlarmDia .body .tabs .tabContainer{display:flex;overflow:hidden}.videoAlarmDia .body .tabs .tabContainer .allTab{display:flex;height:40px;left:0;position:relative}.videoAlarmDia .body .tabs .tabContainer .allTab .tab{background:#f2f3f8;border-radius:4px;cursor:pointer;font-size:14px;height:32px;line-height:32px;margin-right:10px;padding:0 10px;position:relative;text-align:center;white-space:nowrap}.videoAlarmDia .body .tabs .tabContainer .allTab .tab.active{background:#1d33a2;color:#fff}.videoAlarmDia .body .tabs .tabContainer .allTab .tab.active:after{border:10px solid transparent;border-top-color:#1d33a2;content:"";height:0;left:50%;position:absolute;top:30px;width:0}.videoAlarmDia .body .numLine{align-items:center;display:flex}.videoAlarmDia .body .numLine .cameraNum{color:#3e7eff;font-weight:600}.videoAlarmDia .body .numLine .tipImg{height:18px;margin:0 5px 0 25px;width:18px}.videoAlarmDia .body .numLine .alarmNum{color:#fa4141;font-weight:600}.videoAlarmDia .body .otherAlarm{align-items:center;display:flex}.videoAlarmDia .body .otherAlarm .ant-tag{cursor:pointer;font-size:14px}.videoAlarmDia .body .otherAlarm .tipImg{height:18px;margin-right:5px;width:18px}.videoAlarmDia .body .otherAlarm .annotation{height:12px;margin:2px;width:12px}.videoAlarmDia .body .type1{grid-template-columns:1fr;grid-template-rows:1fr}.videoAlarmDia .body .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.videoAlarmDia .body .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.videoAlarmDia .body .type8 .videoBox:first-child{grid-column:1/4;grid-row:1/4}.videoAlarmDia .body .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.videoAlarmDia .body .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.videoAlarmDia .body .type13 .videoBox:first-child{grid-column:1/3;grid-row:1/3}.videoAlarmDia .body .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}
+.cloudVideo{height:100%}

package/dist/videoMobile/index.cjs

@@ -4507,7 +4507,7 @@ class WebRtcMt {
       }
     }
   }
-  retryTime;
+  // protected retryTime;
   // 拉流创建播放器
   createVideo(plays) {
     this.mediaServerAddrMap.set(plays.videoElm, plays);
@@ -4518,7 +4518,6 @@ class WebRtcMt {
       fetch(addRtspProxyUrl, {
         method: "GET"
       }).then(response => {
-        this.retryTime = 0;
         response.json().then(res => {
           if (res.code === 0) {
             this.startPlay(plays);
@@ -4530,12 +4529,9 @@ class WebRtcMt {
           }
         });
       }).catch(err => {
-        if (!this.retryTime) {
-          this.retryTime = 60;
-          setTimeout(() => {
-            this.rePlay();
-          }, 60 * 1e3);
-        }
+        setTimeout(() => {
+          this.rePlay();
+        }, 3 * 60 * 1e3);
       });
     });
   }
@@ -4594,7 +4590,7 @@ class WebRtcMt {
     this.stopPlay();
     setTimeout(() => {
       this.init(this.opt);
-    }, 1e3);
+    }, 5 * 1e3);
   }
   // 播放
   play(videoElm) {
@@ -4788,9 +4784,9 @@ const VideoPlayerV2 = vue.defineComponent({
     });
     vue.onBeforeUnmount(() => {
       stopPlay();
-      stopV(`videoPlayer_${uuid}`);
-      const videoElement = document.getElementById(uuid);
+      const videoElement = document.getElementById(`videoPlayer_${uuid}`);
       if (videoElement) {
+        videoElement.pause();
         videoElement.src = null;
         videoElement.srcObject = null;
         videoElement.remove();

package/dist/videoMobile/index.js

@@ -4499,7 +4499,7 @@ class WebRtcMt {
       }
     }
   }
-  retryTime;
+  // protected retryTime;
   // 拉流创建播放器
   createVideo(plays) {
     this.mediaServerAddrMap.set(plays.videoElm, plays);
@@ -4510,7 +4510,6 @@ class WebRtcMt {
       fetch(addRtspProxyUrl, {
         method: "GET"
       }).then(response => {
-        this.retryTime = 0;
         response.json().then(res => {
           if (res.code === 0) {
             this.startPlay(plays);
@@ -4522,12 +4521,9 @@ class WebRtcMt {
           }
         });
       }).catch(err => {
-        if (!this.retryTime) {
-          this.retryTime = 60;
-          setTimeout(() => {
-            this.rePlay();
-          }, 60 * 1e3);
-        }
+        setTimeout(() => {
+          this.rePlay();
+        }, 3 * 60 * 1e3);
       });
     });
   }
@@ -4586,7 +4582,7 @@ class WebRtcMt {
     this.stopPlay();
     setTimeout(() => {
       this.init(this.opt);
-    }, 1e3);
+    }, 5 * 1e3);
   }
   // 播放
   play(videoElm) {
@@ -4780,9 +4776,9 @@ const VideoPlayerV2 = defineComponent({
     });
     onBeforeUnmount(() => {
       stopPlay();
-      stopV(`videoPlayer_${uuid}`);
-      const videoElement = document.getElementById(uuid);
+      const videoElement = document.getElementById(`videoPlayer_${uuid}`);
       if (videoElement) {
+        videoElement.pause();
         videoElement.src = null;
         videoElement.srcObject = null;
         videoElement.remove();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inl-ui",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "工业 pc ui库",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -29,6 +29,8 @@
   "dependencies": {
     "@sszj-temp/mobile": "^0.0.104",
     "@vueuse/core": "^9.6.0",
+    "ezuikit-flv": "^1.0.1",
+    "ezuikit-js": "^8.0.2",
     "marked": "^9.1.6",
     "vite-plugin-qiankun": "^1.0.15",
     "vue": "^3.2.45"