| | |
| | | default: false |
| | | } |
| | | }, |
| | | |
| | | |
| | | computed: { |
| | | poster() { |
| | | return "/images/player/player_poster.gif?t=" + Math.random() |
| | |
| | | if (id !== this.wfsId) { |
| | | return |
| | | } |
| | | |
| | | |
| | | if (this.wfs.websocketLoader && this.wfs.websocketLoader.client) { |
| | | if (this.wfs.websocketLoader.client.disconnected) { |
| | | this.clickStart(); |
| | |
| | | return |
| | | } |
| | | } |
| | | |
| | | |
| | | let _this = this; |
| | | setTimeout(() => { |
| | | _this.checkConnect(id) |
| | |
| | | if (this.rtspUrl == "") { |
| | | return; |
| | | } |
| | | |
| | | |
| | | if (this.cameraID == "") { |
| | | this.cameraID = this.getUuid(); |
| | | } |
| | | |
| | | |
| | | if (Wfs.isSupported()) { |
| | | let wsAddr = this.wsAddr; |
| | | let cameraInfo = { |
| | |
| | | isRunning: this.isRunning, |
| | | isGb28181: this.isGb |
| | | }; |
| | | |
| | | |
| | | // let camera = document.getElementById(this.cameraID); |
| | | let camera = this.$refs.videoPlayer; |
| | | this.wfs = new Wfs(); |
| | | let randomId = this.getUuid(); |
| | | this.wfsId = randomId; |
| | | this.wfs.attachMedia(camera, "chX", "H264Raw", wsAddr, cameraInfo); |
| | | |
| | | |
| | | this.checkConnect(randomId) |
| | | } |
| | | }, |
| | |
| | | for (var i = 0; i < 36; i++) { |
| | | s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); |
| | | } |
| | | s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010 |
| | | s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01 |
| | | s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010 |
| | | s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01 |
| | | s[8] = s[13] = s[18] = s[23] = "-"; |
| | | var uuid = s.join(""); |
| | | return uuid; |
| | |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | |
| | | <style lang="scss"> |
| | | #area-canvas { |
| | | background: transparent; |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | |
| | | video { |
| | | object-fit: fill; |
| | | width: 100%; |
| | |
| | | width: 100%; |
| | | height: 10%; |
| | | background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)); |
| | | |
| | | |
| | | i { |
| | | float: right; |
| | | font-size: 15px; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | |
| | | .video-player:hover { |
| | | .controls { |
| | | display: block; |
| | | } |
| | | } |
| | | </style> |
| | | </style> |