fix: video back some solve bug

src/api/camera.js

@@ -86,13 +86,10 @@ export function getOnline (deviceId) {
 
 // 获取授权码
 export function authCode (query) {
-  const { deviceId, ...params } = query
+  const { deviceId } = query
   return request({
     url: `/deviceStream/${deviceId}/authCode`,
-    method: 'get',
-    params: {
-      ...params
-    }
+    method: 'get'
   })
 }
 // 直播流详情

src/views/device/back/components/video.vue

@@ -59,17 +59,18 @@ export default {
     return {
       player: null,
       maskshow: 'none',
-      refreshshow: false
+      refreshshow: false,
+      first: false
     }
   },
   computed: {
   },
   created () {
-    // listen(this.onMessage)
-    // screenshot(this.device.id)
+    if (this.device.onlineStatus === 1) {
+      this.getAuthCode()
+    }
   },
   beforeDestroy () {
-    // unlisten(this.onMessage)
     if (this.player) {
       this.destroyPlay()
     }
@@ -79,11 +80,17 @@ export default {
       if (this.device.onlineStatus === 1) {
         this.maskshow = 'block'
       }
+      if (this.player && !this.$refs.player.paused) {
+        this.device.paused = false
+      } else {
+        this.device.paused = true
+      }
     },
     mouseLeave () {
       this.maskshow = 'none'
     },
     videoplay () {
+      this.first = true
       if (this.$refs.player.paused) {
         this.maskshow = 'none'
       }
@@ -100,14 +107,10 @@ export default {
       }
     },
     getAuthCode () {
-      // console.log()
-      var timestamp = new Date().getTime()
       authCode({
-        deviceId: this.device.id,
-        timestamp: timestamp
+        deviceId: this.device.id
       }).then(({ data }) => {
-        var { token, expire } = data
-        // this.getDetail()
+        var { token, expire, timestamp } = data
         this.getflv(timestamp, token, expire)
       })
     },
@@ -120,7 +123,6 @@ export default {
       if (flvjs.isSupported()) {
         // 创建一个flvjs实例
         var url = `${CAMERA_URL}/live/${this.device.id}.flv?authorization=${token}&timestamp=${timestamp}&expire=${expire}`
-        console.log(url)
         this.player = flvjs.createPlayer({
           type: 'flv',
           isLive: true,
@@ -136,7 +138,7 @@ export default {
           this.destroyPlay()
           this.$message({
             type: 'warning',
-            message: '设备离线'
+            message: '设备视频流出错'
           })
         })
         var time = 10000
@@ -149,10 +151,9 @@ export default {
             this.destroyPlay()
             this.$message({
               type: 'warning',
-              message: '设备没有视频流'
+              message: this.device.name + '设备没有视频流'
             })
             this.refreshshow = true
-            // this.getflv1(timestamp, token, expire)
           }
           clearInterval(timer)
         }, time)
@@ -163,6 +164,9 @@ export default {
           // 开始运行加载 只要流地址正常 就可以在h5页面中播放出画面了
           this.player.load()
           this.player.play()
+          if (!this.first) {
+            this.player.pause()
+          }
         } catch (error) {
           console.log('连接websocker异常：' + error)
           return false

src/views/device/back/index.vue

@@ -7,10 +7,10 @@
     <div v-loading="loading" class="has-padding">
       <div class="l-flex--row c-table__header">
         <div class="l-flex__auto c-sibling-item">
-          <el-checkbox-group v-model="checkList" @change="chechChange">
+          <!-- <el-checkbox-group v-model="checkList" @change="chechChange">
             <el-checkbox label="视频回采" />
             <el-checkbox label="模拟终端" />
-          </el-checkbox-group>
+          </el-checkbox-group> -->
         </div>
         <div class="l-flex__none c-sibling-item">
           <img
@@ -83,8 +83,6 @@ import {
 import { createListOptions } from '@/utils'
 import Videobox from './components/video.vue'
 
-// const CAMERA_URL = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${process.env.VUE_APP_GATEWAY || location.host}${process.env.VUE_APP_CAMERA_PROXY}`
-
 export default {
   name: 'Back',
   components: {
@@ -94,11 +92,10 @@ export default {
     return {
       checkList: [],
       returnheight: '0px',
-      rowNum: 24,
+      rowNum: 12,
       returnList: createListOptions({
         pageSize: 1
       }),
-      zoomnum: '1',
       loading: false
     }
   },
@@ -113,16 +110,14 @@ export default {
         icon_nine: this.rowNum === 8 ? require('@/assets/icon_nine_hover.svg') : require('@/assets/icon_nine.svg')
       }
       return result
+    },
+    zoomnum () {
+      return this.rowNum === 24 ? '1' : this.rowNum === 12 ? '.6' : '.4'
     }
   },
   created () {
-    // this.svg_icon.icon_one = require('@/assets/icon_one_hover.svg')
     this.getDevices()
-    // this.getAuthCode()
   },
-  // beforeDestroy () {
-  //   unlisten(this.onMessage)
-  // },
   methods: {
     getDevices () {
       this.loading = true
@@ -131,6 +126,7 @@ export default {
       options.error = false
       options.loading = true
       options.params.pageSize = this.rowNum === 24 ? 1 : this.rowNum === 12 ? 4 : 9
+      options.params.activate = 2
       getDevices(options.params).then(({ data, totalCount }) => {
         for (let i = 0; i < data.length; i++) {
           data[i].paused = true
@@ -165,37 +161,11 @@ export default {
       }
       this.returnList.params.pageNum = 1
       this.rowNum = num
-      this.zoomnum = num === 24 ? '1' : num === 12 ? '.6' : '.4'
       this.getDevices()
     },
     chechChange (val) {
       console.log(val)
     }
-    // getflv (deviceId) {
-    //   if (flvjs.isSupported()) {
-    //     // 创建一个flvjs实例
-    //     this.playerList[deviceId] = flvjs.createPlayer({
-    //       type: 'flv',
-    //       isLive: true,
-    //       hasAudio: false,
-    //       url: `${CAMERA_URL}/${deviceId}?authorization=${this.$keycloak.token}`
-    //     })
-    //     this.playerList[deviceId].on('error', (e) => {
-    //       console.log(e)
-    //     })
-    //     // 将实例挂载到video元素上面
-    //     this.playerList[deviceId].attachMediaElement(this.$refs[deviceId][0])
-    //     // player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
-    //     try {
-    //       // 开始运行加载 只要流地址正常 就可以在h5页面中播放出画面了
-    //       this.playerList[deviceId].load()
-    //       this.playerList[deviceId].play()
-    //     } catch (error) {
-    //       console.log('连接websocker异常：' + error)
-    //       console.log(error)
-    //     }
-    //   }
-    // },
   }
 }
 </script>