| | |
| | | <template> |
| | | <div class="video-player"> |
| | | <canvas v-show="showArea" id="area-canvas" ref="areaCanvas" width="960" height="540"></canvas> |
| | | <canvas |
| | | v-show="showArea" |
| | | id="area-canvas" |
| | | ref="areaCanvas" |
| | | width="960" |
| | | height="540" |
| | | ></canvas> |
| | | <video ref="videoPlayer" :poster="poster" preload="auto" muted></video> |
| | | <div class="controls"> |
| | | <!-- 全屏 --> |
| | |
| | | wsAddr: { |
| | | type: String, |
| | | // default: "ws://192.168.1.182:10101/ws" |
| | | default: `${location.protocol === "https" ? "wss" : "ws"}://${location.host}/ws` |
| | | default: `${location.protocol === "https" ? "wss" : "ws"}://${ |
| | | location.host |
| | | }/ws`, |
| | | }, |
| | | cameraName: { |
| | | type: String, |
| | | default: "" |
| | | default: "", |
| | | }, |
| | | cameraID: { |
| | | type: String, |
| | | default: "C4668FD0-3CAE-C31F-C21E-28B7001243C4" |
| | | default: "C4668FD0-3CAE-C31F-C21E-28B7001243C4", |
| | | }, |
| | | rtspUrl: { |
| | | type: String, |
| | | default: "rtsp://admin:a1234567@192.168.1.201:554/h264/ch1/main/av_stream" |
| | | default: |
| | | "rtsp://admin:a1234567@192.168.1.201:554/h264/ch1/main/av_stream", |
| | | }, |
| | | isRunning: { |
| | | type: Boolean, |
| | | default: false |
| | | default: false, |
| | | }, |
| | | isGb: { |
| | | type: Boolean, |
| | | default: false |
| | | default: false, |
| | | }, |
| | | showArea: { |
| | | type: Boolean, |
| | | default: false |
| | | default: false, |
| | | }, |
| | | hasPoster:{ |
| | | hasPoster: { |
| | | type: Boolean, |
| | | default: true |
| | | } |
| | | default: true, |
| | | }, |
| | | }, |
| | | |
| | | computed: { |
| | |
| | | wfs: {}, |
| | | poster: "/images/player/player_poster.gif?t=" + Math.random(), |
| | | wfsId: 0, |
| | | Camera: new VideoRuleData(), |
| | | Camera: new VideoRuleData(this.isGb), |
| | | showCanvas: true, |
| | | canvasData: { |
| | | line: [], |
| | | rect: [], // {id:'uuid', name: '矩形1', location: [{ x: 20, y: 30 }, { x: 20, y: 60 }, { x: 100, y: 60 }, { x: 100, y: 30 }] } |
| | | arrow: [], |
| | | polygon: [] |
| | | polygon: [], |
| | | }, |
| | | //showProportion: 3.2, |
| | | //showProportionY: 3.58, |
| | |
| | | ctx: null, |
| | | canvasWidth: 0, |
| | | canvasHeight: 0, |
| | | algoDataSocket: null |
| | | algoDataSocket: null, |
| | | }; |
| | | }, |
| | | watch: { |
| | |
| | | if (newVal !== oldVal) { |
| | | if (this.wfs.config) { |
| | | this.wfs.destroy(); |
| | | !!this.algoDataSocket && this.algoDataSocket.close() |
| | | !!this.algoDataSocket && this.algoDataSocket.close(); |
| | | } |
| | | this.$nextTick(() => { |
| | | this.clickStart(); |
| | | this.poster = "/images/player/player_poster.gif?t=" + Math.random() |
| | | this.poster = "/images/player/player_poster.gif?t=" + Math.random(); |
| | | }); |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | mounted() { |
| | | this.clickStart(); |
| | |
| | | this.ctx = this.canvas.getContext("2d"); |
| | | this.ctx.lineWidth = 1; |
| | | this.initArea(); |
| | | |
| | | }) |
| | | }); |
| | | }, |
| | | beforeDestroy() { |
| | | this.wfs.destroy(); |
| | | this.wfsId = ""; |
| | | |
| | | !!this.algoDataSocket && this.algoDataSocket.close() |
| | | !!this.algoDataSocket && this.algoDataSocket.close(); |
| | | }, |
| | | methods: { |
| | | checkConnect(id) { |
| | | // console.log(this.wfs) |
| | | if (id !== this.wfsId) { |
| | | return |
| | | return; |
| | | } |
| | | |
| | | if (this.wfs.websocketLoader && this.wfs.websocketLoader.client) { |
| | | if (this.wfs.websocketLoader.client.disconnected) { |
| | | this.clickStart(); |
| | | console.log("实时视频已断开,正在重连") |
| | | return |
| | | console.log("实时视频已断开,正在重连"); |
| | | return; |
| | | } |
| | | } |
| | | |
| | | let _this = this; |
| | | setTimeout(() => { |
| | | _this.checkConnect(id) |
| | | }, 10000) |
| | | _this.checkConnect(id); |
| | | }, 10000); |
| | | }, |
| | | clickStart() { |
| | | if (this.rtspUrl == "") { |
| | |
| | | cameraID: cameraId, |
| | | rtspUrl: this.rtspUrl, |
| | | isRunning: this.isRunning, |
| | | isGb28181: this.isGb |
| | | isGb28181: this.isGb, |
| | | }; |
| | | |
| | | // let camera = document.getElementById(this.cameraID); |
| | |
| | | this.wfsId = randomId; |
| | | this.wfs.attachMedia(camera, "chX", "H264Raw", wsAddr, cameraInfo); |
| | | |
| | | this.checkConnect(randomId) |
| | | this.checkConnect(randomId); |
| | | } |
| | | }, |
| | | getUuid() { |
| | |
| | | _this.canvasData.line.forEach(function (v, i) { |
| | | _this.ctx.strokeStyle = "yellow"; |
| | | _this.ctx.beginPath(); |
| | | _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion); |
| | | _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion); |
| | | _this.ctx.moveTo( |
| | | v.location[0].x / _this.showProportion, |
| | | v.location[0].y / _this.showProportion |
| | | ); |
| | | _this.ctx.lineTo( |
| | | v.location[1].x / _this.showProportion, |
| | | v.location[1].y / _this.showProportion |
| | | ); |
| | | _this.ctx.stroke(); |
| | | _this.canvas.style.cursor = "default"; |
| | | }); |
| | | _this.canvasData.rect.forEach(function (v, i) { |
| | | _this.ctx.strokeStyle = "yellow"; |
| | | _this.ctx.beginPath(); |
| | | _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion); |
| | | _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion); |
| | | _this.ctx.lineTo(v.location[2].x / _this.showProportion, v.location[2].y / _this.showProportion); |
| | | _this.ctx.lineTo(v.location[3].x / _this.showProportion, v.location[3].y / _this.showProportion); |
| | | _this.ctx.lineTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion); |
| | | _this.ctx.moveTo( |
| | | v.location[0].x / _this.showProportion, |
| | | v.location[0].y / _this.showProportion |
| | | ); |
| | | _this.ctx.lineTo( |
| | | v.location[1].x / _this.showProportion, |
| | | v.location[1].y / _this.showProportion |
| | | ); |
| | | _this.ctx.lineTo( |
| | | v.location[2].x / _this.showProportion, |
| | | v.location[2].y / _this.showProportion |
| | | ); |
| | | _this.ctx.lineTo( |
| | | v.location[3].x / _this.showProportion, |
| | | v.location[3].y / _this.showProportion |
| | | ); |
| | | _this.ctx.lineTo( |
| | | v.location[0].x / _this.showProportion, |
| | | v.location[0].y / _this.showProportion |
| | | ); |
| | | _this.ctx.stroke(); |
| | | _this.canvas.style.cursor = "default"; |
| | | |
| | | }); |
| | | _this.canvasData.arrow.forEach(function (v, i) { |
| | | _this.ctx.strokeStyle = "yellow"; |
| | |
| | | "yellow" |
| | | ); |
| | | _this.canvas.style.cursor = "default"; |
| | | |
| | | }); |
| | | _this.canvasData.polygon.forEach(function (v, i) { |
| | | if (v.location.length === 0) { |
| | |
| | | } |
| | | _this.ctx.strokeStyle = "yellow"; |
| | | _this.ctx.beginPath(); |
| | | _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportionY); |
| | | _this.ctx.moveTo( |
| | | v.location[0].x / _this.showProportion, |
| | | v.location[0].y / _this.showProportionY |
| | | ); |
| | | for (let i = 1; i < v.location.length; i++) { |
| | | _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportionY); |
| | | _this.ctx.lineTo( |
| | | v.location[i].x / _this.showProportion, |
| | | v.location[i].y / _this.showProportionY |
| | | ); |
| | | } |
| | | _this.ctx.closePath(); |
| | | _this.ctx.stroke(); |
| | | _this.canvas.style.cursor = "default"; |
| | | |
| | | }); |
| | | }, |
| | | |
| | | // 箭头绘制函数 |
| | | drawArrow(ctx, fromX, fromY, toX, toY, theta = 30, headlen = 10, width = 1, color = "yellow") { |
| | | drawArrow( |
| | | ctx, |
| | | fromX, |
| | | fromY, |
| | | toX, |
| | | toY, |
| | | theta = 30, |
| | | headlen = 10, |
| | | width = 1, |
| | | color = "yellow" |
| | | ) { |
| | | // ctx:Canvas绘图环境 |
| | | // fromX, fromY:起点坐标(也可以换成p1,只不过它是一个数组) |
| | | // toX, toY:终点坐标 (也可以换成p2,只不过它是一个数组) |
| | |
| | | getCanvasData(data) { |
| | | let polyon = { ...data }; |
| | | polyon.camera_id = this.Camera.cameraId; |
| | | savePolygon(polyon).then(rsp => { |
| | | savePolygon(polyon).then((rsp) => { |
| | | this.Camera.getPolygon(); |
| | | this.Camera.getCameraTask(); |
| | | }); |
| | |
| | | setWidthHeight() { |
| | | this.canvasWidth = this.$refs.videoPlayer.offsetWidth; |
| | | this.canvasHeight = this.$refs.videoPlayer.offsetHeight; |
| | | console.log(this.canvasWidth, this.canvasHeight) |
| | | console.log(this.canvasWidth, this.canvasHeight); |
| | | }, |
| | | async initArea() { |
| | | console.log('init') |
| | | const res = await getAllPolygon({ cameraId: this.TreeDataPool.selectedNode.id }); |
| | | console.log("init"); |
| | | const res = await getAllPolygon({ |
| | | cameraId: this.TreeDataPool.selectedNode.id, |
| | | }); |
| | | this.canvasData.line = res.data.line; |
| | | this.canvasData.rect = res.data.rect; |
| | | this.canvasData.arrow = res.data.arrow; |
| | | this.canvasData.polygon = res.data.polygon; |
| | | console.log(this.canvasData) |
| | | console.log(this.canvasData); |
| | | this.clickSelect(this.canvasData); |
| | | }, |
| | | initAlgoDataWebScoket() { |
| | | if (typeof (WebSocket) === "undefined") { |
| | | console.log("error,您的浏览器不支持socket") |
| | | if (typeof WebSocket === "undefined") { |
| | | console.log("error,您的浏览器不支持socket"); |
| | | } else { |
| | | this.algoDataSocket = new WebSocket() |
| | | this.algoDataSocket = new WebSocket(); |
| | | this.algoDataSocket.onopen = () => { |
| | | console.log("socket连接成功") |
| | | } |
| | | console.log("socket连接成功"); |
| | | }; |
| | | this.algoDataSocket.onerror = () => { |
| | | console.log("连接错误") |
| | | } |
| | | this.algoDataSocket.onmessage = msg => { |
| | | console.log(msg) |
| | | } |
| | | console.log("连接错误"); |
| | | }; |
| | | this.algoDataSocket.onmessage = (msg) => { |
| | | console.log(msg); |
| | | }; |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |