fix: 机库清流无法观看

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/player/components/player/components/qingliu/index.vue

 <template>
-  <div class="qingliu" id="qinglliu" ref="qingliu">
-    <div :id="'qingliu_' + name" class="qingcanvas" ref="qingcanvas">
-    </div>
+  <div class="qingliu">
+    <div ref="player_area"></div>
   </div>
 </template>
 
 <script>
+import {
+  dataURLToBlob,
+  canvasToDataURL,
+} from "../../../../../../../../../../../../utils/image-tool";
 
 export default {
   name: "QingLiuPlayer",
   props: {
-    url: {
-      type: String,
-      default: ''
-    }
+    data: Object,
+    raw_msg: Number,
+    infoflag: Boolean,
   },
   data() {
     return {
       name: "QingLiuPlayer" + Date.now(),
     };
   },
-  watch: {
+  created() {
+    window.addEventListener("message", this.onDebugInfo);
   },
-  created() {},
   mounted() {
+    console.log(this.raw_msg, "raw_msg");
     this.init();
   },
   beforeDestroy() {
-    window.kbt_player_destroy("qingliu_" + this.name);
-    window.removeEventListener("resize", this.handResize);
+    window.kbt_player_destroy(this.name);
+    window.removeEventListener("message", this.onDebugInfo);
   },
   methods: {
     /**
      * 初始化
      */
     init() {
-      // 新
-      window.kbt_sdk_load(this.url, "qingliu_" + this.name);
-
-      // 监听窗口大小变化事件
-      window.addEventListener("resize", this.handResize);
-      /* var canvas_qinliu = document.getElementById("qingliu_" + this.name);
-      var resizeObserver = new ResizeObserver((e) => {
-        for (let i of e) {
-          window.kbt_player_resize("qingliu_" + this.name);
-        }
+      window.kbt_sdk_load().then(() => {
+        let parentObj = this.$refs.player_area;
+        window.kbt_player_create(
+          this.name,
+          this.data.vUrl,
+          970,
+          545,
+          parentObj
+        );
       });
-      resizeObserver.observe(canvas_qinliu); */
     },
-    handResize() {
-      // 获取 Canvas 元素
-      var canvas_qinliu = document.getElementById("qingliu_" + this.name);
-      // 获取 Canvas 的初始宽度和高度
-      var initialWidth = canvas_qinliu.width;
-      var initialHeight = canvas_qinliu.height;
-      // 获取当前 Canvas 的宽度和高度
-      var currentWidth = canvas_qinliu.clientWidth;
-      var currentHeight = canvas_qinliu.clientHeight;
-      // 检查 Canvas 的大小是否发生变化
-      if (currentWidth !== initialWidth || currentHeight !== initialHeight) {
-        // 执行适应新尺寸的操作
-        window.kbt_player_resize("qingliu_" + this.name);
-      }
+    screenShot() {
+      var canvas = document.querySelector("#sdk_canvas_" + this.name);
+      const image = canvasToDataURL(canvas);
+      let blob = dataURLToBlob(image);
+      return blob;
+    },
+    fullScreen() {
+      // var canvas = document.querySelector("#sdk_canvas_" + this.name);
+      var canvas = this.$refs.player_area.querySelector("canvas");
+      canvas && canvas.requestFullscreen();
     },
-    fullScreen(flag) {
-      if (flag) {
-        let dom = document.querySelector("#qingliu_" + this.name);
-        dom.requestFullscreen();
-      } else {
-        document.exitFullscreen();
+    onDebugInfo(e) {
+      switch (e.type) {
+        case "qoeinfo":
+        case "raw_msg":
+          this.$emit("debugInfo", e);
+          break;
       }
     },
   },
 };
 </script>
 
-<style scoped lang="scss">
-.qingliu ::v-deep {
+<style scoped lang='scss'>
+.qingliu {
   width: 100%;
-  height: 200px;
-  .qingcanvas {
+  height: 100%;
+  .player_area {
     width: 100%;
     height: 100%;
   }
-
-  canvas {
+  .cf {
+    position: fixed;
+    top: 0;
+    left: 0;
+    padding: 10px;
+    color: #fff;
+    background: rgba($color: #000000, $alpha: 0.6);
+  }
+  canvas::v-deep {
     width: 100% !important;
   }
 }
-</style>
+</style>
\ No newline at end of file

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/player/components/player/index.vue

@@ -9,7 +9,7 @@
         <span class="label">{{ label }}</span>
         <!-- <div class="el-icon-close close" @click="close"></div> -->
       </div>
-      <components :is="playerCom" ref="player" :url="url" :className="'fkLivePlayer'" v-if="showPlayer" />
+      <components :is="playerCom" ref="player" :url="url" v-if="showPlayer" />
       <div class="iconfont icon-gengxin video-reset" v-hover @click="reset"></div>
       <slot></slot>
     </div>

src/components/MMCFlightControlCenter/components/hangar/components/controlPanel/components/controlLeft/components/player/uav/index.vue

 <template>
   <div>
-    <Player ref="player" @close="$emit('close')" :url="selectUrl" :name="name" :label="label" />
+    <Player ref="player" @close="$emit('close')" :url="selectUrl" :name="name" :label="label" style="height: 200px;" />
     <el-select v-model="selectUrl" class="select" popper-class="mmc">
       <el-option
         v-for="item in streamOptions"