From ae2d855c89ca722ac7309fdf1aa6ceed370e3b95 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期一, 11 十月 2021 20:22:30 +0800
Subject: [PATCH] 监控ui
---
src/components/wasmPlayer/index.vue | 238 ++++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 178 insertions(+), 60 deletions(-)
diff --git a/src/components/wasmPlayer/index.vue b/src/components/wasmPlayer/index.vue
index 447a4a5..db673dc 100644
--- a/src/components/wasmPlayer/index.vue
+++ b/src/components/wasmPlayer/index.vue
@@ -9,23 +9,22 @@
></canvas>
<div class="container" id="videoPlayer">
<div class="canvasDiv">
- <div class="loadEffect" id="loading" style="display:none;">
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- </div>
- <canvas
+ <div
+ v-loading="videoLoading"
+ element-loading-background="rgba(0, 0, 0, 0.8)"
+ style="position: unset !important"
+ ></div>
+ <canvas
ref="playCanvas"
id="paly-canvas"
width="960"
height="540"
></canvas>
</div>
+
+ <transition name="fade">
+ <div class="popuptext" id="myPopup" v-if="fullScreenNotice">璧勬簮涓嬭浇涓�,璇风◢鍚�...</div>
+ </transition>
<!-- 鎺у埗鏉� -->
<section
@@ -68,6 +67,12 @@
@click="fullScreen"
:disable="false"
></b>
+
+ <!-- 涓嬭浇 -->
+ <i
+ class="el-icon-download jsmodern-video-download"
+ @click="downLoad"
+ ></i>
</section>
<!-- 澶ф挱鏀炬寜閽� -->
@@ -84,6 +89,13 @@
<!-- 涓嬩竴涓� -->
<span class="video-next" v-show="showNext">
<i class="el-icon-arrow-right" @click="playNext"></i>
+ </span>
+
+ <!-- 鎾斁澶辫触 -->
+ <span class="video-error" v-show="playerStatus == -1">
+ <i class="el-icon-warning-outline" style="font-size:40px"></i>
+ <br />
+ 瑙嗛鍔犺浇澶辫触 鏃犳晥鐨勮棰戝湴鍧�
</span>
</div>
</div>
@@ -136,6 +148,14 @@
type: Boolean,
default: true,
},
+ autoPlay: {
+ type: Boolean,
+ default: false,
+ },
+ preload: {
+ type: Boolean,
+ default: true,
+ },
},
computed: {
@@ -175,6 +195,11 @@
playerStatus: 0,
videoUrls: [],
playerIndex: 0,
+ isEmptyUrl: false,
+ videoLoading: false,
+ loadUrl:'',
+ isFullScreen:false,
+ fullScreenNotice:false
}
},
watch: {
@@ -192,11 +217,8 @@
},
mounted() {
this.player = new Player()
-
- // 褰曞儚URL澶勭悊, 鍙兘瀛樺湪澶氫釜褰曞儚鍦板潃
- if (!this.isStream) {
- this.videoUrls = this.videoUrl.split('||')
- }
+ this.player.preload = this.preload
+ this.player.statusCallback = this.setPlayerStatus
if (this.isStream) {
this.playVideo()
@@ -206,42 +228,24 @@
this.ctx.lineWidth = 1
this.initArea()
})
+ } else {
+ // 褰曞儚URL澶勭悊, 鍙兘瀛樺湪澶氫釜褰曞儚鍦板潃
+ if (this.videoUrl === '') {
+ this.playerStatus = -1
+ return
+ }
+
+ this.videoUrls = this.videoUrl.split('||')
+
+ if (this.autoPlay || this.preload) {
+ this.playVideo()
+ }
}
},
beforeDestroy() {
this.player.stop()
},
methods: {
- checkConnect(id) {
- if (id !== this.playerId) {
- return
- }
-
- if (this.wfs.websocketLoader && this.wfs.websocketLoader.client) {
- if (this.wfs.websocketLoader.client.disconnected) {
- this.playVideo()
- console.log('瀹炴椂瑙嗛宸叉柇寮�锛屾鍦ㄩ噸杩�')
- return
- }
- }
-
- let _this = this
- setTimeout(() => {
- _this.checkConnect(id)
- }, 10000)
- },
- getUuid() {
- var s = []
- var hexDigits = '0123456789abcdefghijkopqrst'
- 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[8] = s[13] = s[18] = s[23] = '-'
- var uuid = s.join('')
- return uuid
- },
// 鍥炴樉cavas鏁版嵁
// 鐐瑰嚮閫変腑鍙樿壊 灏嗗綋鍓嶉〉闈㈡墍鏈夎矾寰勯噸缁樺垽鏂綋鍓嶉紶鏍囩殑鍧愭爣鍦ㄥ摢涓浘褰㈠唴 濡傛灉涓嶄紶鍧愭爣鍙傛暟灏辨槸鍥炴樉鐨勬柟娉�
clickSelect(e) {
@@ -451,10 +455,7 @@
url = '/httpImage/' + this.videoUrls[this.playerIndex]
}
- if (url == '') {
- return
- }
-
+ this.videoLoading = true
if (this.player.hPlayer == 0) {
this.player.play(
url,
@@ -462,19 +463,27 @@
this.isStream,
this.$refs.timeTrack,
this.$refs.timeLabel,
- payload
+ payload,
+ () => {
+ this.videoLoading = false
+ }
)
} else if (this.player.PlayOrPause == 0) {
this.player.resume()
+ this.videoLoading = false
} else {
this.player.pause()
+ this.videoLoading = false
}
this.playerStatus = this.player.PlayOrPause
- let randomId = this.getUuid()
- this.checkConnect(randomId)
- },
+ this.loadUrl = url
+ },
+ setPlayerStatus(stat) {
+ this.videoLoading = false
+ this.playerStatus = stat
+ },
stopVideo() {
if (this.player.hPlayer == 0) return
@@ -482,7 +491,62 @@
},
fullScreen() {
- this.player.fullscreen()
+ if(!this.isFullScreen){
+ this.player.fullscreen()
+ }
+ else{
+ this.player.exitfullscreen()
+ }
+ this.isFullScreen = !this.isFullScreen
+ },
+
+ async downLoad() {
+ if (!this.loadUrl) {
+ this.$notify.info({
+ title: '娑堟伅',
+ message:'涓嬭浇澶辫触锛屾棤鏁堢殑瑙嗛鍦板潃'
+ });
+ return
+ }
+
+ if (this.isFullScreen) {
+ /* const screen = this.player.webglPlayer.canvas.parentNode
+ var p = document.createElement("p");
+ var txt = document.createTextNode("璧勬簮涓嬭浇涓�,璇风◢鍚�...");
+ p.appendChild(txt);
+ p.classList.add("downloadNotice");
+ screen.appendChild(p); */
+ this.fullScreenNotice = true
+ setTimeout(()=>{this.fullScreenNotice = false},2000);}
+
+ else {
+ this.$notify.info({
+ title: '娑堟伅',
+ message:`璧勬簮涓嬭浇涓�,璇风◢鍚�...`
+ });
+ }
+
+ let url = 'http://'+window.location.host+this.loadUrl
+
+ // let url = "http://localhost:8080/httpImage/192.168.20.189:6700/283,2f49bf283ad7?collection=2021-09-28-DSVAD010120190703-video"
+ let name = url.substring(url.lastIndexOf("/") + 1)
+ let responsePromise = await fetch(url)
+ let blob = await responsePromise.blob()
+ let objectURL = window.URL.createObjectURL(blob)
+ let a = document.createElement('a')
+ a.href = objectURL
+ a.download = name
+ a.click()
+ a.remove()
+ /* let url = 'http:/'+this.loadUrl.substring(10)
+ let link = document.createElement("a"); //鍒涘缓a鏍囩
+ let name = url.substring(url.lastIndexOf("/") + 1)
+ link.style.display = "none"; //浣垮叾闅愯棌
+ link.href = url; //璧嬩簣鏂囦欢涓嬭浇鍦板潃
+ link.setAttribute("download", name); //璁剧疆涓嬭浇灞炴�� 浠ュ強鏂囦欢鍚�
+ document.body.appendChild(link); //a鏍囩鎻掕嚦椤甸潰涓�
+ link.click(); //寮哄埗瑙﹀彂a鏍囩浜嬩欢 */
+
},
playPrev() {
@@ -495,7 +559,6 @@
this.playerIndex++
this.player.stop()
this.playVideo()
- console.log(this.playerIndex, this.videoUrls.length)
},
},
}
@@ -529,7 +592,7 @@
position: absolute;
bottom: 0;
left: 0;
- z-index: 2147483648;
+ z-index: 100;
width: 100%;
height: 40px;
line-height: 40px;
@@ -554,9 +617,9 @@
background: rgba(255, 255, 255, 0.25);
border-radius: 3px;
width: 460px;
- width: -webkit-calc(100% - 220px);
- width: -moz-calc(100% - 220px);
- width: calc(100% - 220px);
+ width: -webkit-calc(100% - 260px);
+ width: -moz-calc(100% - 260px);
+ width: calc(100% - 260px);
float: left;
margin: 19px 0 0 65px;
position: relative;
@@ -700,6 +763,15 @@
opacity: 0.5;
cursor: default;
}
+
+ .el-icon-download {
+ font-size: 24px;
+ width: 18px;
+ height: 18px;
+ margin-top: 7px;
+ margin-left: -12px;
+ }
+
}
.video-player:hover {
@@ -737,4 +809,50 @@
.video-next {
right: 0px;
}
+
+.video-error {
+ position: absolute;
+ top: 35%;
+ left: 30%;
+ font-size: 14px;
+ color: #fff;
+}
+
+.downloadNotice {
+ position: absolute;
+ height: 200px;
+ width: 200px;
+ background-color: pink;
+}
+
+ .popuptext {
+ /* display:none; */
+ height: 50px;
+ line-height: 50px;
+ font-size: 20px;
+ background-color: #555;
+ opacity: .8;
+ color: #fff;
+ text-align: center;
+ border-radius: 25px;
+ position: relative;
+ top: 30px;
+ z-index: 1;
+}
+
+ .fade-enter{
+ opacity: 0;
+ }
+ .fade-enter-active{
+ transition: opacity .5s;
+ }
+ .fade-leave-to{
+ opacity: 0;
+ }
+ .fade-leave-active{
+ transition: opacity 3s;
+ }
+ .canvasDiv .el-loading-mask {
+ z-index: 1000 !important;
+ }
</style>
--
Gitblit v1.8.0