Merge branch 'wvp-28181-2.0' into feature/record

# Conflicts:
#	src/main/java/com/genersoft/iot/vmp/conf/security/WebSecurityConfig.java
#	src/main/java/com/genersoft/iot/vmp/media/zlm/ZLMHttpHookListener.java

web_src/src/components/common/jessibuca.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="container" @dblclick="fullscreenSwich"
-       style="width:100%;height:100%;background-color: #000000;margin:0 auto;">
+       style="width:100%;height:100%;background-color: #000000;margin:0 auto;position: relative;">
     <div class="buttons-box" id="buttonsBox">
       <div class="buttons-box-left">
         <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
@@ -47,10 +47,6 @@ export default {
   },
   props: ['videoUrl', 'error', 'hasAudio', 'height'],
   mounted() {
-    window.onerror = (msg) => {
-      // console.error(msg)
-    };
-    console.log(this._uid)
     let paramUrl = decodeURIComponent(this.$route.params.url)
     this.$nextTick(() => {
       this.updatePlayerDomSize()
@@ -61,15 +57,17 @@ export default {
         this.videoUrl = paramUrl;
       }
       this.btnDom = document.getElementById("buttonsBox");
-      console.log("初始化时的地址为: " + this.videoUrl)
-      this.play(this.videoUrl)
     })
   },
   watch: {
-    videoUrl(newData, oldData) {
-      this.play(newData)
-    },
-    immediate: true
+    videoUrl: {
+      handler(val, _) {
+        this.$nextTick(() => {
+          this.play(val);
+        })
+      },
+      immediate: true
+    }
   },
   methods: {
     updatePlayerDomSize() {
@@ -87,70 +85,54 @@ export default {
       dom.style.height = height + "px";
     },
     create() {
-      let options = {};
-      console.log("hasAudio  " + this.hasAudio)
-
-      jessibucaPlayer[this._uid] = new window.Jessibuca(Object.assign(
-        {
-          container: this.$refs.container,
-          autoWasm: true,
-          background: "",
-          controlAutoHide: false,
-          debug: false,
-          decoder: "static/js/jessibuca/decoder.js",
-          forceNoOffscreen: true,
-          hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio,
-          hasVideo: true,
-          heartTimeout: 5,
-          heartTimeoutReplay: true,
-          heartTimeoutReplayTimes: 3,
-          hiddenAutoPause: false,
-          hotKey: false,
-          isFlv: false,
-          isFullResize: false,
-          isNotMute: this.isNotMute,
-          isResize: false,
-          keepScreenOn: false,
-          loadingText: "请稍等, 视频加载中......",
-          loadingTimeout: 10,
-          loadingTimeoutReplay: true,
-          loadingTimeoutReplayTimes: 3,
-          openWebglAlignment: false,
-          operateBtns: {
-            fullscreen: false,
-            screenshot: false,
-            play: false,
-            audio: false,
-            record: false
-          },
-          recordType: "webm",
-          rotate: 0,
-          showBandwidth: false,
-          supportDblclickFullscreen: false,
-          timeout: 10,
-          useMSE: location.hostname !== "localhost" && location.protocol !== "https:",
-          useOffscreen: false,
-          useWCS: location.hostname === "localhost" || location.protocol === "https",
-          useWebFullScreen: false,
-          videoBuffer: 0,
-          wasmDecodeAudioSyncVideo: true,
-          wasmDecodeErrorReplay: true,
-          wcsUseVideoRender: true
+      let options = {
+        container: this.$refs.container,
+        autoWasm: true,
+        background: "",
+        controlAutoHide: false,
+        debug: false,
+        decoder: "static/js/jessibuca/decoder.js",
+        forceNoOffscreen: false,
+        hasAudio: typeof (this.hasAudio) == "undefined" ? true : this.hasAudio,
+        heartTimeout: 5,
+        heartTimeoutReplay: true,
+        heartTimeoutReplayTimes: 3,
+        hiddenAutoPause: false,
+        hotKey: true,
+        isFlv: false,
+        isFullResize: false,
+        isNotMute: this.isNotMute,
+        isResize: false,
+        keepScreenOn: true,
+        loadingText: "请稍等, 视频加载中......",
+        loadingTimeout: 10,
+        loadingTimeoutReplay: true,
+        loadingTimeoutReplayTimes: 3,
+        openWebglAlignment: false,
+        operateBtns: {
+          fullscreen: false,
+          screenshot: false,
+          play: false,
+          audio: false,
+          record: false
         },
-        options
-      ));
+        recordType: "mp4",
+        rotate: 0,
+        showBandwidth: false,
+        supportDblclickFullscreen: false,
+        timeout: 10,
+        useMSE: true,
+        useWCS: location.hostname === "localhost" || location.protocol === "https:",
+        useWebFullScreen: true,
+        videoBuffer: 0.1,
+        wasmDecodeErrorReplay: true,
+        wcsUseVideoRender: true
+      };
+      console.log("Jessibuca -> options: ", options);
+      jessibucaPlayer[this._uid] = new window.Jessibuca({...options});
+
       let jessibuca = jessibucaPlayer[this._uid];
       let _this = this;
-      jessibuca.on("load", function () {
-        console.log("on load init");
-      });
-
-      jessibuca.on("log", function (msg) {
-        console.log("on log", msg);
-      });
-      jessibuca.on("record", function (msg) {
-        console.log("on record:", msg);
-      });
       jessibuca.on("pause", function () {
         _this.playing = false;
       });
@@ -158,44 +140,11 @@ export default {
         _this.playing = true;
       });
       jessibuca.on("fullscreen", function (msg) {
-        console.log("on fullscreen", msg);
         _this.fullscreen = msg
       });
-
       jessibuca.on("mute", function (msg) {
-        console.log("on mute", msg);
         _this.isNotMute = !msg;
       });
-      jessibuca.on("audioInfo", function (msg) {
-        console.log("audioInfo", msg);
-      });
-
-      jessibuca.on("bps", function (bps) {
-        // console.log('bps', bps);
-
-      });
-      let _ts = 0;
-      jessibuca.on("timeUpdate", function (ts) {
-        // console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
-        _ts = ts;
-      });
-
-      jessibuca.on("videoInfo", function (info) {
-        console.log("videoInfo", info);
-      });
-
-      jessibuca.on("error", function (error) {
-        console.log("error", error);
-      });
-
-      jessibuca.on("timeout", function () {
-        console.log("timeout");
-      });
-
-      jessibuca.on('start', function () {
-        console.log('start');
-      })
-
       jessibuca.on("performance", function (performance) {
         let show = "卡顿";
         if (performance === 2) {
@@ -205,33 +154,36 @@ export default {
         }
         _this.performance = show;
       });
-      jessibuca.on('buffer', function (buffer) {
-        // console.log('buffer', buffer);
-      })
-
-      jessibuca.on('stats', function (stats) {
-        // console.log('stats', stats);
-      })
-
       jessibuca.on('kBps', function (kBps) {
         _this.kBps = Math.round(kBps);
       });
-
-      // 显示时间戳 PTS
-      jessibuca.on('videoFrame', function () {
-
-      })
-
-      //
-      jessibuca.on('metadata', function () {
-
+      jessibuca.on("videoInfo", function (msg) {
+        console.log("Jessibuca -> videoInfo: ", msg);
+      });
+      jessibuca.on("audioInfo", function (msg) {
+        console.log("Jessibuca -> audioInfo: ", msg);
+      });
+      jessibuca.on("error", function (msg) {
+        console.log("Jessibuca -> error: ", msg);
+      });
+      jessibuca.on("timeout", function (msg) {
+        console.log("Jessibuca -> timeout: ", msg);
+      });
+      jessibuca.on("loadingTimeout", function (msg) {
+        console.log("Jessibuca -> timeout: ", msg);
+      });
+      jessibuca.on("delayTimeout", function (msg) {
+        console.log("Jessibuca -> timeout: ", msg);
+      });
+      jessibuca.on("playToRenderTimes", function (msg) {
+        console.log("Jessibuca -> playToRenderTimes: ", msg);
       });
     },
     playBtnClick: function (event) {
       this.play(this.videoUrl)
     },
     play: function (url) {
-      console.log(url)
+      console.log("Jessibuca -> url: ", url);
       if (jessibucaPlayer[this._uid]) {
         this.destroy();
       }
@@ -245,7 +197,6 @@ export default {
         jessibucaPlayer[this._uid].play(url);
       } else {
         jessibucaPlayer[this._uid].on("load", () => {
-          console.log("load 播放")
           jessibucaPlayer[this._uid].play(url);
         });
       }
@@ -286,11 +237,6 @@ export default {
       this.performance = "";
 
     },
-    eventcallbacK: function (type, message) {
-      // console.log("player 事件回调")
-      // console.log(type)
-      // console.log(message)
-    },
     fullscreenSwich: function () {
       let isFull = this.isFullscreen()
       jessibucaPlayer[this._uid].setFullscreen(!isFull)

web_src/src/components/dialog/devicePlayer.vue

@@ -1,7 +1,7 @@
 <template>
 <div id="devicePlayer" v-loading="isLoging">
 
-    <el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" @close="close()">
+    <el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" @close="close()" v-if="showVideoDialog">
       <div style="width: 100%; height: 100%">
         <el-tabs type="card" :stretch="true" v-model="activePlayer" @tab-click="changePlayer" v-if="Object.keys(this.player).length > 1">
 <!--          <el-tab-pane label="LivePlayer" name="livePlayer">-->

web_src/src/layout/UiHeader.vue

@@ -37,7 +37,6 @@
 </template>
 
 <script>
-
 import changePasswordDialog from '../components/dialog/changePassword.vue'
 import userService from '../components/service/UserService'
 import {Notification} from 'element-ui';
@@ -55,18 +54,19 @@ export default {
     };
   },
   created() {
-    console.log(4444)
     console.log(JSON.stringify(userService.getUser()))
     if (this.$route.path.startsWith("/channelList")) {
       this.activeIndex = "/deviceList"
-
     }
   },
   mounted() {
     window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
-    // window.addEventListener('unload', e => this.unloadHandler(e))
     this.alarmNotify = this.getAlarmSwitchStatus() === "true";
-    this.sseControl();
+
+    // TODO: 此处延迟连接 sse, 避免 sse 连接时 browserId 还未生成, 后续待优化
+    setTimeout(() => {
+      this.sseControl()
+    }, 3000);
   },
   methods: {
     loginout() {
@@ -107,10 +107,12 @@ export default {
         this.sseSource = new EventSource('/api/emit?browserId=' + this.$browserId);
         this.sseSource.addEventListener('message', function (evt) {
           that.$notify({
-            title: '收到报警信息',
+            title: '报警信息',
             dangerouslyUseHTMLString: true,
             message: evt.data,
-            type: 'warning'
+            type: 'warning',
+            position: 'bottom-right',
+            duration: 3000
           });
           console.log("收到信息：" + evt.data);
         });

web_src/src/main.js

@@ -1,22 +1,20 @@
 import Vue from 'vue';
 import App from './App.vue';
-
-Vue.config.productionTip = false;
-import ElementUI from 'element-ui';
+import ElementUI, {Notification} from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import router from './router/index.js';
 import axios from 'axios';
 import VueCookies from 'vue-cookies';
-import echarts from 'echarts';
 import VCharts from 'v-charts';
 
 import VueClipboard from 'vue-clipboard2';
-import {Notification} from 'element-ui';
 import Fingerprint2 from 'fingerprintjs2';
 import VueClipboards from 'vue-clipboards';
 import Contextmenu from "vue-contextmenujs"
 import userService from "./components/service/UserService"
 
+Vue.config.productionTip = false;
+
 
 // 生成唯一ID
 Fingerprint2.get(function (components) {
@@ -29,10 +27,9 @@ Fingerprint2.get(function (components) {
   //console.log(values)  //使用的浏览器信息npm
   // 生成最终id
   let port = window.location.port;
-  console.log(port);
   const fingerPrint = Fingerprint2.x64hash128(values.join(port), 31)
   Vue.prototype.$browserId = fingerPrint;
-  console.log("唯一标识码：" + fingerPrint);
+  console.log("浏览器 ID: " + fingerPrint);
 });
 
 Vue.use(VueClipboard);
@@ -75,7 +72,7 @@ axios.interceptors.request.use(
 );
 
 Vue.prototype.$axios = axios;
-Vue.prototype.$cookies.config(60*30);
+Vue.prototype.$cookies.config(60 * 30);
 
 new Vue({
   router: router,