最近做了个视频会议的项目硬件用的海康球机DS-2DC4A212IW-DE/C甲方要求在会议内封装一个云台可以进行拖拽 控制摄像头方向以及焦距的功能官方给的SDK还不能直接复用只能手搓了下面是代码可直接复用需要nginx进行代理配置部分参数需要替换。template !-- 云台控制区 -- div classptz-container refptzContainer v-showvisible :stylecontainerStyle div classptz-container-header mousedownstartDrag stylecursor: move; div{{ $t(meeting_interface.PTZ) }}/div i classel-icon-close hand click.stopclosePanel/i /div div classcontrol-panel div classptz-area div classd-pad !-- 第一行 -- div/div button classctrl-btn data-dirup aria-label向上 mousedownstartMove(up) mouseupstopMove mouseleaveonLeave(up) ▲ /button div/div !-- 第二行 -- button classctrl-btn data-dirleft aria-label向左 mousedownstartMove(left) mouseupstopMove mouseleaveonLeave(left) ◀ /button button classctrl-btn center-btn idhomeBtn aria-label归位 clickhandleHome HOME /button button classctrl-btn data-dirright aria-label向右 mousedownstartMove(right) mouseupstopMove mouseleaveonLeave(right) ▶ /button !-- 第三行 -- div/div button classctrl-btn data-dirdown aria-label向下 mousedownstartMove(down) mouseupstopMove mouseleaveonLeave(down) ▼ /button div/div /div /div /div !-- 缩放控制区 -- div classzoom-controls button classzoom-btn idzoomOut aria-label缩小 mousedownstartZoom(out) mouseupstopZoom mouseleaveonZoomLeave(out) − /button div div classzoom-display{{ currentZoom.toFixed(1) }}x/div div classzoom-labelzoom/div /div button classzoom-btn idzoomIn aria-label放大 mousedownstartZoom(in) mouseupstopZoom mouseleaveonZoomLeave(in) /button /div /div /template script import CryptoJS from crypto-js; export default { name: PtzControl, props: { visible: { type: Boolean, default: false } }, data() { return { currentSpeed: 3, // 修改初始倍率为 1.0 currentZoom: 1.0, // 新增定义显示用的步长为 0.5 zoomStep: 0.5, // 新增定义显示的最小和最大倍率 minZoomDisplay: 0.5, maxZoomDisplay: 3.0, activeTimer: null, // 记录当前激活的按钮用于 leave 时判断 activeDirection: null, // 拖拽相关状态 isDragging: false, startX: 0, startY: 0, initialLeft: 0, initialTop: 0, currentLeft: 0, currentTop: 0, // 云台方向变焦控制 ptzUrl: ,// /ISAPI/PTZCtrl/channels/1/continuous // 云台回到预设位置 ptzGoto: ,// /ISAPI/PTZCtrl/channels/1/presets/1/goto username: , password: , origin: , }; }, computed: { containerStyle() { // 如果未开始拖拽且无初始位置返回空对象使用默认布局 if (this.currentLeft 0 this.currentTop 0 !this.isDragging) { return {}; } return { position: fixed, left: ${this.currentLeft}px, top: ${this.currentTop}px, margin: 0, transform: none // 确保不受其他 transform 影响 }; } }, watch: { // 监听 visible 变化实现打开时自动获取状态并重置位置 visible(newVal) { if (newVal) { this.$nextTick(() { // 获取容器元素 const container this.$refs.ptzContainer; if (container) { const containerWidth container.offsetWidth; const containerHeight container.offsetHeight; // 计算居中位置(屏幕宽高 - 自身宽高) / 2 let newLeft (window.innerWidth - containerWidth) / 2; let newTop (window.innerHeight - containerHeight) / 2; // 额外减去 60px 高度使面板略微偏上 newTop - 60; // 边界检查防止计算出负值 this.currentLeft Math.max(0, newLeft); this.currentTop Math.max(0, newTop); } }); } } }, mounted() { this.username window.baseConfig.ptz.username; this.password window.baseConfig.ptz.password; this.ptzUrl window.location.origin /ISAPI/PTZCtrl/channels/1/continuous; this.ptzGoto window.location.origin /ISAPI/PTZCtrl/channels/1/presets/1/goto; }, methods: { // 拖拽逻辑 startDrag(e) { this.isDragging true; this.startX e.clientX; this.startY e.clientY; const rect this.$refs.ptzContainer.getBoundingClientRect(); this.initialLeft rect.left; this.initialTop rect.top; document.addEventListener(mousemove, this.onDrag); document.addEventListener(mouseup, this.stopDrag); // 防止拖拽时选中文本 e.preventDefault(); }, onDrag(e) { if (!this.isDragging) return; const dx e.clientX - this.startX; const dy e.clientY - this.startY; let newLeft this.initialLeft dx; let newTop this.initialTop dy; // 获取容器尺寸 const containerWidth this.$refs.ptzContainer.offsetWidth; const containerHeight this.$refs.ptzContainer.offsetHeight; // 获取可视区域尺寸 const windowWidth window.innerWidth; const windowHeight window.innerHeight; // 边界判断防止拖出可视区 // 最小值为 0 (贴左/贴上) // 最大值为 窗口尺寸 - 容器尺寸 (贴右/贴下) this.currentLeft Math.max(0, Math.min(newLeft, windowWidth - containerWidth)); this.currentTop Math.max(0, Math.min(newTop, windowHeight - containerHeight)); }, stopDrag() { this.isDragging false; document.removeEventListener(mousemove, this.onDrag); document.removeEventListener(mouseup, this.stopDrag); }, // 关闭面板 closePanel() { this.$emit(closePanel); }, // 辅助函数 buildPTZXml(pan, tilt, zoom) { return PTZData pan${pan}/pan tilt${tilt}/tilt zoom${zoom}/zoom /PTZData.trim(); }, // sendRequest 通用封装支持 GET/PUT 等 Digest 认证 async sendRequest(url, method PUT, body null, username, password) { if (!url) throw new Error(❌ URL 为空); if (!username || !password) throw new Error(❌ 用户名或密码为空); const headers { Content-Type: application/xml }; // 第一次请求不带认证头 let resp await fetch(url, { method, headers: body ? headers : { ...headers, Content-Length: 0 }, // GET 请求通常不需要 Content-Type 或 Body但海康有时需要 body, credentials: omit }); if (resp.status 401) { const challengeHeader resp.headers.get(WWW-Authenticate); if (!challengeHeader) { throw new Error(401 但无 WWW-Authenticate 头); } const realmMatch challengeHeader.match(/realm([^])/); const nonceMatch challengeHeader.match(/nonce([^])/); const qopMatch challengeHeader.match(/qop(\w)/); if (!realmMatch || !nonceMatch) { throw new Error(无法解析 realm 或 nonce${challengeHeader}); } const realm realmMatch[1]; const nonce nonceMatch[1]; const qop qopMatch?.[1] || auth; const uri new URL(url, window.location.origin).pathname; const nc 00000001; const cnonce Math.random().toString(36).substr(2, 16); const ha1 CryptoJS.MD5(${username}:${realm}:${password}).toString(); const ha2 CryptoJS.MD5(${method}:${uri}).toString(); const response CryptoJS.MD5(${ha1}:${nonce}:${nc}:${cnonce}:${qop}:${ha2}).toString(); const authHeader [ Digest username${username}, realm${realm}, nonce${nonce}, uri${uri}, algorithmMD5, response${response}, qop${qop}, nc${nc}, cnonce${cnonce} ].join(, ); // 第二次请求带认证头 resp await fetch(url, { method, headers: { ...headers, Authorization: authHeader }, body, credentials: omit }); } // 检查海康特有错误 if (resp.ok) { const contentType resp.headers.get(content-type) || ; if (contentType.includes(xml)) { const text await resp.text(); if (text.includes(statusValue401/statusValue)) { throw new Error(Digest 认证失败用户名/密码错误 或 realm 不匹配); } return text; } // 非 XML 响应直接返回文本 return await resp.text(); } const text await resp.text().catch(() ); throw new Error(HTTP ${resp.status} ${resp.statusText}${text ? \n响应${text} : }); }, // PTZ API 方法 async move(direction, speed) { const vel speed * 10; let pan 0, tilt 0; switch (direction) { case up: tilt vel; break; case down: tilt -vel; break; case left: pan -vel; break; case right: pan vel; break; default: return; } const xml this.buildPTZXml(pan, tilt, 0); try { await this.sendRequest(this.ptzUrl, PUT, xml, this.username, this.password); console.log(✅ PTZ 移动指令已发送); } catch (err) { console.error([API] 移动失败:, err.message); this.$emit(error, err.message); } }, async stop() { const xml this.buildPTZXml(0, 0, 0); try { await this.sendRequest(this.ptzUrl, PUT, xml, this.username, this.password); console.log(✅ PTZ 停止); } catch (err) { console.error([API] 停止失败:, err.message); } }, async home() { try { const xml PTZData/PTZData; await this.sendRequest(this.ptzGoto, PUT, xml, this.username, this.password); console.log(✅ 已调用预设位接口 (ptzGoto)); this.$emit(home); } catch (err) { console.error([API] 归位失败:, err.message); this.$emit(error, err.message); } }, async zoom(isZoomIn) { // 修改根据方向直接发送 100 (放大) 或 -100 (缩小) // 海康协议中 continuous zoom 通常正数为放大负数为缩小具体视设备而定此处按需求设为固定值 const zoomVal isZoomIn ? 100 : -100; // 构建 XMLpan 和 tilt 为 0只传 zoom const xml this.buildPTZXml(0, 0, zoomVal); try { await this.sendRequest(this.ptzUrl, PUT, xml, this.username, this.password); console.log(✅ 变焦指令已发送 (${isZoomIn ? 放大 : 缩小}, val: ${zoomVal})); } catch (err) { console.error([API] 变焦失败:, err.message); } }, // 事件处理 startMove(dir) { this.activeDirection dir; const btn this.$el.querySelector(.ctrl-btn[data-dir${dir}]); if (btn) { btn.classList.add(active); } // 发送移动指令 this.move(dir, this.currentSpeed); // 清除之前的定时器如果有 if (this.activeTimer) { clearTimeout(this.activeTimer); this.activeTimer null; } }, stopMove() { if (this.activeTimer) { clearTimeout(this.activeTimer); this.activeTimer null; } this.activeTimer setTimeout(() { this.stop(); }, 1000); this.stop(); // 清除所有 active 类安全兜底 document.querySelectorAll(.ctrl-btn.active).forEach(el { el.classList.remove(active); }); this.activeDirection null; }, onLeave(dir) { if (this.activeDirection dir) { this.stopMove(); } }, handleHome() { const btn this.$el.querySelector(#homeBtn); btn.classList.add(active); setTimeout(() { btn.classList.remove(active); this.home(); }, 200); }, startZoom(type) { const btn type in ? this.$el.querySelector(#zoomIn) : this.$el.querySelector(#zoomOut); btn.classList.add(active); const handler type in ? this.handleZoomIn : this.handleZoomOut; handler(); if (this.activeTimer) clearInterval(this.activeTimer); this.activeTimer setInterval(handler, 300); }, stopZoom() { if (this.activeTimer) { clearInterval(this.activeTimer); this.activeTimer null; } this.activeTimer setTimeout(() { this.stop(); }, 800); // 清除缩放按钮 active 状态 const zoomBtns this.$el.querySelectorAll(.zoom-btn.active); zoomBtns.forEach(btn btn.classList.remove(active)); }, onZoomLeave(type) { const btn type in ? this.$el.querySelector(#zoomIn) : this.$el.querySelector(#zoomOut); if (btn.classList.contains(active)) { this.stopZoom(); } }, handleZoomIn() { // 修改按 0.5 步长增加显示值直到最大倍率 if (this.currentZoom this.maxZoomDisplay) { let nextZoom this.currentZoom this.zoomStep; // 保留一位小数避免浮点数精度问题 (如 1.500000001) nextZoom parseFloat(nextZoom.toFixed(1)); if (nextZoom this.maxZoomDisplay) { this.currentZoom nextZoom; this.zoom(true); // 发送放大指令 } } }, handleZoomOut() { // 修改按 0.5 步长减小显示值直到最小倍率 if (this.currentZoom this.minZoomDisplay) { let nextZoom this.currentZoom - this.zoomStep; nextZoom parseFloat(nextZoom.toFixed(1)); if (nextZoom this.minZoomDisplay) { this.currentZoom nextZoom; this.zoom(false); // 发送缩小指令 } } } }, beforeDestroy() { // 清理定时器防止内存泄漏 if (this.activeTimer) { clearInterval(this.activeTimer); } // 清理拖拽监听器 document.removeEventListener(mousemove, this.onDrag); document.removeEventListener(mouseup, this.stopDrag); } }; /script style scoped * { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; } .ptz-container { width: 300px; height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #28538F; border-radius: 4px; z-index: 9999; background-color: #182445; } .ptz-container-header { width: 100%; height: 40px; line-height: 40px; display: flex; justify-content: space-between; align-items: center; color: #fff; background: #28538F; padding: 0 12px; user-select: none; /* 防止拖拽时选中文字 */ } /* 主容器 */ .control-panel { width: 254px; margin-top: 18px; background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; padding: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; border-radius: 50%; } /* 云台控制区 */ .ptz-area { display: flex; flex-direction: column; align-items: center; gap: 20px; position: relative; width: 100%; } .d-pad { display: grid; grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(3, 60px); gap: 12px; justify-items: center; align-items: center; } .ctrl-btn { width: 60px; height: 60px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; color: #f8fafc; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); font-size: 20px; outline: none; touch-action: manipulation; } .ctrl-btn:active, .ctrl-btn.active { background: #3b82f6; border-color: #3b82f6; box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); transform: scale(0.95); color: white; } /* 中间归位按钮 */ .center-btn { grid-column: 2; grid-row: 2; background: rgba(255, 255, 255, 0.1); font-size: 12px; font-weight: bold; border-radius: 12px; width: 50px; height: 50px; letter-spacing: 1px; } /* 缩放控制区 */ .zoom-controls { width: 254px; display: flex; align-items: center; gap: 16px; justify-content: center; padding: 16px; } .zoom-btn { width: 55px; height: 55px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; color: #f8fafc; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); font-size: 24px; font-weight: bold; outline: none; touch-action: manipulation; flex-shrink: 0; } .zoom-btn:active, .zoom-btn.active { background: #3b82f6; border-color: #3b82f6; box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); transform: scale(0.95); color: white; } .zoom-btn:hover, .zoom-btn.hover { transform: scale(0.98); background: #3b82f6; } .zoom-display { flex: 1; text-align: center; font-size: 18px; font-weight: 600; color: #3b82f6; min-width: 80px; font-family: Courier New, monospace; letter-spacing: 1px; } .zoom-label { font-size: 12px; color: #94a3b8; margin-top: 4px; text-align: center; width: 100%; } /style