fix:

1. 修正播放器不能全屏
2. 修正播放器webrtc fpv模式
3. 样式文件补充

index.js

 import Vue from "vue";
 import VueClipBoard from "vue-clipboard2";
 import interact from "./src/directives/interact";
-import "./src/style/index.css";
+// import "./src/style/index.css";
+import "./src/style/index.scss";
 
 import MMCCodeDemo from "./src/components/MMCCodeDemo";
 import MMCDataTransferPanel from "./src/components/MMCDataTransferPanel";

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

@@ -49,7 +49,7 @@ export default {
     init() {
     },
     fullScreen(){
-      this.$refs.livePlayer.fullScreen();
+      this.$refs.livePlayer.requestFullscreen();
     }
   },
 };

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

 <template>
-  <div class="livenvr pr" :class="className">
+  <div class="livenvr" :class="className">
     <!-- <video style="width:100%;height:100%" controls ref="video" src="./1.mp4"></video> -->
     <LivePlayer
       ref="livePlayer"
@@ -9,7 +9,6 @@
         small: !smallFPV,
         'livenvr-player': smallFPV,
         vUrl: isStatus && !smallFPV,
-        vUrlDeffault: !isStatus && !smallFPV,
       }"
       :controls="false"
       :videoUrl="data.vUrl"
@@ -22,7 +21,6 @@
       :dblclick-fullscreen="false"
       :class="{
         vUrl: isStatus,
-        vUrlDeffault: !isStatus,
         small: smallFPV,
         'livenvr-player': !smallFPV,
       }"
@@ -183,10 +181,6 @@ export default {
     right: 10px;
   }
 
-  .vUrlDeffault {
-    bottom: 0;
-  }
-
   /* 隐藏画中画按钮 */
   .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder {
     display: none !important;

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>
+    <video id="rtc_media_player" ref="webrtc" controls autoplay :class="{small: !smallFPV}"></video>
+    <video v-if="fpvUrl.vUrl" id="rtc_media_player" ref="fpv" controls autoplay :class="{small: smallFPV}"></video>
   </div>
 </template>
 
@@ -21,6 +22,14 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    smallFPV: {
+      type: Boolean,
+      default: () => true,
+    },
+    fpvUrl: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -64,10 +73,21 @@ export default {
           .play(this.data.vUrl)
           .then(function (session) {})
           .catch(function (reason) {
-            console.log('srs err', reason)
+            console.log("srs err", reason);
             _this.sdk.close();
           });
       }
+
+      if (this.fpvUrl) {
+        this.sdk = new SrsRtcPlayerAsync();
+        this.$refs["fpv"].srcObject = this.sdk.stream;
+        this.sdk
+          .play(this.fpvUrl.vUrl)
+          .then(function (session) {})
+          .catch(function (reason) {
+            console.log("srs err", reason);
+          });
+      }
     },
     fullScreen() {
       let video = this.$refs["webrtc"];
@@ -81,7 +101,6 @@ export default {
         }, 200);
     },
   },
-  
 };
 </script>
 
@@ -95,10 +114,19 @@ export default {
     height: 100%;
     object-fit: fill;
   }
