摄像头预览优化

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

@@ -1,6 +1,6 @@
 <template>
   <a-spin :spinning="confirmLoading">
-    <JFormContainer :disabled="disabled">
+    <JFormContainer>
       <template #detail>
         <a-row>
           <a-col :span="12">
@@ -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">
@@ -225,24 +225,24 @@ import {
   const useForm = Form.useForm;
   const formData = reactive<Record<string, any>>({
     deviceIndex: '',//设备索引
-    streamType: 0,//码流类型 0 代表主码流，1 代码子码流
+    streamType: 1,//码流类型 0 代表主码流，1 代码子码流
     //视频预览参数
     url: '',//预览通道对应的URL
     backupUrl: '',//备选URL，当流媒体服务器存在内外网IP配置时，该字段不为null
     wsUrl: '',//用于建立ws连接传输视频帧信息
     wssUrl: '',//用于建立wss接传输视频帧信息
 
-    chroma: "0", //色度
+    chroma: 0, //色度
-    luma: "0", //亮度
+    luma: 0, //亮度
-    sharpness: "0", //锐度
+    sharpness: 0, //锐度
-    saturation: "0", //饱和度
+    saturation: 0, //饱和度
-    contrast: "0", //对比度
+    contrast: 0, //对比度
-    wd_gain: "0", //宽动态度
+    wd_gain: 0, //宽动态度
-    smartir_level: "0",//防过曝等级
+    smartir_level: 0,//防过曝等级
     wide_dynamic: "off",  //宽动态   "off"//关闭  "on"//开启
     smartir: "auto_ir",//防红外过曝："auto_ir_ae" //自动-增强模式   "auto_ir" //自动-标准模式   "manual"//手动——防过曝等级
     smartwtl: "auto_wtl",//白光强度："auto_wtl_ae" //智能白光-柔和 ；"auto_wtl" //智能白光-标准 ； "manual" //手动——出现白光等级
-    smartwtl_digital_level: "0",//白光等级
+    smartwtl_digital_level: 0,//白光等级
 
     flip_type: "center",//画面镜像旋转： "off"//关闭 "left_and_right"//左右 "up_and_down"//上下 "center"//中心
     night_vision_mode: "md_night_vision",//照明模式："wtl_night_vision"//白光照明 ；"inf_night_vision"//红外照明 ； "md_night_vision"//移动侦测全彩——出现白光强度
@@ -286,13 +286,20 @@ import {
       formData.wssUrl = res.wssUrl;
       confirmLoading.value=false;
     });
+    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接口获取
       socket: formData.wssUrl, // websocket地址, getPreviewUrl接口获取
       pluginPath: '/static', // 当sdk资源不在根路径下时，需配置pluginPath
+      talkEnable: true,
+      useMultitrans: true,
     });
     let isPlaying = player.value.isPlaying();
     if (!isPlaying) {
@@ -311,6 +318,7 @@ import {
     if (player){
       player.value.destroy().then(() => {
       }); // 销毁
+      player.value = null;
     }
   }
 
@@ -325,20 +333,28 @@ import {
       "deviceIndex": deviceIndex,
       "type": "common"
     }).then(res=>{
-      formData.chroma = res.chroma; //色度
+      formData.chroma = strToInt(res.chroma); //色度
-      formData.luma = res.luma; //亮度
+      formData.luma = strToInt(res.luma); //亮度
-      formData.sharpness = res.sharpness; //锐度
+      formData.sharpness = strToInt(res.sharpness); //锐度
-      formData.saturation = res.saturation; //饱和度
+      formData.saturation = strToInt(res.saturation); //饱和度
-      formData.contrast = res.contrast; //对比度
+      formData.contrast = strToInt(res.contrast); //对比度
-      formData.wd_gain = res.wd_gain; //宽动态度
+      formData.wd_gain = strToInt(res.wd_gain); //宽动态度
-      formData.smartir_level = res.smartir_level; //防过曝等级
+      formData.smartir_level = strToInt(res.smartir_level); //防过曝等级
       formData.wide_dynamic = res.wide_dynamic;  //宽动态   "off"//关闭  "on"//开启
       formData.smartir = res.smartir; //防红外过曝："auto_ir_ae" //自动-增强模式   "auto_ir" //自动-标准模式   "manual"//手动——防过曝等级
       formData.smartwtl = res.smartwtl; //白光强度："auto_wtl_ae" //智能白光-柔和 ；"auto_wtl" //智能白光-标准 ； "manual" //手动——出现白光等级
-      formData.smartwtl_digital_level = res.smartwtl_digital_level; //白光等级
+      formData.smartwtl_digital_level = strToInt(res.smartwtl_digital_level); //白光等级
     });
   }
 
