fix: 飞控中心修正不支持srs播放, 修正清流信息不显示

src/components/MMCFlightControlCenter/components/uavApplications/components/player/components/livenvr/index.vue

@@ -5,10 +5,10 @@
       :dblclick-fullscreen="false"
       aspect="fulllscreen"
       :class="{
-        small: !videoFlag,
-        'livenvr-player': videoFlag,
-        vUrl: isStatus && !videoFlag,
-        vUrlDeffault: !isStatus && !videoFlag,
+        small: !smallFPV,
+        'livenvr-player': smallFPV,
+        vUrl: isStatus && !smallFPV,
+        vUrlDeffault: !isStatus && !smallFPV,
       }"
       ref="livePlayer"
       :videoUrl="data.vUrl"
@@ -20,8 +20,8 @@
       :class="{
         vUrl: isStatus,
         vUrlDeffault: !isStatus,
-        small: videoFlag,
-        'livenvr-player': !videoFlag,
+        small: smallFPV,
+        'livenvr-player': !smallFPV,
       }"
       ref="fpvPlayer"
       :controls="false"
@@ -53,7 +53,7 @@ export default {
     },
     className: String,
 
-    videoFlag: {
+    smallFPV: {
       type: Boolean,
       default: () => true,
     },

src/components/MMCFlightControlCenter/components/uavApplications/components/player/components/qingliu/index.vue

@@ -144,24 +144,6 @@ export default {
     this.classNames = this.className;
     if (this.data.type) {
     }
-    //鹰巢视频大小判断
-    console.log(
-      this.$store.state.mapmanage.mapisStatus,
-      "this.$store.state.mapmanage.mapisStatus"
-    );
-    if (
-      this.$store.state.mapmanage.mapisStatus.flag &&
-      this.$store.state.mapmanage.mapisStatus.type == "yc" &&
-      this.$store.state.mapmanage.mapisStatus.num == 0
-    ) {
-      this.classNames = this.className + " ycqingliumap";
-    }
-    if (
-      this.$store.state.mapmanage.mapisStatus.flag &&
-      this.$store.state.mapmanage.mapisStatus.type == "wrj"
-    ) {
-      this.classNames = this.className + " qingliumap";
-    }
 
     this.getFontSize();
     if (this.device.customName) {

src/components/MMCFlightControlCenter/components/uavApplications/components/player/components/srs/index.vue

 <template>
   <div class="cpt-player-webrtc">
-    <video id="rtc_media_player"
-           ref="webrtc"
-           controls
-           autoplay></video>
-    <!-- <div class="cutImg" id="cutImage">
-      <span class="closeImg">X</span>
-    </div> -->
+    <video id="rtc_media_player" ref="webrtc" controls autoplay></video>
   </div>
 </template>
 
 <script>
-let sdk = null;
-// import Qs from "qs";
+import $ from "./jquery-1.10.2.min";
+import {
+  SrsRtcPublisherAsync,
+  SrsRtcPlayerAsync,
+  SrsRtcFormatSenders,
+} from "./srs.sdk";
+
+window.$ = $;
 
 export default {
   props: {
@@ -21,144 +21,74 @@ export default {
       default: () => ({}),
     },
   },
-  data () {
+  data() {
     return {
-      curr_data: {
-        vUrl: null
-      },
-      flight_info: null,
+      sdk: null,
     };
   },
-  mounted () {
-    this.curr_data = {}
-    let self = this;
-    self.$bus.$on("takePhotos", (flight_info) => {
-      self.flight_info = flight_info();
-      self.screenShot(self.flight_info);
-    });
+  watch: {
+    data: {
+      handler(value) {
+        this.$nextTick(() => {
+          this.init();
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  beforeDestroy() {
+    this.sdk.close();
   },
-
   methods: {
-    init () {
+    pause() {
       if (this.$refs["webrtc"]) {
-        if(!this.data?.vUrl){
-          return;
-        }
-        // if (sdk) {
-        //   sdk.close();
-        // }
-        // sdk = new SrsRtcPlayerAsync();
-        // this.$refs["webrtc"].srcObject = sdk.stream;
-        // sdk.play(curr_data.vUrl);
-
-        if (sdk) {
-          sdk.close();
+        this.$refs["webrtc"].pause();
+      }
+    },
+    play() {
+      if (this.$refs["webrtc"]) {
+        this.$refs["webrtc"].play();
+      }
+    },
+    init() {
+      let _this = this;
+      if (this.$refs["webrtc"]) {
+        if (this.sdk) {
+          this.sdk.close();
         }
-        sdk = new SrsRtcPlayerAsync();
-        // $('#rtc_media_player').prop('srcObject', sdk.stream);
-        // console.log("sdk...", sdk)
-        this.$refs["webrtc"].srcObject = sdk.stream;
-        // curr_data.vUrl = "rtmp://121.43.58.140/live/";
-        // 'webrtc://srs.mmcuav.cn/live/xxxxxxxxxxxxxxx' // 测试地址，需使用推流工具推流
-        // console.log("curr_data.vUrl:", curr_data.vUrl);
-        let self = this
-        sdk
+        this.sdk = new SrsRtcPlayerAsync();
+        this.$refs["webrtc"].srcObject = this.sdk.stream;
+        this.sdk
           .play(this.data.vUrl)
-          .then(function (session) {
-            console.log(session);
-            /* if (session) {
-              self.$bus.$emit("handleVideoState")
-            } */
-          })
+          .then(function (session) {})
           .catch(function (reason) {
-            console.log('err reason', reason)
-            sdk.close();
-            console.error(reason);
-          });
-      }
-    },
-    async screenShot (data) {
-      // console.log("screenShot:", data);
-      var player = document.getElementById("rtc_media_player"); //获取video的Dom节点
-      player.setAttribute("crossOrigin", "anonymous"); //添加srossOrigin属性，解决跨域问题
-      var canvas = document.createElement("canvas");
-      // var img = document.createElement("img");
-      canvas.width = player.clientWidth;
-      canvas.height = player.clientHeight;
-      canvas
-        .getContext("2d")
-        .drawImage(player, 0, 0, canvas.width, canvas.height); //截
-      // var dataURL = canvas.toDataURL("image/png"); //将图片转成base64格式
-      // img.src = dataURL;
-      // img.width = player.clientWidth; //控制截出来的图片宽的大小
-      // img.height = player.clientHeight; //控制截出来的图片高的大小
-      // img.style.border = "1px solid #333333"; //控制截出来的图片边框的样式
-      // document.getElementById("cutImage").appendChild(img); //显示在页面中
-      // console.log("img:", dataURL);
-      try {
-        canvas.toBlob((blob) => {
-          // 创建a元素来实现下载
-          // const a = document.createElement("a");
-          // a.style.display = "none";
-          // document.body.appendChild(a);
-          // a.href = window.URL.createObjectURL(blob);
-          // // 下载的文件名
-          // let fileName = "nt图片";
-          // a.download =
-          //   fileName || `screenshot-${canvas.width}x${canvas.height}.png`;
-          // console.log("IMG-BLOD:", blob);
-          const myFile = new File([blob], "image.png", {
-            type: blob.type,
+            console.log('srs err', reason)
+            _this.sdk.close();
           });
-          this.savaTaskImages(myFile, data.deviceId, data.id);
-          // a.click();
-          // // 触发下载后，移除元素
-          // a.remove();
-        });
-      } catch (e) {
-        console.log(e);
       }
-      // this.downFile(dataURL, "图片.jpg"); //下载截图
-    },
-    async savaTaskImages (images, deviceHardId, task_id) {
-      let forms = new FormData();
-
-      forms.append("task_id", task_id);
-      forms.append("deviceHardId", deviceHardId);
-      forms.append("images", images);
     },
-  },
-  watch: {
-    data: {
-      handler (newVal, oldVal) {
-        let self = this
-         if (newVal?.vUrl != oldVal?.vUrl) {
-            this.$nextTick(() => {
-              console.log('self.init')
-              self.init();
-            });
-          }
-      },
-      deep: true,
-      immediate: true,
+    fullScreen() {
+      let video = this.$refs["webrtc"];
+      if (video.webkitRequestFullScreen) {
+        video.webkitRequestFullScreen();
+      } else if (video.requestFullscreen) {
+        video.requestFullscreen();
+      } else if (video.mozRequestFullScreen)
+        setTimeout(() => {
+          video.play();
+        }, 200);
     },
   },
+  
 };
 </script>
 
 <style lang="scss" scoped>
-video::-webkit-media-controls-enclosure {
-  display: none;
-}
 .cpt-player-webrtc {
   height: 100%;
   width: 100%;
   background-color: #000;
-  &:hover {
-    video::-webkit-media-controls-enclosure {
-      display: inherit !important;
-    }
-  }
   video {
     width: 100%;
     height: 100%;

src/components/MMCFlightControlCenter/components/uavApplications/index.vue

@@ -5,13 +5,8 @@
       class="player"
       ref="player"
       v-if="showPlayer && uav"
-      :pointListFlag="pointListFlag"
-      @imgUrl="getimgUrl"
-      @startLinePoint="startLinePoint"
-      :scheduleData="scheduleData"
-      :NXdata="NXdata"
-      :lineLableName="lineLableName"
       :device="uav"
+      :mountDatas="selectMount"
       @close="onPlayerClose"
     />
     <ControlPanel v-if="showPanel"></ControlPanel>
@@ -37,10 +32,7 @@ export default {
     return {
       pointListFlag: false,
       aiPopup: null, //识别图标
-      scheduleData: {}, //航线执行进度
       keyFlag: false, //NX状态
-      NXdata: {}, //NX数据
-      lineLableName: "", //当前航线标签
       videoItem: 0,
       showCenter: false,
     };
@@ -50,6 +42,7 @@ export default {
       "uav",
       "showPlayer",
       "showPanel",
+      "selectMount"
     ]),
     taskId() {
       return this.$store.state.fckernel.taskId;
@@ -82,15 +75,6 @@ export default {
   mounted() {},
   beforeDestroy() {},
   methods: {
-    startLinePoint() {
-      this.pointListFlag = !this.pointListFlag;
-      if (this.pointListFlag) {
-        this.pointFlag = true;
-        setTimeout(() => {
-          this.pointFlag = false;
-        }, 1000);
-      }
-    },
     getcanvas(val, item) {
       let data = null;
       if (item.jsonData) {
@@ -350,60 +334,6 @@ export default {
         });
       }
     },
-    async getimgUrl(val, aiType, item) {
-      this.aiType = aiType;
-      this.imgshow = true;
-      this.imgshowurl = val;
-      //人流
-      if (aiType == 3) {
-        this.aiTotal = item.detectPersonCount;
-        this.getcanvas(val, item);
-      }
-      //车流
-      if (aiType == 13) {
-        // this.aiTotal = item.detectPersonCount;
-        let data = JSON.parse(item.jsonData).label;
-        console.log(data, "datatat");
-        let car = "";
-        let van = "";
-        let truck = "";
-        let bus = "";
-        for (let t in data) {
-          if (t == "car" && data["car"]) {
-            car = "小轿车" + data["car"] + "辆";
-          } else if (t == "truck" && data["truck"]) {
-            truck = "卡车" + data["truck"] + "辆";
-          } else if (t == "van" && data["van"]) {
-            van = "面包车" + data["van"] + "辆";
-          } else if (t == "bus" && data["bus"]) {
-            bus = "巴士" + data["bus"] + "辆";
-          }
-        }
-        this.aiTotal = car + truck + van + bus;
-        this.getcanvas(val, item);
-      }
-      //游泳
-      if (aiType >= 4) {
-        this.getcanvas(val, item);
-      }
-      //人脸
-      if (aiType == 1 || aiType == 2) {
-        let data = {
-          fileKey: item.visitUrl,
-          aiType: aiType,
-        };
-        let res = await API.FCKERNEL.getFaceResultByFileKey(data);
-        if (aiType == 1) {
-          this.faceList = res.faceImageInfo?.faceResults;
-          this.faceShow = true;
-          this.getcanvas(val, res.faceImageInfo);
-        } else {
-          this.carList = res.aiPlateShiJuResultInfoDtoList;
-          this.carShow = true;
-          this.getcanvas(val, res);
-        }
-      }
-    },
     onPlayerClose(){
       this.$store.dispatch("MMCFlightControlCenter/uavApplications/showPlayer", this.uav);
     }

src/components/MMCFlightControlCenter/store/uavApplications.js

@@ -882,13 +882,6 @@ const actions = {
         },
       });
     } else {
-      // 地面站链路
-      window.$mmc.store.dispatch("MMCGroundStation/order", {
-        order: "指点飞行",
-        data: {},
-        deviceHardId: state.uav.hardId,
-      });
-      data?.callback && data.callback(true);
     }
   },
   /**
@@ -936,13 +929,6 @@ const actions = {
         },
       });
     } else {
-      // 地面站链路
-      window.$mmc.store.dispatch("MMCGroundStation/order", {
-        order: "指点飞行",
-        data: {},
-        deviceHardId: state.uav.hardId,
-      });
-      data?.callback && data.callback(true);
     }
   },
   /**
@@ -961,13 +947,6 @@ const actions = {
         },
       });
     } else {
-      // 地面站链路
-      window.$mmc.store.dispatch("MMCGroundStation/order", {
-        order: "指点飞行",
-        data: {},
-        deviceHardId: state.uav.hardId,
-      });
-      data?.callback && data.callback(true);
     }
   },
 
@@ -987,13 +966,6 @@ const actions = {
         },
       });
     } else {
-      // 地面站链路
-      window.$mmc.store.dispatch("MMCGroundStation/order", {
-        order: "指点飞行",
-        data: {},
-        deviceHardId: state.uav.hardId,
-      });
-      data?.callback && data.callback(true);
     }
   },