摄像头预览

index.html

@@ -164,7 +164,7 @@
       </div>
     </div>
     <script type="module" src="/src/main.ts"></script>
-    <script src="/static/tums-player/tums-player.umd.min.js"></script>
+    <script src="<%= basePublicPath %>/static/tums-player/tums-player.umd.min.js"></script>
     <!-- 百度统计 -->
     <script>
       var _hmt = _hmt || [];

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

@@ -4,7 +4,7 @@
       <a-col :span="24">
         <div id="video-container"></div>
       </a-col>
-      <a-col :span="24">
+      <a-col :span="20">
         <a-col :span="24" style="padding: 5px;">
           <span style="margin-left: 5px;" v-show="!izPlaying">
             <a-button preIcon="ant-design:play-circle-outlined" @click="play">播放</a-button>
@@ -62,18 +62,24 @@
             <a-button preIcon="ant-design:alert-outlined" @click="manualAlarm">报警</a-button>
           </span>
         </a-col>
-        <a-col :span="24">
+        <a-col :span="24" v-show="formData.ptz == '1' && formData.smartCode == '1' ">
           <a-col :span="24" style="padding: 5px;display: flex;">
             <span style="margin-left: 5px;">
               变焦
             </span>
             <span style="margin-left: 5px;">
-<!--              <a-button :disabled="formData.zoom<=1" preIcon="ant-design:zoom-out-outlined" @click="zoomInOut('out')" title="缩小"></a-button>-->
+<!--              <a-button preIcon="ant-design:zoom-out-outlined" @click="zoomInOut('out')" title="缩小"></a-button>-->
-              <a-button preIcon="ant-design:zoom-out-outlined" @click="zoomInOut('out')" title="缩小"></a-button>
+              <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 :disabled="formData.zoom>=4" preIcon="ant-design:zoom-in-outlined" @click="zoomInOut('in')" title="放大"></a-button>-->
+<!--              <a-button preIcon="ant-design:zoom-in-outlined" @click="zoomInOut('in')" title="放大"></a-button>-->
-              <a-button preIcon="ant-design:zoom-in-outlined" @click="zoomInOut('in')" title="放大"></a-button>
+              <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>
 <!--            <span style="margin-left: 5px;width: 60%">
               <a-slider v-model:value="formData.zoom" :min="1.0" :max="4.0" :step="0.2" :marks="{1:1.0,2:2.0,3:3.0,4:4.0}" @afterChange="(value) => changeZoom(value)" />
@@ -84,27 +90,27 @@
           </a-col>
         </a-col>
       </a-col>
-<!--      <a-col :span="4">
+      <a-col :span="4" v-show="formData.ptz == '1'">
-        <table style="width: 102px">
+        <table style="width: 96px;height:96px;margin: 5px 0px 5px 0px;">
           <tbody>
           <tr>
             <td></td>
-            <td><a-button preIcon="ant-design:caret-up-outlined" @mousedown="moveCtrl(1,1)" @mouseup="moveCtrl(1,0)"></a-button></td>
+            <td><a-button preIcon="ant-design:caret-up-outlined" @mousedown="moveCtrl(1,1,1)" @mouseup="moveCtrl(1,0,1)"></a-button></td>
             <td></td>
           </tr>
           <tr>
-            <td><a-button preIcon="ant-design:caret-left-outlined" @mousedown="moveCtrl(3,1)" @mouseup="moveCtrl(3,0)"></a-button></td>
+            <td><a-button preIcon="ant-design:caret-left-outlined" @mousedown="moveCtrl(3,1,1)" @mouseup="moveCtrl(3,0,1)"></a-button></td>
             <td><a-button preIcon="ant-design:compress-outlined"></a-button></td>
-            <td><a-button preIcon="ant-design:caret-right-outlined" @mousedown="moveCtrl(5,1)" @mouseup="moveCtrl(5,0)"></a-button></td>
+            <td><a-button preIcon="ant-design:caret-right-outlined" @mousedown="moveCtrl(5,1,1)" @mouseup="moveCtrl(5,0,1)"></a-button></td>
           </tr>
           <tr>
             <td></td>
-            <td><a-button preIcon="ant-design:caret-down-outlined" @mousedown="moveCtrl(7,1)" @mouseup="moveCtrl(7,0)"></a-button></td>
+            <td><a-button preIcon="ant-design:caret-down-outlined" @mousedown="moveCtrl(7,1,1)" @mouseup="moveCtrl(7,0,1)"></a-button></td>
             <td></td>
           </tr>
           </tbody>
         </table>
-      </a-col>-->
+      </a-col>
     </a-row>
   </a-spin>
 </template>
@@ -144,7 +150,7 @@
 
     //预览通道参数
     deviceIndex: '',//设备索引
-    streamType: 0,//码流类型 0 代表主码流，1 代码子码流
+    streamType: 1,//码流类型 0 代表主码流，1 代码子码流
 
     //视频预览参数
     url: '',//预览通道对应的URL
@@ -155,6 +161,8 @@
     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 } });
@@ -195,6 +203,8 @@
       Object.assign(formData, tmpData);
     });
 
+    console.log(formData);
+
     createPreview();
     getSwitch();
   }
@@ -496,6 +506,8 @@
   td button{
     padding: 0;
     margin: 0;
+    width: 30px !important;
+    height: 30px;
     border-color:white;
   }