+function strToInt(val){
+  if(val!=null&&isFinite(val)){
+    return Number(val);
+  }else{
+    return val;
+  }
+}
+
   /**
    * 获取照明设置信息
    */
@@ -415,6 +431,20 @@ import {
       { 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

@@ -1,6 +1,6 @@
 <template>
   <a-spin :spinning="confirmLoading">
-    <JFormContainer :disabled="disabled">
+    <JFormContainer>
       <template #detail>
         <a-row>
           <a-col :span="24">
@@ -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>
@@ -108,7 +108,7 @@
     weekEnabled: true,
     labelEnabled: true,
 
-    streamType: 0,//码流类型 0 代表主码流，1 代码子码流
+    streamType: 1,//码流类型 0 代表主码流，1 代码子码流
     //视频预览参数
     url: '',//预览通道对应的URL
     backupUrl: '',//备选URL，当流媒体服务器存在内外网IP配置时，该字段不为null
@@ -220,13 +220,20 @@
       formData.wssUrl = res.wssUrl;
       confirmLoading.value=false;
     });
+    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接口获取
       socket: formData.wssUrl, // websocket地址, getPreviewUrl接口获取
       pluginPath: '/static', // 当sdk资源不在根路径下时，需配置pluginPath
+      talkEnable: true,
+      useMultitrans: true,
     });
     let isPlaying = player.value.isPlaying();
     if (!isPlaying) {
@@ -245,6 +252,7 @@
     if (player){
       player.value.destroy().then(() => {
       }); // 销毁
+      player.value = null;
     }
   }
 
@@ -261,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

@@ -4,42 +4,39 @@
       v-model:activeKey="activeKey"
       tab-position="left"
       :style="{ height: '100%' }"
-      @tabScroll="callback"
     >
-      <a-tab-pane :key="1" tab="画面显示">
+      <a-tab-pane key="A" tab="画面显示">
         <a-tabs
           v-model:activeKey="oneChildActiveKey"
           tab-position="top"
           :style="{ height: '100%' }"
-          @tabScroll="callback"
           type="card"
         >
-          <a-tab-pane :key="1" tab="视频显示">
+          <a-tab-pane key="A1" tab="视频显示">
-            <div class="scrollable" v-if="oneChildActiveKey==1">
+            <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="2" tab="OSD">
+          <a-tab-pane key="A2" tab="OSD">
-            <div class="scrollable" v-if="oneChildActiveKey==2">
+            <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="3" tab="码流参数">
+          <a-tab-pane key="A3" tab="码流参数">
-            <div class="scrollable" v-if="oneChildActiveKey==3">
+            <div class="scrollable" v-if="oneChildActiveKey=='A3'">
               <CameraBitrateForm :data="cameraData"></CameraBitrateForm>
             </div>
           </a-tab-pane>
         </a-tabs>
       </a-tab-pane>
-      <a-tab-pane :key="2" tab="事件侦测">
+      <a-tab-pane key="B" tab="事件侦测">
         <a-tabs
           v-model:activeKey="twoChildActiveKey"
           tab-position="top"
           :style="{ height: '100%' }"
-          @tabScroll="callback"
           type="card"
         >
-          <a-tab-pane :key="1" tab="镜头遮挡">
+          <a-tab-pane key="B1" tab="镜头遮挡">
             <div class="scrollable">
               <CameraBlockForm :data="cameraData"></CameraBlockForm>
             </div>
@@ -67,40 +64,38 @@
 <!--          </a-tab-pane>-->
         </a-tabs>
       </a-tab-pane>
-      <a-tab-pane :key="3" tab="报警设备">
+      <a-tab-pane key="C" tab="报警设备">
         <a-tabs
           v-model:activeKey="threeChildActiveKey"
           tab-position="top"
           :style="{ height: '100%' }"
-          @tabScroll="callback"
           type="card"
         >
-          <a-tab-pane :key="1" tab="白光报警">
+          <a-tab-pane key="C1" tab="白光报警">
             <div class="scrollable" v-if="threeChildActiveKey==1">
               <CameraLightAlarmForm :data="cameraData"></CameraLightAlarmForm>
             </div>
           </a-tab-pane>
