feat: add zoom controls to PtzControlPanel with zoom in and zoom out functionality

doc/GBT+28181-2022.md

@@ -575,11 +575,16 @@ SIP消息应支持基于UDP和TCP的传输。
 
 ## 4.3.5媒体回放控制协议
 
-历史视音频的回放控制命令应采用MANSRTSP，协议描述应符合附录B的规定，实现设备在端到 端之间对视音频流的正常、快速、暂停、停止、随机拖动播放等远程控制。历史媒体的回放控制命令采用 SIP消息INFO的消息体携带传输。
+历史视音频的回放控制命令应采用MANSRTSP，协议描述应符合附录B的规定，实现设备在端到
+端之间对视音频流的正常、快速、暂停、停止、随机拖动播放等远程控制。历史媒体的回放控制命令采用 SIP消息INFO的消息体携带传输。
 
 ## 4.3.6媒体传输和媒体编解码协议
 
-值功能。RTP的负载应采用如下两种格式之一：基于PS封装的视音频数据或视音频基本流数据，应符 间戳信息及各数据流的同步，同一帧视音频数据包封装成的所有RTP数据包的RTP时间戳相同，且与 议，为按序传输数据包提供可靠保证，提供流量控制和拥塞控制。
+媒体流在联网系统 IP 网络上传输时应支持
+RTP传输，媒体流发送源端应支持控制媒体流发送峰值功能。RTP的负载应采用如下两种格式之一：基于PS封装的视音频数据或视音频基本流数据，应符合附录C的规定。媒体流的传输应采用
+IETF RFC 3550规定的RTP 协议，提供实时数据传输中的时间戳信息及各数据流的同步，同一帧视音频数据包封装成的所有 RTP数据包的RTP
+时间戳相同，且与不同帧视音频数据包的RTP数据包的RTP 时间戳不同；宣采用 IETF RFC 3550规定的 RTCP
+协议，为按序传输数据包提供可靠保证，提供流量控制和拥塞控制。
 
 ## 5传输要求
 

html/NextGB/src/views/realplay/PtzControlPanel.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { ArrowRight, VideoCamera } from '@element-plus/icons-vue'
+import { ArrowRight, VideoCamera, ZoomIn, ZoomOut } from '@element-plus/icons-vue'
 import {
   ArrowUp,
   ArrowDown,
@@ -158,6 +158,27 @@ const isDisabled = computed(() => !props.activeWindow)
               <div class="direction-center"></div>
             </div>
           </div>
+          <div class="zoom-controls">
+            <el-button
+              class="zoom-btn"
+              :disabled="isDisabled"
+              @mousedown="handlePtzStart('zoom_in')"
+              @mouseup="handlePtzStop"
+              @mouseleave="handlePtzStop"
+            >
+              <el-icon><ZoomIn /></el-icon>
+            </el-button>
+            <div class="zoom-label">变倍</div>
+            <el-button
+              class="zoom-btn"
+              :disabled="isDisabled"
+              @mousedown="handlePtzStart('zoom_out')"
+              @mouseup="handlePtzStop"
+              @mouseleave="handlePtzStop"
+            >
+              <el-icon><ZoomOut /></el-icon>
+            </el-button>
+          </div>
           <div class="speed-control">
             <div class="speed-value">{{ speed }}</div>
             <el-slider
@@ -346,6 +367,48 @@ const isDisabled = computed(() => !props.activeWindow)
   border-radius: 4px;
 }
 
+.zoom-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  height: 120px;
+  justify-content: center;
+}
+
+.zoom-btn {
+  --el-button-bg-color: var(--el-color-primary-light-8);
+  --el-button-border-color: var(--el-color-primary-light-5);
+  --el-button-hover-bg-color: var(--el-color-primary-light-7);
+  --el-button-hover-border-color: var(--el-color-primary-light-4);
+  --el-button-active-bg-color: var(--el-color-primary-light-5);
+  --el-button-active-border-color: var(--el-color-primary);
+
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  margin: 0;
+  border-radius: 4px;
+  
+  .el-icon {
+    font-size: 18px;
+  }
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+.zoom-label {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  font-weight: 500;
+}
+
 .control-groups,
 .control-group {
   display: none;