+
+  .small {
+    width: 300px;
+    height: 170px;
+    position: absolute;
+    right: 0;
+    z-index: 1;
+    bottom: 0;
+  }
 }
 
 video::-webkit-media-controls-panel {
-  display:none !important;
+  display: none !important;
 }
 
 video::-webkit-media-controls-timeline {

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

@@ -237,10 +237,10 @@
             </div>
           </div>
           <div class="iconBG" v-if="isStatus">
-            <div class="cp infop cf right50" @click="getInfo" alt />
+            <div class="infop" @click="getInfo" alt />
             <div
               :class="type == 4 ? 'right17' : 'right23'"
-              class="cp reset cf iconfont icon-gengxin"
+              class="reset iconfont icon-gengxin"
               @click="reset"
             />
           </div>
@@ -304,17 +304,17 @@
                   ></el-option>
                 </el-select>
               </div>
-              <div class="pointer iconfont icon-gengxin cf f16 mr40 menu-item" @click="reset"></div>
+              <div class="pointer iconfont icon-gengxin menu-item" @click="reset"></div>
               <!-- FPV切换 -->
               <el-tooltip content="模式切换" placement="bottom">
                 <div
                   v-if="streamSelect.toUpperCase() !== 'QINGLIU'"
-                  class="cp pa iconfont icon-moshiqiehuan cf modelStyle menu-item"
+                  class="iconfont icon-moshiqiehuan modelStyle menu-item"
                   @click="change"
                 ></div>
               </el-tooltip>
               <div
-                class="pointer iconfont icon-quanping cf mr3 f16 menu-item"
+                class="pointer iconfont icon-quanping menu-item"
                 @click="screen"
                 v-if="!isStatus"
               ></div>
@@ -1139,6 +1139,7 @@ export default {
     }
   }
   .bottom-menu {
+    z-index: 1;
     position: absolute;
     bottom: 0;
     width: 100%;

src/components/MMCFlightControlCenter/store/uav.js

@@ -12,8 +12,8 @@ window.positions = () => {
   console.log(positions);
 };
 const defaultPos = {
-  latitude: 22.433, // 纬度
-  longitude: 113.75, // 经度
+  latitude: 0, // 纬度
+  longitude: 0, // 经度
 };
 
 const uavRealTimeData = {
@@ -433,7 +433,7 @@ const actions = {
         positions.push(UAVDataParser(state.uavRealTimeData).position);
       }
 
-      if (!state.uavModelEntity) {
+      if (state.uavRealTimeData.locationCoordinate3D.longitude !== defaultPos.longitude && !state.uavModelEntity) {
         dispatch("createUavModel");
         dispatch("createAirline");
         dispatch("flyToUavModel");

src/style/custom.scss

+// 颜色
+.cf {
+  color: #ffffff;
+}
+
+.c3 {
+  color: #333333;
+}
+
+.c0 {
+  color: #000000;
+}
+
+.bgBlack {
+  background-color: #000000;
+}
+
+.indent {
+  text-indent: 2em;
+}
+
+.cfc {
+  color: #2ddcfc;
+}
+
+.fef {
+  color: #feffff;
+}
+
+.c6 {
+  color: #666666;
+}
+
+.c9 {
+  color: #999999;
+}
+
+.c8 {
+  color: #ebebeb;
+}
+
+.c7 {
+  color: #92d9ff;
+}
+
+.cred {
+  color: red;
+}
+
+.cgren {
+  background-color: greenyellow;
+}
+
+.bcff {
+  background-color: #ffbf00;
+}
+
+.blg {
+  background: linear-gradient(90deg, #00e6fe 0%, rgba(0, 230, 254, 0) 100%);
+}
+
+.ofh {
+  overflow: hidden;
+}
+
+.ofa {
+  overflow: auto;
+}
+
+// 阻止点击事件
+.preventClick {
+  pointer-events: none;
+}
+
+.preventClickImage {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.preventStyle {
+  opacity: 0.5;
+}
+
+.wih100 {
+  width: 100%;
+}
+
+.ht100 {
+  height: 100%;
+}
+
+.bore {
+  border: 1px solid #eee;
+}
+
+.bor50 {
+  border-radius: 50%;
+}
+
+.ti1 {
+  text-indent: 1em;
+}
+
+
+@for $i from 1 through 1920 {
+  .w#{$i} {
+    width: (1px * $i) !important;
+  }
+  .h#{$i} {
+    height: (1px * $i) !important;
+  }
+  .p#{$i} {
+    padding: (1px * $i) !important;
+  }
+
+  .pt#{$i} {
+    padding-top: (1px * $i) !important;
+  }
+
+  .pb#{$i} {
+    padding-bottom: (1px * $i) !important;
+  }
+
+  .pl#{$i} {
+    padding-left: (1px * $i) !important;
+  }
+
+  .pr#{$i} {
+    padding-right: (1px * $i);
+  }
+
+  .px#{$i} {
+    padding: 0 (1px * $i);
+  }
+
+  .py#{$i} {
+    padding: (1px * $i) 0;
+  }
+
+  .mt#{$i} {
+    margin-top: (1px * $i) !important;
+  }
+
+  .mb#{$i} {
+    margin-bottom: (1px * $i);
+  }
+
+  .ml#{$i} {
+    margin-left: (1px * $i);
+  }
+
+  .mr#{$i} {
+    margin-right: (1px * $i);
+  }
+
+}
+
+$fontWeights: 600,
+700,
+800,
+900;
+
+@each $weight in $fontWeights {
+  .fw#{$weight} {
+    font-weight: $weight;
+  }
+}
+
+@for $i from 1 through 60 {
+  .m#{$i} {
+    margin: (1px * $i);
+  }
+
+  .f#{$i} {
+    font-size: (1px * $i) !important;
+  }
+
+  .lh#{$i} {
+    line-height: (1px * $i);
+  }
+}
+
+// 文字对齐
+.tl {
+  text-align: left !important;
+}
+
+.tc {
+  text-align: center;
+}
+
+.tr {
+  text-align: right;
+}
+
+// 居中
+
+// 浮动与清除浮动
+.fl {
+  float: left;
+}
+
+.fr {
+  float: right;
+}
+
+.fix {
+  *zoom: 1;
+}
+
+.fix:after {
+  display: table;
+  content: "";
+  clear: both;
+}
+
+.cp {
+  cursor: pointer;
+}
+
+// 显示
+.dn {
+  display: none;
+}
+
+.di {
+  display: inline;
+}
+
+.db {
+  display: block;
+}
+
+.dib {
+  display: inline-block;
+}
+
+.dt {
+  display: table;
+}
+
+div.dib {
+  *display: inline;
+  *zoom: 1;
+}
+
+.vm {
+  vertical-align: middle;
+}
+
+.vib {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+// 定位
+.pr {
+  position: relative;
+}
+
+.pa {
+  position: absolute;
+}
+
+.pf {
+  position: fixed;
+}
+
+
+
+.jcsb {
+  display: flex;
+  justify-content: space-between;
+}
+
+.jcfs {
+  display: flex;
+  justify-content: flex-start;
+  align-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.jcc {
+  display: flex;
+  justify-content: center;
+}
+
+//
+.vas {
+  vertical-align: super !important;
+}
+
+.vat {
+  vertical-align: top;
+}
+
+.vam {
+  vertical-align: middle !important;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.df {
+  display: flex;
+}
+
+.text_ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+
+
+
+
+@for $i from -100 through 800 {
+  .left#{$i} {
+    left: (1px * $i);
+  }
+
+  .right#{$i} {
+    right: (1px * $i);
+  }
+
+  .bottom#{$i} {
+    bottom: (1px * $i);
+  }
+  .top#{$i} {
+    bottom: (1px * $i);
+  }
+}
+
+
+
+// 边框
+@for $i from 1 through 15 {
+  .br#{$i} {
+    border-right: (1px * $i);
+  }
+
+  .bl#{$i} {
+    border-left: (1px * $i);
+  }
+
+  .bt#{$i} {
+    border-top: (1px * $i);
+  }
+
+  .bb#{$i} {
+    border-bottom: (1px * $i);
+  }
+
+  .bra#{$i} {
+    border-radius: (1px * $i);
+  }
+}
+
+.c01 {
+  color: #01ffff;
+}
+
+//文本n行溢出隐藏  	@include
+@mixin ellipsisBasic($clamp: 2) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $clamp;
+}
\ No newline at end of file

src/style/index.scss

-@import './fonts/iconfont.css';
\ No newline at end of file
+@import './fonts/iconfont.css';
+@import './custom.scss';
\ No newline at end of file

vue2/package.json

@@ -28,6 +28,8 @@
     "node-polyfill-webpack-plugin": "^3.0.0",
     "postcss-url": "^10.1.3",
     "process": "^0.11.10",
+    "sass": "^1.77.4",
+    "sass-loader": "^14.2.1",
     "vue-template-compiler": "^2.6.14",
     "webpack": "^4.47.0"
   },

vue2/src/views/fkzxIframe/demo.vue

@@ -31,6 +31,7 @@
       src="https://localhost:9000/"
       style="width: 1920px; height: 1000px;"
       anonymous 
+      allowfullscreen="true"
     ></iframe>
   </div>
 </template>