-          <a-tab-pane :key="2" tab="声音报警">
+          <a-tab-pane key="C2" tab="声音报警">
             <div class="scrollable" v-if="threeChildActiveKey==2">
               <CameraSoundAlarmForm :data="cameraData"></CameraSoundAlarmForm>
             </div>
           </a-tab-pane>
         </a-tabs>
       </a-tab-pane>
-      <a-tab-pane :key="4" tab="录像管理">
+      <a-tab-pane key="D" tab="录像管理">
         <a-tabs
           v-model:activeKey="fourChildActiveKey"
           tab-position="top"
           :style="{ height: '100%' }"
-          @tabScroll="callback"
           type="card"
         >
-          <a-tab-pane :key="1" tab="MP4转发FTP">
+          <a-tab-pane key="D1" tab="MP4转发FTP">
             <div class="scrollable">
               <CameraUploadForm :data="cameraData"></CameraUploadForm>
             </div>
           </a-tab-pane>
-          <a-tab-pane :key="2" tab="当天录像">
+          <a-tab-pane key="D2" tab="当天录像">
             <div class="scrollable">
               <CameraRecordList :data="cameraData" />
             </div>
@@ -148,10 +143,12 @@
     ip: '' ,//IP
   });
   const cameraData = ref({});
-  const activeKey = ref(1);
+  const activeKey = ref('A');
-  const oneChildActiveKey = ref(1);
+  const oneChildActiveKey = ref('A1');
-  const twoChildActiveKey = ref(1);
+  const twoChildActiveKey = ref('B1');
-  const threeChildActiveKey = ref(1);
+  const threeChildActiveKey = ref('C1');
+  const commonFormRef = ref();
+  const osdFormRef = ref();
 
   const imageData = reactive<Record<string, any>>({
     //画面显示配置
@@ -222,10 +219,18 @@
     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

@@ -1,6 +1,8 @@
 <template>
   <j-modal :title="title" :width="width" :fullscreen="true" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
-    <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>
   </j-modal>
 </template>
 
@@ -14,6 +16,7 @@
   const visible = ref<boolean>(false);
   const disableSubmit = ref<boolean>(false);
   const registerForm = ref();
+  const showCamera = ref<boolean>(false);
   const emit = defineEmits(['register', 'success']);
 
 
@@ -23,6 +26,7 @@
    */
   function edit(record) {
     title.value = disableSubmit.value ? '详情' : '编辑';
+    showCamera.value = true;
     visible.value = true;
     nextTick(() => {
       registerForm.value.edit(record);
@@ -49,6 +53,10 @@
    */
   function handleCancel() {
     visible.value = false;
+    nextTick(() => {
+      registerForm.value.destroyPlayer();
+      showCamera.value = false;
+    });
   }
 
   defineExpose({

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

@@ -2,75 +2,104 @@
   <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="24" style="padding: 5px;">
+      <a-col :span="20">
-        <span style="margin-left: 5px;" v-show="!izPlaying">
+        <a-col :span="24" style="padding: 5px;">
-          <a-button preIcon="ant-design:play-circle-outlined" @click="play">播放</a-button>
+          <span style="margin-left: 5px;" v-show="!izPlaying">
-        </span>
+            <a-button preIcon="ant-design:play-circle-outlined" @click="play">播放</a-button>
-        <span style="margin-left: 5px;" v-show="izPlaying">
+          </span>
-          <a-button preIcon="ant-design:pause-circle-outlined" @click="pause">暂停</a-button>
+          <span style="margin-left: 5px;" v-show="izPlaying">
-        </span>
+            <a-button preIcon="ant-design:pause-circle-outlined" @click="pause">暂停</a-button>
-        <span style="margin-left: 5px;">
+          </span>
-          <a-button preIcon="ant-design:swap-outlined" @click="switchResolution">{{ resolution }}</a-button>
+          <span style="margin-left: 5px;">
-        </span>
+            <a-button preIcon="ant-design:swap-outlined" @click="switchResolution">{{ resolution }}</a-button>
-<!--        <span style="margin-left: 5px;">
+          </span>
-          <a-button preIcon="ant-design:phone-outlined" @click="screenshot">巡航*</a-button>
+  <!--        <span style="margin-left: 5px;">
-        </span>-->
+            <a-button preIcon="ant-design:phone-outlined" @click="screenshot">巡航*</a-button>
-        <span style="margin-left: 5px;" v-show="!izPhone">
+          </span>-->
-          <a-button preIcon="ant-design:phone-outlined" @click="startPhone">电话</a-button>
+          <span style="margin-left: 5px;" v-show="!izPhone">
-        </span>
+            <a-button preIcon="ant-design:phone-outlined" @click="startPhone">电话</a-button>
-        <span style="margin-left: 5px;" v-show="izPhone">
+          </span>
-          <a-button type="primary" danger ghost preIcon="ant-design:phone-outlined" @click="stopPhone">电话</a-button>
+          <span style="margin-left: 5px;" v-show="izPhone">
-        </span>
+            <a-button type="primary" danger ghost preIcon="ant-design:phone-outlined" @click="stopPhone">电话</a-button>
-        <span style="margin-left: 15px;">分屏
+          </span>
-          <a-select
+          <span style="margin-left: 15px;">分屏
-            ref="select"
+            <a-select
-            v-model:value="fishEyeDisplayMode"
+              ref="select"
-            style="width: 120px"
+              v-model:value="fishEyeDisplayMode"
-            @focus="focus"
+              style="width: 120px"
-            @change="setFishEyeDisplayMode"
+              @focus="focus"
-          >
+              @change="setFishEyeDisplayMode"
-            <a-select-option value="ORIGIN">原图</a-select-option>
+            >
-            <a-select-option value="FISHEYE_360D">360全景</a-select-option>
+              <a-select-option value="ORIGIN">原图</a-select-option>
-            <a-select-option value="FISHEYE_180D">180全景</a-select-option>
+              <a-select-option value="FISHEYE_360D">360全景</a-select-option>
-            <a-select-option value="FISHEYE_WIN_PLANE_TOP_QUAD">四分屏</a-select-option>
+              <a-select-option value="FISHEYE_180D">180全景</a-select-option>
-            <a-select-option value="FISHEYE_LONGITUDE">全景拉伸</a-select-option>
+              <a-select-option value="FISHEYE_WIN_PLANE_TOP_QUAD">四分屏</a-select-option>
-          </a-select>
+              <a-select-option value="FISHEYE_LONGITUDE">全景拉伸</a-select-option>
-        </span>
+            </a-select>
+          </span>
+        </a-col>
+        <a-col :span="24" style="padding: 5px;">
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:picture-outlined" @click="screenshot">截图</a-button>
+          </span>
+          <span style="margin-left: 5px;" v-show="!izRecording">
+            <a-button preIcon="ant-design:video-camera-outlined" @click="recordingStart">录制</a-button>
+          </span>
+          <span style="margin-left: 5px;" v-show="izRecording">
+            <a-button type="primary" danger ghost preIcon="ant-design:video-camera-outlined" @click="recordingEnd">录制</a-button>
+          </span>
+          <span style="margin-left: 15px;">画面翻转
+            <a-select v-model:value="formData.flip_type" @change="(value) => changeSwitch('flip_type', value)">
+              <a-select-option value="off">关闭</a-select-option>
+              <a-select-option value="left_and_right">左右</a-select-option>
+              <a-select-option value="up_and_down">上下</a-select-option>
+              <a-select-option value="center">中心</a-select-option>
+            </a-select>
+          </span>
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:alert-outlined" @click="manualAlarm">报警</a-button>
+          </span>
+        </a-col>
+        <a-col :span="24" style="padding: 5px;">
+          <span style="margin-left: 5px;">
+            变焦
+          </span>
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:zoom-out-outlined" @mousedown="moveCtrl(9,1,1)" @mouseup="moveCtrl(9,0,1)" title="缩小">缩小</a-button>
+          </span>
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(10,1,1)" @mouseup="moveCtrl(10,0,1)" title="放大">放大</a-button>
+          </span>
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:zoom-out-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对近焦</a-button>
+          </span>
+          <span style="margin-left: 5px;">
+            <a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对远焦</a-button>
+          </span>
+        </a-col>
       </a-col>
-      <a-col :span="24" style="padding: 5px;">
+      <a-col :span="4" v-show="formData.ptz == '1'">
-        <span style="margin-left: 5px;">
+        <table style="width: 96px;height:96px;margin: 5px 0px 5px 0px;">
-          <a-button preIcon="ant-design:picture-outlined" @click="screenshot">截图</a-button>
+          <tbody>
-        </span>
+          <tr>
-        <span style="margin-left: 5px;" v-show="!izRecording">
+            <td></td>
-          <a-button preIcon="ant-design:video-camera-outlined" @click="recordingStart">录制</a-button>
+            <td><a-button preIcon="ant-design:caret-up-outlined" @mousedown="moveCtrl(1,1,1)" @mouseup="moveCtrl(1,0,1)"></a-button></td>
-        </span>
+            <td></td>
-        <span style="margin-left: 5px;" v-show="izRecording">
+          </tr>
-          <a-button type="primary" danger ghost preIcon="ant-design:video-camera-outlined" @click="recordingEnd">录制</a-button>
+          <tr>
-        </span>
+            <td><a-button preIcon="ant-design:caret-left-outlined" @mousedown="moveCtrl(3,1,1)" @mouseup="moveCtrl(3,0,1)"></a-button></td>
-        <span style="margin-left: 15px;">画面翻转
+            <td><a-button preIcon="ant-design:compress-outlined"></a-button></td>
-          <a-select v-model:value="formData.flip_type" @change="(value) => changeSwitch('flip_type', value)">
+            <td><a-button preIcon="ant-design:caret-right-outlined" @mousedown="moveCtrl(5,1,1)" @mouseup="moveCtrl(5,0,1)"></a-button></td>
-            <a-select-option value="off">关闭</a-select-option>
+          </tr>
-            <a-select-option value="left_and_right">左右</a-select-option>
+          <tr>
-            <a-select-option value="up_and_down">上下</a-select-option>
+            <td></td>
-            <a-select-option value="center">中心</a-select-option>
+            <td><a-button preIcon="ant-design:caret-down-outlined" @mousedown="moveCtrl(7,1,1)" @mouseup="moveCtrl(7,0,1)"></a-button></td>
-          </a-select>
+            <td></td>
-        </span>
+          </tr>
-        <span style="margin-left: 5px;">
+          </tbody>
-          <a-button preIcon="ant-design:alert-outlined" @click="manualAlarm">报警</a-button>
+        </table>
-        </span>
-      </a-col>
-      <a-col :span="24" style="padding: 5px;">
-        <span style="margin-left: 5px;">
-          变焦
-        </span>
-        <span style="margin-left: 5px;">
-          <a-button preIcon="ant-design:zoom-out-outlined" @click="zoomInOut('out')" title="缩小"></a-button>
-        </span>
-        <span style="margin-left: 5px;">
-          <a-button preIcon="ant-design:zoom-in-outlined" @click="zoomInOut('in')" title="放大"></a-button>
-        </span>
       </a-col>
     </a-row>
   </a-spin>
@@ -99,7 +128,7 @@
 
   const formRef = ref();
   const player = ref();
-  const resolution = ref<string>('超清');
+  const resolution = ref<string>('流畅');
   const izPlaying = ref<boolean>(true);
   const izRecording = ref<boolean>(false);
   const izPhone = ref<boolean>(false);
@@ -111,7 +140,7 @@
 
     //预览通道参数
     deviceIndex: '',//设备索引
-    streamType: 0,//码流类型 0 代表主码流，1 代码子码流
+    streamType: 1,//码流类型 0 代表主码流，1 代码子码流
 
     //视频预览参数
     url: '',//预览通道对应的URL
@@ -120,7 +149,10 @@
     wssUrl: '',//用于建立wss接传输视频帧信息
 
     flip_type: '',//画面镜像旋转： "off"//关闭 "left_and_right"//左右 "up_and_down"//上下 "center"//中心
-
+    zoom: 1, //变焦
+    sliderValue : 1,//滑动条的值
+    ptz : 0,//是否有云台
+    smartCode : 0,//是否可变焦
   });
   const { createMessage } = useMessage();
   const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
@@ -160,7 +192,6 @@
       //赋值
       Object.assign(formData, tmpData);
     });
-
     createPreview();
     getSwitch();
   }
@@ -179,9 +210,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-preview', {
       type: "rtsp", // 协议类型，rtsp
       url: formData.url, // 取流地址, getPreviewUrl接口获取
       // url: formData.backupUrl, // 取流地址, getPreviewUrl接口获取
@@ -400,6 +432,7 @@
     if (player){
       player.value.destroy().then(() => {
       }); // 销毁
+      player.value = null;
     }
   }
 

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="关闭">
-    <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']);
@@ -24,6 +27,7 @@
    */
   function edit(record) {
     title.value = record.deviceName;
+    showCamera.value = true;
     visible.value = true;
     nextTick(() => {
       registerForm.value.edit(record);
@@ -48,8 +52,11 @@
    * 取消按钮回调事件
    */
   function handleCancel() {
-    registerForm.value.destroy();
     visible.value = false;
+    nextTick(() => {
+      registerForm.value.destroy();
+      showCamera.value = false;
+    });
   }
 
   defineExpose({