fix: 视频调试和默认首页

package.json

@@ -18,6 +18,7 @@
     "echarts": "^5.4.3",
     "element-ui": "^2.15.13",
     "file-saver": "^2.0.5",
+    "flv.js": "^1.6.2",
     "highlight.js": "9.18.5",
     "lodash.clonedeep": "^4.5.0",
     "lodash.get": "^4.4.2",
@@ -28,6 +29,9 @@
     "qs": "^6.10.1",
     "screenfull": "5.0.2",
     "store": "^2.0.12",
+    "video.js": "^8.3.0",
+    "videojs-flvjs": "^0.2.0",
+    "videojs-flvjs-es6": "^1.0.1",
     "vue": "^2.6.14",
     "vue-clipboard2": "^0.3.3",
     "vue-container-query": "^0.1.0",

public/index.html

@@ -6,10 +6,6 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name="format-detection" content="telephone=yes" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
-    <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
-    <script src="https://unpkg.com/flv.js/dist/flv.min.js"></script>
-    <script src="https://unpkg.com/videojs-flvjs/dist/videojs-flvjs.min.js"></script>
     <title>两江消防车辆联网系统</title>
     <style>.first-loading-wrp{display:flex;justify-content:center;align-items:center;flex-direction:column;min-height:420px;height:100%}.first-loading-wrp>h1{font-size:128px}.first-loading-wrp .loading-wrp{padding:98px;display:flex;justify-content:center;align-items:center}.dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:32px;width:32px;height:32px;box-sizing:border-box}.dot i{width:14px;height:14px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.dot i:nth-child(1){top:0;left:0}.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
     <!-- require cdn assets css -->

src/permission.js

@@ -12,7 +12,7 @@ NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
 const allowList = ['login', 'register'] // no redirect allowList
 const loginRoutePath = '/user/login'
-const defaultRoutePath = '/index'
+const defaultRoutePath = '/cardiot'
 
 router.beforeEach((to, from, next) => {
   NProgress.start() // start progress bar

src/views/cardIot/components/Video.vue

@@ -36,7 +36,10 @@
 
 <script>
 import { getCarVideo } from '@/api/iot'
-import axios from 'axios'
+import 'video.js/dist/video-js.css'
+import 'videojs-flvjs-es6'
+import flvjs from 'flv.js'
+
 export default {
   data() {
     return {
@@ -107,16 +110,21 @@ export default {
         channel: this.carId,
       }
       getCarVideo(params).then((res) => {
+        if (res.code === 500) return
         this.videoSrc = res.msg
         // this.videoSrc = `blob:${res.msg.replace('http://183.66.101.92:1078/video', '/video')}`
-        var flvPlayer = flvjs.createPlayer({
-          type: 'flv',
-          url: res.msg,
+        this.$nextTick(() => {
+          if (flvjs.isSupported()) {
+            var flvPlayer = flvjs.createPlayer({
+              type: 'flv',
+              url: res.msg,
+              isLive: true
+            })
+            //url: xxx 为后台请求数据的视频
+            flvPlayer.attachMediaElement(this.$refs.videoPlayer)
+            flvPlayer.load()
+          }
         })
-        //url: xxx 为后台请求数据的视频
-        flvPlayer.attachMediaElement(this.$refs.videoPlayer)
-        flvPlayer.load()
-        flvPlayer.play()
       })
     },
     Onchange(val) {
@@ -128,7 +136,7 @@ export default {
     },
   },
   created() {
-    this.FunVdieoList()
+    // this.FunVdieoList()
   },
   mounted() {},
 }