全息系统添加不同类型视频直播hls/flv兼容

cdn/src/libs/videojs-flvjs/videojs-flvjs.min - 副本 (2).js

+!function e(t,r,o){function n(l,f){if(!r[l]){if(!t[l]){var u="function"==typeof require&&require;if(!f&&u)return u(l,!0);if(i)return i(l,!0);var a=new Error("Cannot find module '"+l+"'");throw a.code="MODULE_NOT_FOUND",a}var c=r[l]={exports:{}};t[l][0].call(c.exports,function(e){var r=t[l][1][e];return n(r||e)},c,c.exports,e,t,r,o)}return r[l].exports}for(var i="function"==typeof require&&require,l=0;l<o.length;l++)n(o[l]);return n}({1:[function(e,t,r){(function(e){"use strict";function t(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function n(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(r,"__esModule",{value:!0});var i=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),l=function e(t,r,o){null===t&&(t=Function.prototype);var n=Object.getOwnPropertyDescriptor(t,r);if(void 0===n){var i=Object.getPrototypeOf(t);return null===i?void 0:e(i,r,o)}if("value"in n)return n.value;var l=n.get;if(void 0!==l)return l.call(o)},f="undefined"!=typeof window?window.videojs:void 0!==e?e.videojs:null,u=function(e){return e&&e.__esModule?e:{default:e}}(f),a=u.default.getTech("Html5"),c=u.default.mergeOptions||u.default.util.mergeOptions,s={mediaDataSource:{},config:{}},p=function(e){function r(e,n){return t(this,r),e=c(s,e),o(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e,n))}return n(r,e),i(r,[{key:"setSrc",value:function(e){this.flvPlayer&&(this.flvPlayer.detachMediaElement(),this.flvPlayer.destroy());var t=this.options_.mediaDataSource,r=this.options_.config;t.type=void 0===t.type?"flv":t.type,t.url=e,this.flvPlayer=window.flvjs.createPlayer(t,r),this.flvPlayer.attachMediaElement(this.el_),this.flvPlayer.load()}},{key:"dispose",value:function(){this.flvPlayer&&(this.flvPlayer.detachMediaElement(),this.flvPlayer.destroy()),l(r.prototype.__proto__||Object.getPrototypeOf(r.prototype),"dispose",this).call(this)}}]),r}(a);p.isSupported=function(){return window.flvjs&&window.flvjs.isSupported()},p.formats={"video/flv":"FLV","video/x-flv":"FLV"},p.canPlayType=function(e){return p.isSupported()&&e in p.formats?"maybe":""},p.canPlaySource=function(e,t){return p.canPlayType(e.type)},p.VERSION="0.2.0",u.default.registerTech("Flvjs",p),r.default=p}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1]);
\ No newline at end of file

cdn/src/libs/videojs-flvjs/videojs-flvjs.min.js

-!function e(t,r,o){function n(l,f){if(!r[l]){if(!t[l]){var u="function"==typeof require&&require;if(!f&&u)return u(l,!0);if(i)return i(l,!0);var a=new Error("Cannot find module '"+l+"'");throw a.code="MODULE_NOT_FOUND",a}var c=r[l]={exports:{}};t[l][0].call(c.exports,function(e){var r=t[l][1][e];return n(r||e)},c,c.exports,e,t,r,o)}return r[l].exports}for(var i="function"==typeof require&&require,l=0;l<o.length;l++)n(o[l]);return n}({1:[function(e,t,r){(function(e){"use strict";function t(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function n(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(r,"__esModule",{value:!0});var i=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),l=function e(t,r,o){null===t&&(t=Function.prototype);var n=Object.getOwnPropertyDescriptor(t,r);if(void 0===n){var i=Object.getPrototypeOf(t);return null===i?void 0:e(i,r,o)}if("value"in n)return n.value;var l=n.get;if(void 0!==l)return l.call(o)},f="undefined"!=typeof window?window.videojs:void 0!==e?e.videojs:null,u=function(e){return e&&e.__esModule?e:{default:e}}(f),a=u.default.getTech("Html5"),c=u.default.mergeOptions||u.default.util.mergeOptions,s={mediaDataSource:{},config:{}},p=function(e){function r(e,n){return t(this,r),e=c(s,e),o(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e,n))}return n(r,e),i(r,[{key:"setSrc",value:function(e){this.flvPlayer&&(this.flvPlayer.detachMediaElement(),this.flvPlayer.destroy());var t=this.options_.mediaDataSource,r=this.options_.config;t.type=void 0===t.type?"flv":t.type,t.url=e,this.flvPlayer=window.flvjs.createPlayer(t,r),this.flvPlayer.attachMediaElement(this.el_),this.flvPlayer.load()}},{key:"dispose",value:function(){this.flvPlayer&&(this.flvPlayer.detachMediaElement(),this.flvPlayer.destroy()),l(r.prototype.__proto__||Object.getPrototypeOf(r.prototype),"dispose",this).call(this)}}]),r}(a);p.isSupported=function(){return window.flvjs&&window.flvjs.isSupported()},p.formats={"video/flv":"FLV","video/x-flv":"FLV"},p.canPlayType=function(e){return p.isSupported()&&e in p.formats?"maybe":""},p.canPlaySource=function(e,t){return p.canPlayType(e.type)},p.VERSION="0.2.0",u.default.registerTech("Flvjs",p),r.default=p}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1]);
\ No newline at end of file
+/**
+ * @file plugin.js
+ */
+
+import videojs from 'video.js';
+import flvjs from 'flv.js';
+
+const Html5 = videojs.getTech('Html5');
+const mergeOptions = videojs.mergeOptions || videojs.util.mergeOptions;
+const defaults = {
+  mediaDataSource: {},
+  config: {}
+};
+
+class Flvjs extends Html5 {
+
+  /**
+   * Create an instance of this Tech.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param {Component~ReadyCallback} ready
+   *        Callback function to call when the `Flvjs` Tech is ready.
+   */
+   constructor(options, ready) {
+     options = mergeOptions(defaults, options);
+     super(options, ready);
+   }
+
+   /**
+    * A getter/setter for the `Flvjs` Tech's source object.
+    *
+    * @param {Tech~SourceObject} [src]
+    *        The source object you want to set on the `Flvjs` techs.
+    *
+    * @return {Tech~SourceObject|undefined}
+    *         - The current source object when a source is not passed in.
+    *         - undefined when setting
+    */
+  setSrc(src) {
+    if (this.flvPlayer) {
+      // Is this necessary to change source?
+      this.flvPlayer.detachMediaElement();
+      this.flvPlayer.destroy();
+    }
+
+    const mediaDataSource = this.options_.mediaDataSource;
+    const config = this.options_.config;
+
+    mediaDataSource.type = mediaDataSource.type === undefined ? 'flv' : mediaDataSource.type;
+    mediaDataSource.url = src;
+    this.flvPlayer = flvjs.createPlayer(mediaDataSource, config);
+    this.flvPlayer.attachMediaElement(this.el_);
+    this.flvPlayer.load();
+  }
+
+  /**
+   * Dispose of flvjs.
+   */
+  dispose() {
+    if (this.flvPlayer) {
+      this.flvPlayer.detachMediaElement();
+      this.flvPlayer.destroy();
+    }
+    super.dispose();
+  }
+
+}
+
+/**
+ * Check if the Flvjs tech is currently supported.
+ *
+ * @return {boolean}
+ *          - True if the Flvjs tech is supported.
+ *          - False otherwise.
+ */
+Flvjs.isSupported = function() {
+
+  return flvjs && flvjs.isSupported();
+};
+
+/**
+ * Flvjs supported mime types.
+ *
+ * @constant {Object}
+ */
+Flvjs.formats = {
+  'video/flv': 'FLV',
+  'video/x-flv': 'FLV'
+};
+
+/**
+ * Check if the tech can support the given type
+ *
+ * @param {string} type
+ *        The mimetype to check
+ * @return {string} 'probably', 'maybe', or '' (empty string)
+ */
+Flvjs.canPlayType = function(type) {
+  if (Flvjs.isSupported() && type in Flvjs.formats) {
+    return 'maybe';
+  }
+
+  return '';
+};
+
+/**
+ * Check if the tech can support the given source
+ * @param {Object} srcObj
+ *        The source object
+ * @param {Object} options
+ *        The options passed to the tech
+ * @return {string} 'probably', 'maybe', or '' (empty string)
+ */
+Flvjs.canPlaySource = function(srcObj, options) {
+  return Flvjs.canPlayType(srcObj.type);
+};
+
+// Include the version number.
+Flvjs.VERSION = '__VERSION__';
+
+videojs.registerTech('Flvjs', Flvjs);
+
+export default Flvjs;

wj-manage-web/package.json

@@ -35,6 +35,7 @@
     "driver.js": "^0.9.8",
     "element-ui": "^2.15.14",
     "file-saver": "^2.0.5",
+    "flv.js": "^1.6.2",
     "highcharts": "^10.3.3",
     "highcharts-vue": "^1.4.0",
     "js-cookie": "^3.0.0",
@@ -44,6 +45,7 @@
     "protobufjs": "^7.2.3",
     "sortablejs": "^1.13.0",
     "terraformer-wkt-parser": "^1.2.1",
+    "video.js": "^8.6.1",
     "vue": "^2.6.11",
     "vue-clipboard2": "^0.3.1",
     "vue-draggable-resizable": "^2.3.0",

wj-manage-web/public/index.html

@@ -17,7 +17,7 @@
     <link href="/cdn/libs/mapbox-gl/mapbox-gl.css" rel="stylesheet" />
     <link href="/cdn/libs/videojs/video-js.css" rel="stylesheet" />
     <link href="/cdn/libs/threebox/threebox.css" rel="stylesheet" />
-    <link href="/cdn/libs/Cesium/Widgets/widgets.css" rel="stylesheet" />
+    <link href="/cdn/libs/cesium/Widgets/widgets.css" rel="stylesheet" />
     <link
       rel="stylesheet"
       href="/cdn/libs/mapbox-gl-draw/mapbox-gl-draw.css"
@@ -110,12 +110,12 @@
     ></script>
     <script src="/cdn/libs/turf/turf.min.js" type="text/javascript"></script>
     <!-- <script src="/cdn/libs/xgplayer/xgplayer.js" type="text/javascript"></script> -->
-    <script src="/cdn/libs/xgplayer/xgplayer-browser.js" type="text/javascript"></script>
+    <!-- <script src="/cdn/libs/xgplayer/xgplayer-browser.js" type="text/javascript"></script>
     <script src="/cdn/libs/xgplayer/xgplayer-flv.min.js" type="text/javascript"></script>
-    <script src="/cdn/libs/xgplayer/xgplayer-hls.min.js" type="text/javascript"></script>
-    <script src="/cdn/libs/videojs/video.min.js" type="text/javascript"></script>
-    <script src="/cdn/libs/flvjs/flv.min.js" type="text/javascript"></script>
-    <script src="/cdn/libs/videojs-flvjs/videojs-flvjs.min.js" type="text/javascript"></script>
+    <script src="/cdn/libs/xgplayer/xgplayer-hls.min.js" type="text/javascript"></script> -->
+    <!-- <script src="/cdn/libs/videojs/video.min.js" type="text/javascript"></script>
+    <script src="/cdn/libs/flvjs/flv.min.js" type="text/javascript"></script> -->
+    <!-- <script src="/cdn/libs/videojs-flvjs/videojs-flvjs.min.js" type="text/javascript"></script> -->
     <script src="/cdn/libs/cesium/Cesium.js" type="text/javascript"></script>
     <script
       src="/cdn/libs/reconnecting-websocket/reconnecting-websocket.js"

wj-manage-web/src/components/Standard/cameraVideo.vue

@@ -12,28 +12,32 @@
       @canplay="canplay($event)"
       class="videoControl"
       muted
-      :id="vidId"
-      ref="myCameraVideoPlayer"
+      :id="ownVideoData.oid"
     ></video>
-    <!-- <div
-      style="width: 100%; height: 100%"
-      class="videoControl"
-      :id="vidId"
-      ref="myCameraVideoPlayer"
-    ></div> -->
   </div>
 </template>
 
 <script>
+import { equip_camera } from "../../dao/situation";
+import Videojs from "video.js";
+import "./videojs-flvjs-plugin";
 export default {
   name: "cameraVideo",
   props: ["videoData"],
   watch: {},
+  data() {
+    return {
+      cameraLoading: true,
+      supported: false,
+      player: null,
+      interval: null,
+      ownVideoData:{}
+    };
+  },
   methods: {
     canplay() {
-      console.log('canplay',this.videoData);
       this.cameraLoading = false;
-      this.$emit("vidCanplay", this.videoData);
+      this.$emit("vidCanplay", this.ownVideoData);
     },
     loadstart() {},
     loadVideo() {},
@@ -41,124 +45,123 @@ export default {
     handleErr() {},
     pause() {},
     destroy() {
-      // if (this.player) {
-      //   this.player.destroy();
-      // }
-      if(this.player){
-        this.player.pause()
-        this.player.dispose()
-        this.player = null
+      if (this.player) {
+        this.player.dispose();
+        this.player = null;
       }
     },
   },
-  data() {
-    return {
-      cameraLoading: true,
-      supported: false,
-      player: null,
-      interval: null,
-    };
-  },
-  mounted() {
-    // this.$nextTick(() => {
-    //   if (this.videoData) {
-    //     if (this.videoData.functionType == "99") {
-    //       this.player = new HlsPlayer({
-    //         id: this.vidId,
-    //         url: this.videoData.videoUrl,
-    //         isLive: true,
-    //         crossOrigin:true,
-    //         autoplay: true,
-    //         // playsinline: true,
-    //         height: "100%",
-    //         volume: 0,
-    //         width: "100%",
-    //         // controls: false,
-    //         // ignores:['time', 'definition', 'error', 'fullscreen', 'i18n', 'loading', 'mobile', 'pc', 'play', 'poster', 'progress', 'replay', 'volume'],
-    //       });
-    //       this.player.once("complete", () => {
-    //         this.$emit("vidCanplay", this.videoData.videoUrl);
-    //       });
-    //       this.player.on('error',e=>{
-    //         console.error('player error hls',e);
-    //       })
-    //     } else {
-    //       this.player = new FlvPlayer({
-    //         id: this.vidId,
-    //         url: this.videoData.videoUrl,
-    //         autoplay: true,
-    //         isLive: true,
-    //         crossOrigin:true,
-    //         volume: 0,
-    //         // playsinline: true,
-    //         height: "100%",
-    //         // controls: false,
-    //         // ignores:['time', 'definition', 'error', 'fullscreen', 'i18n', 'loading', 'mobile', 'pc', 'play', 'poster', 'progress', 'replay', 'volume'],
-    //         width: "100%",
-    //       });
-    //       this.player.once("complete", () => {
-    //         this.$emit("vidCanplay", this.videoData.videoUrl);
-    //       });
-    //       this.player.on('error',e=>{
-    //         console.error('player error flv',e);
-    //       })
-    //     }
-    //   }
-    // });
 
-    this.player = videojs(this.vidId, {
-      techOrder: ["html5", "flvjs"],
-      flvjs: {
-        mediaDataSource: {
-          cors: true,
-          withCredentials: false,
-        },
-      },
-      controls: true,
-      preload: "none",
-    });
+  mounted() {
+    this.ownVideoData = this.videoData
     // m3u8
-    if (this.videoData && this.videoData.functionType == "99") {
+    if (this.ownVideoData && this.ownVideoData.functionType == "99") {
       setTimeout(() => {
-        console.log('player',this.player);
-        this.player.src({
-          src: this.videoData.videoUrl,
-          type: "application/x-mpegURL",
+        // hls
+        this.player = Videojs(document.getElementById(this.ownVideoData.oid), {
+          autoplay: "muted", //自动播放
+          controls: true, //用户可以与之交互的控件
+          loop: true, //视频一结束就重新开始
+          fill: true,
+          techOrder: ["html5", "flvjs"], // 兼容顺序
+          html5: {
+            hls: {
+              withCredentials: true,
+            },
+          },
+          sources: [
+            {
+              src: `${this.ownVideoData.videoUrl}`,
+              // src:'http://112.113.230.26:83/openUrl/eRqwh35/live.m3u8',
+              type: "application/x-mpegURL",
+            },
+          ],
+        });
+        this.player.on("playing", () => {
+          this.canplay();
+        });
+        this.player.on("error", (e) => {
+          console.log("hls error", e);
+          equip_camera().then((res) => {
+            let allCameras = res.content;
+            let targetCamera = allCameras.find((camera) => {
+              return camera.oid == this.ownVideoData.oid;
+            });
+            // this.destroy();
+            this.player.pause();
+            // this.player = null;
+            this.ownVideoData = targetCamera;
+            setTimeout(() => {
+              // this.player = Videojs(document.getElementById(this.ownVideoData.oid), {
+              //   autoplay: "muted", //自动播放
+              //   controls: true, //用户可以与之交互的控件
+              //   loop: true, //视频一结束就重新开始
+              //   fill: true,
+              //   techOrder: ["html5", "flvjs"], // 兼容顺序
+              //   html5: {
+              //     hls: {
+              //       withCredentials: true,
+              //     },
+              //   },
+              //   sources: [
+              //     {
+              //       src: targetCamera.videoUrl,
+              //       type: "application/x-mpegURL",
+              //     },
+              //   ],
+              // });
+              this.player.src([
+                {
+                  src: targetCamera.videoUrl,
+                  type: "application/x-mpegURL",
+                },
+              ]);
+              this.player.on("playing", () => {
+                this.canplay();
+              });
+            }, 100);
+          });
         });
-        this.player.load(this.videoData.videoUrl);
-        this.player.play();
       }, 0);
     }
     // flv
     else {
       setTimeout(() => {
-        console.log('player',this.player);
-        this.player.src({
-          src: this.videoData.videoUrl,
-          // type: "video/x-flv",
+        //flv
+        this.player = Videojs(document.getElementById(this.ownVideoData.oid), {
+          autoplay: "muted", //自动播放
+          controls: true, //用户可以与之交互的控件
+          loop: true, //视频一结束就重新开始4
+          fill: true,
+          techOrder: ["html5", "flvjs"], // 兼容顺序
+          flvjs: {
+            mediaDataSource: {
+              isLive: false,
+              cors: true,
+              withCredentials: false,
+            },
+          },
+          sources: [{ src: this.ownVideoData.videoUrl, type: "video/x-flv" }],
+        });
+        this.player.on("playing", () => {
+          this.canplay();
         });
-        this.player.load(this.videoData.videoUrl);
-        this.player.play();
       }, 0);
     }
   },
   computed: {
-    vidId() {
-      return this.videoData.videoUrl
-        .replaceAll("/", "_")
-        .replaceAll(".", "_")
-        .replaceAll("?", "_")
-        .replaceAll("=", "_")
-        .replaceAll("&", "_")
-        .replaceAll(":", "_");
-    },
   },
   beforeDestroy() {
     this.destroy();
   },
 };
 </script>
-
+<style>
+video {
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>
 <style lang="less" scoped>
 .loading-mask {
   border-radius: 4px;
@@ -174,17 +177,10 @@ export default {
 }
 
 .cameraVideo {
-  // position: relative;
-
   .videoControl {
-    // display: none;
-    // position: absolute;
-    height: 100%;
     width: 100%;
+    height: 100%;
   }
-  // .vIsVisible {
-  //   display: unset;
-  // }
 }
 
 ::v-deep .el-icon-loading {

wj-manage-web/src/components/Standard/videojs-flvjs-plugin.js

+/**
+ * @file plugin.js
+ */
+
+import videojs from 'video.js';
+import flvjs from 'flv.js';
+
+const Html5 = videojs.getTech('Html5');
+const mergeOptions = videojs.mergeOptions || videojs.util.mergeOptions;
+const defaults = {
+  mediaDataSource: {},
+  config: {}
+};
+
+class Flvjs extends Html5 {
+
+  /**
+   * Create an instance of this Tech.
+   *
+   * @param {Object} [options]
+   *        The key/value store of player options.
+   *
+   * @param {Component~ReadyCallback} ready
+   *        Callback function to call when the `Flvjs` Tech is ready.
+   */
+   constructor(options, ready) {
+     options = mergeOptions(defaults, options);
+     super(options, ready);
+   }
+
+   /**
+    * A getter/setter for the `Flvjs` Tech's source object.
+    *
+    * @param {Tech~SourceObject} [src]
+    *        The source object you want to set on the `Flvjs` techs.
+    *
+    * @return {Tech~SourceObject|undefined}
+    *         - The current source object when a source is not passed in.
+    *         - undefined when setting
+    */
+  setSrc(src) {
+    if (this.flvPlayer) {
+      // Is this necessary to change source?
+      this.flvPlayer.detachMediaElement();
+      this.flvPlayer.destroy();
+    }
+
+    const mediaDataSource = this.options_.mediaDataSource;
+    const config = this.options_.config;
+
+    mediaDataSource.type = mediaDataSource.type === undefined ? 'flv' : mediaDataSource.type;
+    mediaDataSource.url = src;
+    this.flvPlayer = flvjs.createPlayer(mediaDataSource, config);
+    this.flvPlayer.attachMediaElement(this.el_);
+    this.flvPlayer.load();
+  }
+
+  /**
+   * Dispose of flvjs.
+   */
+  dispose() {
+    if (this.flvPlayer) {
+      this.flvPlayer.detachMediaElement();
+      this.flvPlayer.destroy();
+    }
+    super.dispose();
+  }
+
+}
+
+/**
+ * Check if the Flvjs tech is currently supported.
+ *
+ * @return {boolean}
+ *          - True if the Flvjs tech is supported.
+ *          - False otherwise.
+ */
+Flvjs.isSupported = function() {
+
+  return flvjs && flvjs.isSupported();
+};
+
+/**
+ * Flvjs supported mime types.
+ *
+ * @constant {Object}
+ */
+Flvjs.formats = {
+  'video/flv': 'FLV',
+  'video/x-flv': 'FLV'
+};
+
+/**
+ * Check if the tech can support the given type
+ *
+ * @param {string} type
+ *        The mimetype to check
+ * @return {string} 'probably', 'maybe', or '' (empty string)
+ */
+Flvjs.canPlayType = function(type) {
+  if (Flvjs.isSupported() && type in Flvjs.formats) {
+    return 'maybe';
+  }
+
+  return '';
+};
+
+/**
+ * Check if the tech can support the given source
+ * @param {Object} srcObj
+ *        The source object
+ * @param {Object} options
+ *        The options passed to the tech
+ * @return {string} 'probably', 'maybe', or '' (empty string)
+ */
+Flvjs.canPlaySource = function(srcObj, options) {
+  return Flvjs.canPlayType(srcObj.type);
+};
+
+// Include the version number.
+Flvjs.VERSION = '__VERSION__';
+
+videojs.registerTech('Flvjs', Flvjs);
+
+export default Flvjs;

wj-manage-web/src/views/safety/bottomCameras.vue

@@ -9,9 +9,9 @@
         </div>
         <div
           class="video"
-          :id="`${item}holo`"
-          v-for="(item,index) of list"
-          :key="index"
+          :id="`safety${item.oid}`"
+          v-for="item of list"
+          :key="item.videoUrl"
           v-show="false"
         >
           <div class="video_inner">
@@ -20,7 +20,6 @@
               @vidCanplay="vidCanplay"
               class="videoContainer"
               :videoData="item"
-              :auto-play="true"
             />
           </div>
         </div>
@@ -29,7 +28,7 @@
         <div
           class="video"
           :id="`historyVideo${item}`"
-          v-for="(item,index) of channels"
+          v-for="(item, index) of channels"
           v-show="false"
           :key="index"
         >
@@ -66,7 +65,7 @@ export default {
   },
   computed: {},
   watch: {
-    cameraList(e) {
+    cameraListData(e) {
       this.destroyAll();
       this.list = [];
       setTimeout(() => {
@@ -83,7 +82,7 @@ export default {
   },
 
   props: {
-    cameraList: {
+    cameraListData: {
       type: Array,
       default: () => {
         return [];
@@ -112,8 +111,17 @@ export default {
     },
   },
   methods: {
+    vidId(videoUrl) {
+      return videoUrl
+        .replaceAll("/", "_")
+        .replaceAll(".", "_")
+        .replaceAll("?", "_")
+        .replaceAll("=", "_")
+        .replaceAll("&", "_")
+        .replaceAll(":", "_");
+    },
     vidCanplay(item) {
-      document.getElementById(`${item}holo`).style.display = "unset";
+      document.getElementById(`safety${item.oid}`).style.display = "unset";
     },
     destroyAll() {
       if (this.$refs.videoContainerRef) {

wj-manage-web/src/views/safety/index.vue

@@ -5,10 +5,6 @@
     </div>
     <div
       class="right_tabs"
-      v-loading="rightLoading"
-      element-loading-text="数据加载中.."
-      element-loading-spinner="el-icon-loarefreshChartding"
-      element-loading-background="rgba(0, 0, 0, 0.8)"
     >
       <div class="tabs_top">
         <div class="top_title">{{ crossName }}</div>
@@ -118,7 +114,7 @@
       </div>
       <bottom-cameras
         :vidType="cameraType"
-        :cameraList="cameraList"
+        :cameraListData="cameraList"
         :cameraChannels="cameraChannels"
         :cameraTimeBetween="cameraTimeBetween"
       ></bottom-cameras>
@@ -161,7 +157,6 @@ export default {
       down: require("../../assets/images/efficiency/down.png"),
       currentCrossData: {},
       compareCrossData: {},
-      rightLoading: false,
       tabsActiveName: "1",
       cameraChannels: [],
       cameraTimeBetween: {},
@@ -254,19 +249,16 @@ export default {
       });
     },
     // 选择不同路口 => 更新右侧所有数据
-    crossChange(row) {
+    crossChange(row, cameras) {
       console.log("row", row);
       this.$refs.pathMap.locate(row.location.split(","));
       this.clearPath();
       this.currentCrossData = row;
       this.$refs[`comp${this.tabsActiveName}`].initData();
-      if (Array.isArray(row.cameraList)) {
-        this.cameraList = row.cameraList;
-      } else {
-        this.cameraList = JSON.parse(row.cameraList);
-      }
+      this.cameraList = cameras.filter(camera=>{
+        return camera.crossId == row.crossId
+      })
       this.cameraType = "online";
-      // this.rightLoading = true;
       // 请求路口安全系数 和 安全评价等级 变化
       safetyCompare({ crossId: this.currentCrossData.crossId }).then((res) => {
         this.compareCrossData = res.content;

wj-manage-web/src/views/safety/leftMap.vue

@@ -84,6 +84,9 @@ import {
   addOrUpdateCross,
   addOrUpdateCrossName,
 } from "../../utils/mapboxTools";
+import {
+  equip_camera,
+} from "../../dao/situation";
 
 let map;
 export default {
@@ -139,7 +142,7 @@ export default {
             ).cameraList;
           }
           console.log("safetyRank", res.content);
-          this.fullData = res.content.slice(0,3);
+          this.fullData = res.content.slice(0, 3);
           this.tableData = this.fullData;
           this.tableLoading = false;
           // 选中第一条数据， 并请求右侧所有指标
@@ -151,10 +154,13 @@ export default {
           addOrUpdateCross(map, geo, this.crossClick);
           addOrUpdateCrossName(map, geo);
           if (res.content.length) {
-            this.$emit("crossChange", res.content[0]);
-            map.flyTo({
-              center: res.content[0].location.split(","),
-              zoom: 15,
+            equip_camera().then((camera) => {
+              let cameras = camera.content;
+              this.$emit("crossChange", res.content[0], cameras);
+              map.flyTo({
+                center: res.content[0].location.split(","),
+                zoom: 15,
+              });
             });
           }
         });
@@ -233,7 +239,7 @@ export default {
 };
 </script>
 
-<style lang='less' scoped>
+<style lang="less" scoped>
 @import url("../../assets/less/elementTable.less");
 .leftMapSafe {
   height: 100%;
@@ -329,4 +335,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>

wj-manage-web/src/views/situation/floatData/videoList - 副本 (3).vue

+<template>
+  <div
+    v-show="vdrList && vdrList.length"
+    class="videoList"
+    :style="`width:${
+      vdrList.length * (178 + 5) + 15
+    }px;height:120px;padding-left:10px`"
+  >
+    <vue-draggable-resizable
+      :disable-user-select="false"
+      :parent="false"
+      :w="item.w"
+      :h="item.h"
+      :id="item.monitorChannel"
+      v-show="false"
+      v-for="item of vdrList"
+      :x="item.x"
+      :y="item.y"
+      :resizable="item.active"
+      :draggable="item.active"
+      :key="item.monitorChannel"
+    >
+      <div
+        class="closeButton el-icon-close"
+        @click="deleteVideo(item.videoUrl)"
+      ></div>
+      <div
+        v-show="!item.active"
+        class="expandIcon el-icon-arrow-up"
+        @click="activeDiv(item.videoUrl)"
+      ></div>
+      <div
+        v-show="item.active"
+        class="expandIcon el-icon-arrow-down"
+        @click="disActiveDiv(item.videoUrl)"
+      ></div>
+      <camera-video
+        @vidCanplay="vidCanplay"
+        :ref="`videoContainer`"
+        class="videoContainer"
+        :videoData="item"
+      />
+    </vue-draggable-resizable>
+  </div>
+</template>
+
+<script>
+import CameraVideo from "../../../components/Standard/cameraVideo.vue";
+
+export default {
+  components: {
+    CameraVideo,
+  },
+  name: "videoList",
+  props: ["showCameras"],
+  data() {
+    return {
+      vdrList: [],
+    };
+  },
+  mounted() {
+    this.vdrList = [];
+    for (let i = 0; i < this.showCameras.length; i++) {
+      this.vdrList.push({
+        ...this.showCameras[i],
+        w: 178,
+        h: 100,
+        x: i * (178 + 5),
+        y: 10,
+        active: false,
+      });
+    }
+  },
+  methods: {
+    vidCanplay(item) {
+      // console.log('canplay..',item);
+      // this.vdrList.push({
+      //   ...item,
+      //   w: 178,
+      //   h: 100,
+      //   x: this.vdrList.length * (178 + 5),
+      //   y: 10,
+      //   active: false,
+      // });
+      // this.$forceUpdate();
+    },
+    activeDiv(url) {
+      for (let item of this.vdrList) {
+        if (item.videoUrl === url) {
+          item.active = true;
+          item.w = 600;
+          item.h = 336;
+          item.y = -500;
+          item.x = -200;
+        }
+      }
+      this.$forceUpdate();
+    },
+    disActiveDiv(url) {
+      for (let i = 0; i < this.vdrList.length; i++) {
+        if (this.vdrList[i].videoUrl === url) {
+          this.vdrList[i].active = false;
+          this.vdrList[i].w = 178;
+          this.vdrList[i].h = 100;
+          this.vdrList[i].x = (178 + 5) * i;
+          this.vdrList[i].y = 10;
+        }
+      }
+      this.$forceUpdate();
+    },
+    deleteVideo(videoUrl) {
+      for (let container of this.$refs.videoContainer) {
+        if (container.videoData.videoUrl === videoUrl) {
+          container.destroy();
+        }
+      }
+      for (let i = 0; i < this.vdrList.length; i++) {
+        if (this.vdrList[i].videoUrl == videoUrl) {
+          this.vdrList.splice(i,1)
+          i = i-1
+        }
+      }
+      // this.$emit("delVideo", videoUrl);
+    },
+  },
+  computed: {},
+  watch: {},
+  beforeDestroy() {},
+};
+</script>
+
+<style lang="less" scoped>
+::v-deep .el-icon-close:before {
+  color: white;
+}
+
+.videoList {
+  position: absolute;
+  bottom: 12px;
+  z-index: 13;
+  border: 1px solid rgba(83, 146, 189, 1);
+  background: rgba(10, 26, 41, 0.9);
+  border-radius: 6px;
+  left: 50%;
+  display: flex;
+  flex-wrap: nowrap;
+  transform: translateX(-50%);
+  overflow: visible;
+  .closeButton {
+    position: absolute;
+    right: 12px;
+    top: 10px;
+    border-radius: 50%;
+    height: 18px;
+    width: 18px;
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    background-color: rgba(1, 158, 249, 0.7);
+  }
+
+  .closeButton:hover {
+    background-color: rgba(1, 158, 249, 1);
+  }
+  .videoItem {
+    width: 230px;
+    margin: 0 5px;
+    aspect-ratio: 16/9;
+    position: relative;
+  }
+  .videoContainer {
+    height: 100%;
+    width: 100%;
+  }
+  .expandIcon {
+    color: #019ef9;
+    font-size: 16px;
+    cursor: pointer;
+    position: absolute;
+    left: 12px;
+    top: 10px;
+    z-index: 11;
+  }
+}
+</style>

wj-manage-web/src/views/situation/floatData/videoList.vue

 <template>
   <div class="videoList" id="situation-video-list" v-show="showVideos">
-    <div class="videoListBorder" v-show="readyVideos.length">
+    <div class="videoListBorder">
       <div
         class="borderItem"
-        style="display:none"
         v-for="item of showCameras"
+        v-show="false"
         :key="item.videoUrl"
-        :id="item.monitorChannel"
+        :id="`border${item.oid}`"
       ></div>
     </div>
     <div
       class="videoItem"
-      style="display:none"
       v-for="item of showCameras"
+      v-show="false"
       :key="item.videoUrl"
-      :id="`div${item.monitorChannel}`"
+      :id="`situation${item.oid}`"
     >
       <div
         class="closeButton el-icon-close"
@@ -53,7 +53,6 @@ export default {
   data() {
     return {
       videoShow: {},
-      readyVideos :[],
       scalesControl: {},
       dragControl: {},
       scale: 1,
@@ -65,55 +64,62 @@ export default {
   },
   mounted() {},
   methods: {
+    vidId(item) {
+      return (
+        item.videoUrl
+          .replaceAll("/", "_")
+          .replaceAll(".", "_")
+          .replaceAll("?", "_")
+          .replaceAll("=", "_")
+          .replaceAll("&", "_")
+          .replaceAll(":", "_") + "vid"
+      );
+    },
     getChannel(item) {
       let array = item.split("=");
       return array[array.length - 1];
     },
-    // showVideoItem(item) {
-    //   // return true;
-    //   return this.videoShow[item.monitorChannel];
-    // },
     vidCanplay(item) {
-      document.getElementById(`div${item.monitorChannel}`).style.display = 'unset'
-      document.getElementById(`${item.monitorChannel}`).style.display = 'unset'
-      this.readyVideos.push(1)
-      // this.videoShow[item.monitorChannel] = true;
+      document.getElementById(`border${item.oid}`).style.display =
+        "unset";
+      document.getElementById(`situation${item.oid}`).style.display = "unset";
     },
     getUpShow(item) {
-      return this.currentUp != item.monitorChannel && this.currentUp == "";
+      return this.currentUp != `situation${item.oid}` && this.currentUp == "";
     },
     getDelShow(item) {
       return (
-        this.currentUp == item.monitorChannel ||
-        (this.currentUp != item.monitorChannel && this.currentUp == "")
+        this.currentUp == `situation${item.oid}` ||
+        (this.currentUp != `situation${item.oid}` && this.currentUp == "")
       );
     },
     getDownShow(item) {
-      return this.currentUp == item.monitorChannel;
+      return this.currentUp == `situation${item.oid}`
     },
     arrowUp(item) {
       console.log("item", item);
-      this.$emit("updateCamera", item.monitorChannel);
-      this.currentUp = item.monitorChannel;
+      this.$emit("updateCamera", item.oid);
+      this.currentUp = `situation${item.oid}`;
       this.scale = 2;
-      let el = document.getElementById(`div${item.monitorChannel}`);
+      let el = document.getElementById(`situation${item.oid}`);
       this.currentEl = el;
       let left = document
         .getElementById(`situation-video-list`)
         .getBoundingClientRect().left;
       el.style.position = "absolute";
+      el.style.height = "140px";
       el.style.left = `${190 - left}px`;
       el.style.top = "-550px";
       el.style.border = "1px solid #5392bd";
       el.style.borderRadius = "6px";
       el.style.transform = `scale(${this.scale})`;
       el.addEventListener("wheel", this.wheelListener);
-      this.scalesControl[item.monitorChannel] = true;
+      this.scalesControl[`situation${item.oid}`] = true;
       el.addEventListener("mousedown", this.dragListener);
-      this.dragControl[item.monitorChannel] = true;
+      this.dragControl[`situation${item.oid}`] = true;
     },
     arrowDown(item) {
-      if (this.currentUp == item.monitorChannel) {
+      if (this.currentUp == `situation${item.oid}`) {
         this.$emit("resetCamera");
       }
       this.currentUp = "";
@@ -122,14 +128,15 @@ export default {
       this.currentEl.style.left = "unset";
       this.currentEl.style.top = "unset";
       this.currentEl.style.border = "none";
+      this.currentEl.style.height = "100%";
       this.currentEl.style.position = "relative";
       //如果当前为 resizable 状态 则 removeEventListener
-      if (this.scalesControl[item.monitorChannel]) {
+      if (this.scalesControl[`situation${item.oid}`]) {
         this.currentEl.removeEventListener("wheel", this.wheelListener);
-        this.scalesControl[item.monitorChannel] = false;
+        this.scalesControl[`situation${item.oid}`] = false;
       }
       // 如果当前为 draggable 状态 则 removeEventListener
-      if (this.dragControl[item.monitorChannel]) {
+      if (this.dragControl[`situation${item.oid}`]) {
         this.currentEl.removeEventListener("mousedown", this.dragListener);
       }
     },
@@ -166,18 +173,17 @@ export default {
       }
     },
     deleteVideo(item) {
-      if (this.currentUp == item.monitorChannel) {
+      if (this.currentUp == `situation${item.oid}`) {
         this.$emit("resetCamera");
       }
       setTimeout(() => {
         for (let container of this.$refs.videoContainer) {
-          console.log(container.videoData,item);
+          console.log(container.videoData, item);
           if (container.videoData.videoUrl === item.videoUrl) {
             container.destroy();
           }
         }
         this.currentUp = "";
-        this.readyVideos.pop()
         this.$emit("delVideo", item.videoUrl);
       }, 0);
     },
@@ -221,7 +227,7 @@ export default {
 ::v-deep .el-icon-close:before {
   color: white;
 }
-::v-deep .vjs-modal-dialog-content{
+::v-deep .vjs-modal-dialog-content {
   display: none;
 }
 
@@ -230,19 +236,21 @@ export default {
   padding: 2px 5px;
   bottom: 12px;
   width: 80%;
+  max-height: 140px;
   z-index: 13;
   border-radius: 6px;
   left: 50%;
   display: flex;
   justify-content: center;
+  align-items: center;
   flex-wrap: nowrap;
   transform: translateX(-50%);
   font-size: 14px;
-  
+
   .videoListBorder {
+    padding: 0 5px;
     border: 1px solid rgba(83, 146, 189, 1);
-    background-color: #142c42;
-      // border-radius: 6px;
+    background-color: rgba(20, 44, 66, 0.7);
     border-radius: 6px;
     position: absolute;
     left: 50%;
@@ -252,19 +260,18 @@ export default {
     display: flex;
     max-width: 100%;
     .borderItem {
-      
-      width: 230px;
+      height: 100%;
       padding: 0 5px;
-      aspect-ratio: 180/106;
+      aspect-ratio: 16/9;
       position: relative;
     }
   }
   .videoItem {
-    width: 230px;
+    height: 100%;
     padding: 0 5px;
-    aspect-ratio: 180/106;
+    max-height: 140px;
+    aspect-ratio: 16/9;
     position: relative;
-
     .videoContainer {
       height: 100%;
       width: 100%;

wj-manage-web/src/views/situation/index.vue

@@ -358,6 +358,7 @@ export default {
 
     // 路口点击 - zoomin - 展示视频流
     firstCrossClick(e) {
+      this.showCameras = []
       // console.log("e", e);
       let prop = e.features[0]?.properties;
       if (prop) {
@@ -411,9 +412,9 @@ export default {
       let mid2 = [mapBounds._ne.lng, mapBounds._sw.lat];
       this.bounds = [[leftDownXy, mid1, rightUpXy, mid2, leftDownXy]];
     },
-    updateCameraCPB(monitorChannel) {
+    updateCameraCPB(oid) {
       let cameraItem = this.cameraData.find((item) => {
-        return item.monitorChannel == monitorChannel;
+        return item.oid == oid;
       });
       if (cameraItem && map) {
         this.cLocation = cameraItem.wkt.split(",");
@@ -1153,12 +1154,14 @@ export default {
       let features = [];
       for (let item of json) {
         if (item.wkt) {
-          features.push(
-            turf.point(
-              item.wkt.split(",").map((item) => Number(item)),
-              item
-            )
-          );
+          if (item.wkt.split(",").length == 2) {
+            features.push(
+              turf.point(
+                item.wkt.split(",").map((item) => Number(item)),
+                item
+              )
+            );
+          }
         }
       }
       return turf.featureCollection(features);
@@ -1891,7 +1894,7 @@ export default {
   }
 
   .mapboxgl-ctrl-icon {
-    filter: drop-shadow(#cccccc 10000px 0) !important;
+    // filter: drop-shadow(#cccccc 10000px 0) !important;
   }
 
   .mapboxgl-ctrl-group:not(:empty) {

wj-manage-web/src/views/situation/mapPopup/equipmentPopup.vue

@@ -13,19 +13,14 @@
         
         <camera-video
           ref="cameraVideo"
-          :auto-play="true"
           style="height: 100%; width: 100%"
-          :video-data="model.videoUrl"
+          :videoData="model"
         />
-        <!--        <local-camera1 style="height: 100%; width: 100%" :border="false" :showClose="false" v-if="videoURL" ref="videoItem"-->
-        <!--                       class="videoItem" :video-data="videoURL"/>-->
       </div>
     </div>
     <div v-if="model.equip_type === 'weather'"
       class="equip_weather full-h full-w"
     >
-      <!--        <div v-if="false" class="equip_weather full-h full-w">-->
-      <!--        <div class="equip_weather full-h full-w">-->
       <div class="e_header">气象检测仪</div>
       <div class="e_main">
         <div class="left-image">