摄像头预览优化

index.html

@@ -27,5 +27,6 @@
     <div id="app">
     </div>
     <script type="module" src="/src/main.ts"></script>
+    <script src="<%= basePublicPath %>/static/tums-player/tums-player.umd.min.js"></script>
   </body>
 </html>

src/views/iot/tplink/camera/components/CameraCommonForm.vue

@@ -12,7 +12,7 @@
             <a-row>
               <a-col :span="2"></a-col>
               <a-col :span="20">
-                <div id="video-container" class="video-container"></div>
+                <div id="video-container-common" class="video-container"></div>
               </a-col>
             </a-row>
             <a-row style="margin-top: 14px">
@@ -305,9 +305,10 @@ async function preview(deviceIndex, streamType, url) {
   if (player.value){
     player.value.destroy().then(() => {
     }); // 销毁
+    player.value = null;
   }
   const TumsPlayer = window['tums-player'].default;
-  player.value = new TumsPlayer('video-container', {
+  player.value = new TumsPlayer('video-container-common', {
     type: "rtsp", // 协议类型，rtsp
     url: formData.url, // 取流地址, getPreviewUrl接口获取
     // url: formData.backupUrl, // 取流地址, getPreviewUrl接口获取
@@ -330,7 +331,6 @@ async function preview(deviceIndex, streamType, url) {
  * 销毁
  */
 function destroy(player) {
-  console.log("commonDestroy");
   if (player) {
     player.value.destroy().then(() => {
     }); // 销毁
@@ -349,7 +349,6 @@ function getCommon(deviceIndex) {
     "deviceIndex": deviceIndex,
     "type": "common"
   }).then(res => {
-    console.log(res);
     formData.chroma = strToInt(res.chroma); //色度
     formData.luma = strToInt(res.luma); //亮度
     formData.sharpness = strToInt(res.sharpness); //锐度
@@ -440,7 +439,6 @@ onMounted(() => {
   watch(
     () => props.data,
     async () => {
-      console.log(props.data);
       formData.deviceIndex = props.data.deviceIndex;
       getCommon(formData.deviceIndex);
       getSwitch(formData.deviceIndex);
@@ -449,6 +447,20 @@ onMounted(() => {
     { deep: true, immediate: true }
   );
 });
+
+function destroyPlayer(){
+  if (player){
+    player.value.destroy().then(() => {
+    }); // 销毁
+    player.value = null;
+  }
+}
+
+// 暴露给父组件的方法
+defineExpose({
+  destroyPlayer
+});
+
 </script>
 
 <style lang="less" scoped>

src/views/iot/tplink/camera/components/CameraOsdForm.vue

@@ -13,7 +13,7 @@
             <a-row>
               <a-col :span="1"></a-col>
               <a-col :span="20">
-                <div id="video-container" class="video-container">
+                <div id="video-container-osd" class="video-container">
                   <div class="osd-text-top">
                     <span v-show="formData.dateEnabled">{{formData.dateData}}&nbsp;</span>
                     <span v-show="formData.weekEnabled">{{formData.weekData}}&nbsp;</span>
@@ -223,9 +223,10 @@
     if (player.value){
       player.value.destroy().then(() => {
       }); // 销毁
+      player.value = null;
     }
     const TumsPlayer = window['tums-player'].default;
-    player.value = new TumsPlayer('video-container', {
+    player.value = new TumsPlayer('video-container-osd', {
       type: "rtsp", // 协议类型，rtsp
       url: formData.url, // 取流地址, getPreviewUrl接口获取
       // url: formData.backupUrl, // 取流地址, getPreviewUrl接口获取
@@ -248,7 +249,6 @@
    * 销毁
    */
   function destroy(player){
-    console.log("osdDestroy");
     if (player){
       player.value.destroy().then(() => {
       }); // 销毁
@@ -269,6 +269,20 @@
       { deep: true, immediate: true }
     );
   });
+
+  function destroyPlayer(){
+    if (player){
+      player.value.destroy().then(() => {
+      }); // 销毁
+      player.value = null;
+    }
+  }
+
+  // 暴露给父组件的方法
+  defineExpose({
+    destroyPlayer
+  });
+
 </script>
 
 <style lang="less" scoped>

src/views/iot/tplink/camera/components/CameraPictureConfig.vue

@@ -14,12 +14,12 @@
         >
           <a-tab-pane key="A1" tab="视频显示">
             <div class="scrollable" v-if="oneChildActiveKey=='A1'">
-              <CameraCommonForm :data="cameraData"></CameraCommonForm>
+              <CameraCommonForm ref="commonFormRef" :data="cameraData"></CameraCommonForm>
             </div>
           </a-tab-pane>
           <a-tab-pane key="A2" tab="OSD">
             <div class="scrollable" v-if="oneChildActiveKey=='A2'">
-              <CameraOsdForm :data="cameraData"></CameraOsdForm>
+              <CameraOsdForm ref="osdFormRef" :data="cameraData"></CameraOsdForm>
             </div>
           </a-tab-pane>
           <a-tab-pane key="A3" tab="码流参数">
@@ -117,7 +117,7 @@
 </template>
 
 <script lang="ts" name="iot-nuIotCameraInfo" setup>
-import {ref, onMounted, reactive, onUnmounted} from "vue";
+  import {ref, onMounted, reactive, onUnmounted} from "vue";
   import { useRouter } from 'vue-router';
   import type { TabsProps } from 'ant-design-vue';
   import { useListPage } from "@/hooks/system/useListPage";
@@ -151,6 +151,8 @@ import {ref, onMounted, reactive, onUnmounted} from "vue";
   const oneChildActiveKey = ref('A1');
   const twoChildActiveKey = ref('B1');
   const threeChildActiveKey = ref('C1');
+  const commonFormRef = ref();
+  const osdFormRef = ref();
 
   const imageData = reactive<Record<string, any>>({
     //画面显示配置
@@ -226,10 +228,23 @@ function edit(record) {
   cameraData.value.multitrans = formData.multitrans;
   cameraData.value.scale = formData.scale;
   cameraData.value.parentId = formData.parentId;
+
+
+
 }
 
+  function destroyPlayer(){
+    if(commonFormRef.value){
+      commonFormRef.value.destroyPlayer();
+    }
+    if(osdFormRef.value){
+      osdFormRef.value.destroyPlayer();
+    }
+  }
+
 defineExpose({
   edit,
+  destroyPlayer
 });
 
 </script>

src/views/iot/tplink/camera/components/CameraPictureConfigModal.vue

@@ -3,7 +3,9 @@
   </j-modal> -->
   <a-drawer :title="title" :width="width"  v-model:visible="visible" :closable="true"
     :footer-style="{ textAlign: 'right' }" @close="handleCancel">
-    <CameraPictureConfig ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></CameraPictureConfig>
+    <div v-if="showCamera">
+      <CameraPictureConfig ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></CameraPictureConfig>
+    </div>
     <template #footer>
       <a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
       <a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
@@ -15,27 +17,29 @@
   import { ref, nextTick, defineExpose } from 'vue';
   import CameraPictureConfig from './CameraPictureConfig.vue'
   import JModal from '/@/components/Modal/src/JModal/JModal.vue';
-  
+
   const title = ref<string>('');
   const width = ref<string>('100%');
   const visible = ref<boolean>(false);
   const disableSubmit = ref<boolean>(false);
   const registerForm = ref();
+  const showCamera = ref<boolean>(false);
   const emit = defineEmits(['register', 'success']);
 
-  
+
   /**
    * 编辑
    * @param record
    */
   function edit(record) {
     title.value = disableSubmit.value ? '详情' : '编辑';
+    showCamera.value = true;
     visible.value = true;
     nextTick(() => {
       registerForm.value.edit(record);
     });
   }
-  
+
   /**
    * 确定按钮点击事件
    */
@@ -56,6 +60,10 @@
    */
   function handleCancel() {
     visible.value = false;
+    nextTick(() => {
+      registerForm.value.destroyPlayer();
+      showCamera.value = false;
+    });
   }
 
   defineExpose({

src/views/iot/tplink/camera/components/CameraPreviewForm.vue

@@ -2,7 +2,7 @@
   <a-spin :spinning="confirmLoading">
     <a-row>
       <a-col :span="24">
-        <div id="video-container"></div>
+        <div id="video-container-preview"></div>
       </a-col>
       <a-col :span="20">
         <a-col :span="24" style="padding: 5px;">
@@ -29,7 +29,6 @@
               ref="select"
               v-model:value="fishEyeDisplayMode"
               style="width: 120px"
-              @focus="focus"
               @change="setFishEyeDisplayMode"
             >
               <a-select-option value="ORIGIN">原图</a-select-option>
@@ -202,9 +201,6 @@
       //赋值
       Object.assign(formData, tmpData);
     });
-
-    console.log(formData);
-
     createPreview();
     getSwitch();
   }
@@ -225,7 +221,7 @@
       }); // 销毁
     }
     const TumsPlayer = window['tums-player'].default;
-    player.value = new TumsPlayer('video-container', {
+    player.value = new TumsPlayer('video-container-preview', {
       type: "rtsp", // 协议类型，rtsp
       url: formData.url, // 取流地址, getPreviewUrl接口获取
       // url: formData.backupUrl, // 取流地址, getPreviewUrl接口获取

src/views/iot/tplink/camera/components/CameraPreviewModal.vue

@@ -1,6 +1,8 @@
 <template>
   <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭" :bodyStyle="bodyStyle">
-    <CameraPreviewForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></CameraPreviewForm>
+    <div v-if="showCamera">
+      <CameraPreviewForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></CameraPreviewForm>
+    </div>
   </j-modal>
 </template>
 
@@ -12,6 +14,7 @@
   const title = ref<string>('');
   const width = ref<number>(600);
   const visible = ref<boolean>(false);
+  const showCamera = ref<boolean>(false);
   const disableSubmit = ref<boolean>(false);
   const registerForm = ref();
   const emit = defineEmits(['register', 'success']);
@@ -28,6 +31,7 @@
    */
   function edit(record) {
     title.value = record.deviceName;
+    showCamera.value = true;
     visible.value = true;
     nextTick(() => {
       registerForm.value.edit(record);
@@ -52,8 +56,11 @@
    * 取消按钮回调事件
    */
   function handleCancel() {
-    registerForm.value.destroy();
     visible.value = false;
+    nextTick(() => {
+      registerForm.value.destroy();
+      showCamera.value = false;
+    });
   }
 
   defineExpose({

src/views/iot/tplink/camera/index.vue

@@ -70,7 +70,7 @@
 </template>
 
 <script lang="ts" name="iot-nuIotCameraInfo" setup>
-import {ref, reactive, createVNode, h, onMounted, watch, unref} from 'vue';
+import {ref, reactive, createVNode, h, onMounted, watch, unref,nextTick} from 'vue';
 import { BasicTable, useTable, TableAction } from '/@/components/Table';
 import { useListPage } from '/@/hooks/system/useListPage';
 import { columns, searchFormSchema } from './camera.data';
@@ -140,8 +140,11 @@ function handleEdit(record: Recordable) {
  * 预览
  */
 function handlePreview(record: Recordable) {
-  previewModal.value.disableSubmit = true;
-  previewModal.value.edit(record);
+  nextTick(()=>{
+    previewModal.value.disableSubmit = true;
+    previewModal.value.edit(record);
+  })
+
 }
 
 /**
@@ -155,7 +158,6 @@ function handleSuccess() {
  * 画面配置
  */
 function handlePicConfig(record) {
-  console.log("🚀 ~ handlePicConfig ~ record:", record)
   var params = {
     deviceIndex: record.deviceIndex,
     deviceName: record.deviceName,
@@ -165,9 +167,10 @@ function handlePicConfig(record) {
     regionId: record.regionId,
     ip: record.ip
   }
-  console.log("🚀 ~ handlePicConfig ~ params:", params)
-  cameraPictureConfigModal.value.disableSubmit = true;
-  cameraPictureConfigModal.value.edit(params);
+  nextTick(()=>{
+    cameraPictureConfigModal.value.disableSubmit = true;
+    cameraPictureConfigModal.value.edit(params);
+  })
 }
 
 /**