From 70bc01bd9081623b03440a45504d9f37b0024dd3 Mon Sep 17 00:00:00 2001 From: lin <648540858@qq.com> Date: Thu, 11 Jun 2026 17:29:20 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=8B=89=E6=A1=86=E6=94=BE?= =?UTF-8?q?=E5=A4=A7=E5=92=8C=E6=8B=89=E6=A1=86=E7=BC=A9=E5=B0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../vmp/gb28181/controller/DeviceControl.java | 26 +- .../vmp/gb28181/service/IDeviceService.java | 4 +- .../service/impl/DeviceServiceImpl.java | 10 +- .../gb28181/transmit/cmd/ISIPCommander.java | 2 +- .../transmit/cmd/impl/SIPCommander.java | 5 +- .../cmd/DeviceControlQueryMessageHandler.java | 4 +- .../control/RedisRpcDeviceController.java | 26 +- web/src/api/device.js | 16 ++ web/src/mixins/dragZoom.js | 204 ++++++++++++++ web/src/store/modules/frontEnd.js | 21 ++ web/src/views/common/h265web.vue | 8 + web/src/views/common/jessibuca.vue | 64 +++-- web/src/views/common/playerTabs.vue | 10 + web/src/views/common/ptzControls.vue | 5 +- web/src/views/common/rtcPlayer.vue | 33 ++- web/src/views/device/channel/index.vue | 7 + web/src/views/dialog/audioTalk.vue | 248 ++++++++++++++++++ web/src/views/dialog/devicePlayer.vue | 99 ++----- 18 files changed, 634 insertions(+), 158 deletions(-) create mode 100644 web/src/mixins/dragZoom.js create mode 100644 web/src/views/dialog/audioTalk.vue diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/controller/DeviceControl.java b/src/main/java/com/genersoft/iot/vmp/gb28181/controller/DeviceControl.java index 92a43b1c6..11c81312c 100755 --- a/src/main/java/com/genersoft/iot/vmp/gb28181/controller/DeviceControl.java +++ b/src/main/java/com/genersoft/iot/vmp/gb28181/controller/DeviceControl.java @@ -170,7 +170,7 @@ public class DeviceControl { @Parameter(name = "lengthx", description = "拉框长度像素值", required = true) @Parameter(name = "lengthy", description = "拉框宽度像素值", required = true) @GetMapping("drag_zoom/zoom_in") - public DeferredResult> dragZoomIn(@RequestParam String deviceId, String channelId, + public void dragZoomIn(@RequestParam String deviceId, String channelId, @RequestParam int length, @RequestParam int width, @RequestParam int midpointx, @@ -182,28 +182,20 @@ public class DeviceControl { } Device device = deviceService.getDeviceByDeviceId(deviceId); Assert.notNull(device, "设备不存在"); - DeferredResult> result = new DeferredResult<>(); - deviceService.dragZoomIn(device, channelId, length, width, midpointx, midpointy, lengthx,lengthy, (code, msg, data) -> { - result.setResult(new WVPResult<>(code, msg, data)); - }); - result.onTimeout(() -> { - log.warn("[设备拉框放大] 操作超时, 设备未返回应答指令, {}", deviceId); - result.setResult(WVPResult.fail(ErrorCode.ERROR100.getCode(), "操作超时, 设备未应答")); - }); - return result; + deviceService.dragZoomIn(device, channelId, length, width, midpointx, midpointy, lengthx,lengthy); } @Operation(summary = "拉框缩小", security = @SecurityRequirement(name = JwtUtils.HEADER)) @Parameter(name = "deviceId", description = "设备国标编号", required = true) @Parameter(name = "channelId", description = "通道国标编号") @Parameter(name = "length", description = "播放窗口长度像素值", required = true) - @Parameter(name = "width", description = "拉框中心的横轴坐标像素值", required = true) + @Parameter(name = "width", description = "播放窗口宽像素值", required = true) @Parameter(name = "midpointx", description = "拉框中心的横轴坐标像素值", required = true) @Parameter(name = "midpointy", description = "拉框中心的纵轴坐标像素值", required = true) @Parameter(name = "lengthx", description = "拉框长度像素值", required = true) @Parameter(name = "lengthy", description = "拉框宽度像素值", required = true) @GetMapping("/drag_zoom/zoom_out") - public DeferredResult> dragZoomOut(@RequestParam String deviceId, + public void dragZoomOut(@RequestParam String deviceId, @RequestParam(required = false) String channelId, @RequestParam int length, @RequestParam int width, @@ -217,14 +209,6 @@ public class DeviceControl { } Device device = deviceService.getDeviceByDeviceId(deviceId); Assert.notNull(device, "设备不存在"); - DeferredResult> result = new DeferredResult<>(); - deviceService.dragZoomOut(device, channelId, length, width, midpointx, midpointy, lengthx,lengthy, (code, msg, data) -> { - result.setResult(new WVPResult<>(code, msg, data)); - }); - result.onTimeout(() -> { - log.warn("[设备拉框放大] 操作超时, 设备未返回应答指令, {}", deviceId); - result.setResult(WVPResult.fail(ErrorCode.ERROR100.getCode(), "操作超时, 设备未应答")); - }); - return result; + deviceService.dragZoomOut(device, channelId, length, width, midpointx, midpointy, lengthx,lengthy); } } diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/service/IDeviceService.java b/src/main/java/com/genersoft/iot/vmp/gb28181/service/IDeviceService.java index 6e49e393b..ff5ead0c2 100755 --- a/src/main/java/com/genersoft/iot/vmp/gb28181/service/IDeviceService.java +++ b/src/main/java/com/genersoft/iot/vmp/gb28181/service/IDeviceService.java @@ -185,9 +185,9 @@ public interface IDeviceService { void homePosition(Device device, String channelId, Boolean enabled, Integer resetTime, Integer presetIndex, ErrorCallback callback); - void dragZoomIn(Device device, String channelId, int length, int width, int midpointx, int midpointy, int lengthx, int lengthy, ErrorCallback callback); + void dragZoomIn(Device device, String channelId, int length, int width, int midpointx, int midpointy, int lengthx, int lengthy); - void dragZoomOut(Device device, String channelId, int length, int width, int midpointx, int midpointy, int lengthx, int lengthy, ErrorCallback callback); + void dragZoomOut(Device device, String channelId, int length, int width, int midpointx, int midpointy, int lengthx, int lengthy); void deviceStatus(Device device, ErrorCallback callback); diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/DeviceServiceImpl.java b/src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/DeviceServiceImpl.java index 950d7db14..9e52800c7 100755 --- a/src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/DeviceServiceImpl.java +++ b/src/main/java/com/genersoft/iot/vmp/gb28181/service/impl/DeviceServiceImpl.java @@ -1276,7 +1276,7 @@ public class DeviceServiceImpl implements IDeviceService { } @Override - public void dragZoomIn(Device device, String channelId, int length, int width, int midpointx, int midpointy, int lengthx, int lengthy, ErrorCallback callback) { + public void dragZoomIn(Device device, String channelId, int length, int width, int midpointx, int midpointy, int lengthx, int lengthy) { if (!userSetting.getServerId().equals(device.getServerId())) { redisRpcService.dragZoomIn(device.getServerId(), device, channelId, length, width, midpointx, midpointy, lengthx, lengthy); return; @@ -1292,16 +1292,15 @@ public class DeviceServiceImpl implements IDeviceService { cmdXml.append("" + lengthy+ "\r\n"); cmdXml.append("\r\n"); try { - sipCommander.dragZoomCmd(device, channelId, cmdXml.toString(), callback); + sipCommander.dragZoomCmd(device, channelId, cmdXml.toString()); } catch (InvalidArgumentException | SipException | ParseException e) { log.error("[命令发送失败] 拉框放大: {}", e.getMessage()); - callback.run(ErrorCode.ERROR100.getCode(), "命令发送: " + e.getMessage(), null); throw new ControllerException(ErrorCode.ERROR100.getCode(), "命令发送失败: " + e.getMessage()); } } @Override - public void dragZoomOut(Device device, String channelId, int length, int width, int midpointx, int midpointy, int lengthx, int lengthy, ErrorCallback callback) { + public void dragZoomOut(Device device, String channelId, int length, int width, int midpointx, int midpointy, int lengthx, int lengthy) { if (!userSetting.getServerId().equals(device.getServerId())) { redisRpcService.dragZoomOut(device.getServerId(), device, channelId, length, width, midpointx, midpointy, lengthx, lengthy); return; @@ -1317,10 +1316,9 @@ public class DeviceServiceImpl implements IDeviceService { cmdXml.append("" + lengthy+ "\r\n"); cmdXml.append("\r\n"); try { - sipCommander.dragZoomCmd(device, channelId, cmdXml.toString(), callback); + sipCommander.dragZoomCmd(device, channelId, cmdXml.toString()); } catch (InvalidArgumentException | SipException | ParseException e) { log.error("[命令发送失败] 拉框放大: {}", e.getMessage()); - callback.run(ErrorCode.ERROR100.getCode(), "命令发送: " + e.getMessage(), null); throw new ControllerException(ErrorCode.ERROR100.getCode(), "命令发送失败: " + e.getMessage()); } } diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/ISIPCommander.java b/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/ISIPCommander.java index 6bac754b3..2af63f5f5 100755 --- a/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/ISIPCommander.java +++ b/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/ISIPCommander.java @@ -293,7 +293,7 @@ public interface ISIPCommander { * @param channelId 通道id * @param cmdString 前端控制指令串 */ - void dragZoomCmd(Device device, String channelId, String cmdString, ErrorCallback callback) throws InvalidArgumentException, SipException, ParseException; + void dragZoomCmd(Device device, String channelId, String cmdString) throws InvalidArgumentException, SipException, ParseException; void playbackControlCmd(Device device, DeviceChannel channel, String stream, String content, SipSubscribe.Event errorEvent, SipSubscribe.Event okEvent) throws SipException, InvalidArgumentException, ParseException; diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/impl/SIPCommander.java b/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/impl/SIPCommander.java index 53a5e75cf..4ae3b99fa 100755 --- a/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/impl/SIPCommander.java +++ b/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/cmd/impl/SIPCommander.java @@ -1292,7 +1292,7 @@ public class SIPCommander implements ISIPCommander { } @Override - public void dragZoomCmd(Device device, String channelId, String cmdString, ErrorCallback callback) throws InvalidArgumentException, SipException, ParseException { + public void dragZoomCmd(Device device, String channelId, String cmdString) throws InvalidArgumentException, SipException, ParseException { String cmdType = "DeviceControl"; int sn = (int) ((Math.random() * 9 + 1) * 100000); @@ -1311,9 +1311,6 @@ public class SIPCommander implements ISIPCommander { dragXml.append(cmdString); dragXml.append("\r\n"); - MessageEvent messageEvent = MessageEvent.getInstance(cmdType, sn + "", channelId, 1000L, callback); - messageSubscribe.addSubscribe(messageEvent); - Request request = headerProvider.createMessageRequest(device, dragXml.toString(), SipUtils.getNewViaTag(), SipUtils.getNewFromTag(), null,sipSender.getNewCallIdHeader(sipLayer.getLocalIp(device.getLocalIp()),device.getTransport())); sipSender.transmitRequest(sipLayer.getLocalIp(device.getLocalIp()),request); } diff --git a/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/event/request/impl/message/control/cmd/DeviceControlQueryMessageHandler.java b/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/event/request/impl/message/control/cmd/DeviceControlQueryMessageHandler.java index e22e136ae..3ca1a4b95 100755 --- a/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/event/request/impl/message/control/cmd/DeviceControlQueryMessageHandler.java +++ b/src/main/java/com/genersoft/iot/vmp/gb28181/transmit/event/request/impl/message/control/cmd/DeviceControlQueryMessageHandler.java @@ -390,9 +390,7 @@ public class DeviceControlQueryMessageHandler extends SIPRequestProcessorParent cmdXml.append("" + dragZoom.getLengthX() + "\r\n"); cmdXml.append("" + dragZoom.getLengthY() + "\r\n"); cmdXml.append("\r\n"); - cmder.dragZoomCmd(device, deviceChannel.getDeviceId(), cmdXml.toString(), (code, msg, data) -> { - - }); + cmder.dragZoomCmd(device, deviceChannel.getDeviceId(), cmdXml.toString()); responseAck(request, Response.OK); } catch (Exception e) { log.error("[命令发送失败] 拉框控制: {}", e.getMessage()); diff --git a/src/main/java/com/genersoft/iot/vmp/service/redisMsg/control/RedisRpcDeviceController.java b/src/main/java/com/genersoft/iot/vmp/service/redisMsg/control/RedisRpcDeviceController.java index 7bae7442d..5803d681a 100644 --- a/src/main/java/com/genersoft/iot/vmp/service/redisMsg/control/RedisRpcDeviceController.java +++ b/src/main/java/com/genersoft/iot/vmp/service/redisMsg/control/RedisRpcDeviceController.java @@ -332,18 +332,15 @@ public class RedisRpcDeviceController extends RpcController { return response; } try { - deviceService.dragZoomIn(device, channelId, length, width, midpointx, midpointy, lengthx, lengthy, (code, msg, data) -> { - response.setStatusCode(ErrorCode.SUCCESS.getCode()); - response.setBody(new WVPResult<>(code, msg, data)); - // 手动发送结果 - sendResponse(response); - }); + deviceService.dragZoomIn(device, channelId, length, width, midpointx, midpointy, lengthx, lengthy); }catch (ControllerException e) { response.setStatusCode(e.getCode()); response.setBody(WVPResult.fail(ErrorCode.ERROR100.getCode(), e.getMsg())); - sendResponse(response); + return response; } - return null; + response.setStatusCode(ErrorCode.SUCCESS.getCode()); + response.setBody(WVPResult.success()); + return response; } @RedisRpcMapping("dragZoomOut") @@ -367,18 +364,15 @@ public class RedisRpcDeviceController extends RpcController { return response; } try { - deviceService.dragZoomOut(device, channelId, length, width, midpointx, midpointy, lengthx, lengthy, (code, msg, data) -> { - response.setStatusCode(ErrorCode.SUCCESS.getCode()); - response.setBody(new WVPResult<>(code, msg, data)); - // 手动发送结果 - sendResponse(response); - }); + deviceService.dragZoomOut(device, channelId, length, width, midpointx, midpointy, lengthx, lengthy); }catch (ControllerException e) { response.setStatusCode(e.getCode()); response.setBody(WVPResult.fail(ErrorCode.ERROR100.getCode(), e.getMsg())); - sendResponse(response); + return response; } - return null; + response.setStatusCode(ErrorCode.SUCCESS.getCode()); + response.setBody(WVPResult.success()); + return response; } @RedisRpcMapping("alarm") diff --git a/web/src/api/device.js b/web/src/api/device.js index 925482e8d..3e8e33d6c 100644 --- a/web/src/api/device.js +++ b/web/src/api/device.js @@ -283,3 +283,19 @@ export function getRegisterTimeStatistics({ deviceId, count }) { }) } +export function dragZoomIn(params) { + return request({ + method: 'get', + url: '/api/device/control/drag_zoom/zoom_in', + params + }) +} + +export function dragZoomOut(params) { + return request({ + method: 'get', + url: '/api/device/control/drag_zoom/zoom_out', + params + }) +} + diff --git a/web/src/mixins/dragZoom.js b/web/src/mixins/dragZoom.js new file mode 100644 index 000000000..c00f13a0d --- /dev/null +++ b/web/src/mixins/dragZoom.js @@ -0,0 +1,204 @@ +export default { + data() { + return { + dragGridEnabled: true, + overlayCanvas: null, + overlayCtx: null, + dragActive: false, + dragStart: null, + dragCurrent: null, + dragVideoRect: null, + dragCallback: null + } + }, + computed: { + dragRect() { + if (!this.dragStart || !this.dragCurrent) return null + return { + left: Math.min(this.dragStart.x, this.dragCurrent.x), + top: Math.min(this.dragStart.y, this.dragCurrent.y), + width: Math.abs(this.dragCurrent.x - this.dragStart.x), + height: Math.abs(this.dragCurrent.y - this.dragStart.y) + } + }, + dragInfo() { + if (!this.dragRect) return null + return { + midX: Math.round(this.dragRect.left + this.dragRect.width / 2), + midY: Math.round(this.dragRect.top + this.dragRect.height / 2), + width: Math.round(this.dragRect.width), + height: Math.round(this.dragRect.height) + } + } + }, + beforeDestroy() { + this._removeCanvas() + }, + methods: { + getVideoElement() { + return null + }, + _ensureCanvas() { + this._removeCanvas() + const videoRect = this.getVideoRect() + if (!videoRect) return null + const parentRect = this.$el.getBoundingClientRect() + const w = Math.round(videoRect.width) + const h = Math.round(videoRect.height) + const canvas = document.createElement('canvas') + canvas.style.position = 'absolute' + canvas.style.left = (videoRect.left - parentRect.left) + 'px' + canvas.style.top = (videoRect.top - parentRect.top) + 'px' + canvas.style.width = w + 'px' + canvas.style.height = h + 'px' + canvas.width = w + canvas.height = h + canvas.style.zIndex = '999' + canvas.style.pointerEvents = 'none' + console.log('this.dragGridEnabled： ' + this.dragGridEnabled) + if (this.dragGridEnabled) { + console.log('加载网格背景') + canvas.style.backgroundImage = + 'linear-gradient(rgba(64, 158, 255, 0.3) 1px, transparent 2px),' + + 'linear-gradient(90deg, rgba(64, 158, 255, 0.3) 1px, transparent 2px)' + canvas.style.backgroundSize = '25px 25px' + canvas.style.border = '2px solid #409EFF' + } + + this.$el.appendChild(canvas) + console.log(this.$el) + const ctx = canvas.getContext('2d') + this.overlayCanvas = canvas + this.overlayCtx = ctx + return { canvas, ctx } + }, + _removeCanvas() { + this._unbindDragEvents() + if (this.overlayCanvas && this.overlayCanvas.parentNode) { + this.overlayCanvas.parentNode.removeChild(this.overlayCanvas) + } + this.overlayCanvas = null + this.overlayCtx = null + }, + _bindDragEvents() { + const c = this.overlayCanvas + if (!c) return + c.style.pointerEvents = 'auto' + c.style.cursor = 'crosshair' + c.addEventListener('mousedown', this._onDragMouseDown) + c.addEventListener('mousemove', this._onDragMove) + c.addEventListener('mouseup', this._onDragEnd) + c.addEventListener('mouseleave', this._onDragEnd) + }, + _unbindDragEvents() { + const c = this.overlayCanvas + if (!c) return + c.style.pointerEvents = 'none' + c.style.cursor = 'default' + c.removeEventListener('mousedown', this._onDragMouseDown) + c.removeEventListener('mousemove', this._onDragMove) + c.removeEventListener('mouseup', this._onDragEnd) + c.removeEventListener('mouseleave', this._onDragEnd) + }, + _drawOverlay() { + const ctx = this.overlayCtx + const canvas = this.overlayCanvas + if (!ctx || !canvas) return + ctx.clearRect(0, 0, canvas.width, canvas.height) + if (this.dragRect) { + this._drawDragRect(ctx) + } + }, + _drawDragRect(ctx) { + const r = this.dragRect + if (!r) return + ctx.strokeStyle = '#409EFF' + ctx.lineWidth = 2 + ctx.setLineDash([6, 3]) + ctx.fillStyle = 'rgba(64, 158, 255, 0.15)' + ctx.beginPath() + ctx.rect(r.left, r.top, r.width, r.height) + ctx.fill() + ctx.stroke() + ctx.setLineDash([]) + const info = this.dragInfo + if (!info) return + const text = '\u4E2D\u5FC3: (' + info.midX + ', ' + info.midY + ') \u5927\u5C0F: ' + info.width + ' \u00D7 ' + info.height + ctx.font = '12px sans-serif' + const textW = ctx.measureText(text).width + const labelW = textW + 16 + const labelH = 22 + const labelX = r.left + const labelY = r.top + r.height + 6 + ctx.fillStyle = 'rgba(0, 0, 0, 0.7)' + ctx.fillRect(labelX, labelY, labelW, labelH) + ctx.fillStyle = '#fff' + ctx.fillText(text, labelX + 8, labelY + 15) + }, + startDragZoom(callback) { + this._ensureCanvas() + this._bindDragEvents() + this.dragCallback = callback || null + this.dragActive = true + this.dragStart = null + this.dragCurrent = null + this.dragVideoRect = null + }, + _onDragMouseDown(e) { + if (!this.dragActive) return + e.preventDefault() + const videoRect = this.getVideoRect() + if (!videoRect) return + this.dragVideoRect = videoRect + this.dragStart = { + x: e.clientX - videoRect.left, + y: e.clientY - videoRect.top + } + this.dragCurrent = { ...this.dragStart } + this._drawOverlay() + }, + _onDragMove(e) { + if (!this.dragActive || !this.dragStart || !this.dragVideoRect) return + e.preventDefault() + this.dragCurrent = { + x: e.clientX - this.dragVideoRect.left, + y: e.clientY - this.dragVideoRect.top + } + this._drawOverlay() + }, + _onDragEnd() { + if (!this.dragActive) return + if (!this.dragStart || !this.dragCurrent) return + const sx = Math.min(this.dragStart.x, this.dragCurrent.x) + const sy = Math.min(this.dragStart.y, this.dragCurrent.y) + const ex = Math.max(this.dragStart.x, this.dragCurrent.x) + const ey = Math.max(this.dragStart.y, this.dragCurrent.y) + const rectW = ex - sx + const rectH = ey - sy + if (rectW < 10 || rectH < 10) { + this._resetDrag() + return + } + if (this.dragCallback) { + this.dragCallback({ + length: Math.round(this.dragVideoRect.width), + width: Math.round(this.dragVideoRect.height), + midpointx: Math.round(sx + rectW / 2), + midpointy: Math.round(sy + rectH / 2), + lengthx: Math.round(rectW), + lengthy: Math.round(rectH) + }) + } + this._resetDrag() + }, + _resetDrag() { + this._unbindDragEvents() + this.dragActive = false + this.dragStart = null + this.dragCurrent = null + this.dragVideoRect = null + this.dragCallback = null + this._removeCanvas() + } + } +} diff --git a/web/src/store/modules/frontEnd.js b/web/src/store/modules/frontEnd.js index 262fdb8e4..18b723d33 100644 --- a/web/src/store/modules/frontEnd.js +++ b/web/src/store/modules/frontEnd.js @@ -7,6 +7,7 @@ import { startScan, stopCruise, stopScan, wiper } from '@/api/frontEnd' +import { dragZoomIn, dragZoomOut } from '@/api/device' const actions = { setSpeedForScan({ commit }, params) { @@ -208,6 +209,26 @@ const actions = { reject(error) }) }) + }, + dragZoomIn({ commit }, params) { + return new Promise((resolve, reject) => { + dragZoomIn(params).then(response => { + const { data } = response + resolve(data) + }).catch(error => { + reject(error) + }) + }) + }, + dragZoomOut({ commit }, params) { + return new Promise((resolve, reject) => { + dragZoomOut(params).then(response => { + const { data } = response + resolve(data) + }).catch(error => { + reject(error) + }) + }) } } diff --git a/web/src/views/common/h265web.vue b/web/src/views/common/h265web.vue index 8518d16d6..b920960e8 100644 --- a/web/src/views/common/h265web.vue +++ b/web/src/views/common/h265web.vue @@ -38,8 +38,10 @@ const h265webPlayer = {} * @see https://github.com/numberwolf/h265web.js/blob/master/example_normal/index.js */ const token = 'base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1' +import dragZoom from '../../mixins/dragZoom' export default { name: 'H265web', + mixins: [dragZoom], props: ['videoUrl', 'error', 'hasAudio', 'height', 'showButton'], data() { return { @@ -247,6 +249,12 @@ export default { }, setPlaybackRate: function(speed) { h265webPlayer[this._uid].setPlaybackRate(speed) + }, + getVideoElement() { + return this.$refs.playerBox + }, + getVideoRect() { + return this.getVideoElement().getBoundingClientRect() } } } diff --git a/web/src/views/common/jessibuca.vue b/web/src/views/common/jessibuca.vue index af4a2241f..ab73008f1 100755 --- a/web/src/views/common/jessibuca.vue +++ b/web/src/views/common/jessibuca.vue @@ -1,39 +1,41 @@ + + diff --git a/web/src/views/dialog/devicePlayer.vue b/web/src/views/dialog/devicePlayer.vue index c4b29e726..21a603893 100755 --- a/web/src/views/dialog/devicePlayer.vue +++ b/web/src/views/dialog/devicePlayer.vue @@ -5,7 +5,7 @@ v-if="showVideoDialog" v-el-drag-dialog title="视频播放" - top="2vh" + top="10vh" width="65vw" :close-on-click-modal="false" :visible.sync="showVideoDialog" @@ -15,7 +15,8 @@
- +
@@ -29,6 +30,8 @@ @focus-stop="onFocusStop" @iris-move="onIrisMove" @iris-stop="onIrisStop" + @toggle-drag-zoom="toggleDragZoom('in')" + @toggle-drag-zoom-out="toggleDragZoom('out')" /> @@ -97,23 +100,6 @@ - -
- - 喊话(Broadcast) - 对讲(Talk) - -
-
- -

- 正在释放资源 - 点击开始对讲 - 等待接通中... - 请说话 -

-
- @@ -124,7 +110,6 @@