refactor: device recording configuration

src/api/camera.js

@@ -81,24 +81,15 @@ export function setCamera (data) {
 }
 
 // 摄像头在线状态
-export function getOnline (deviceId) {
+export function isOnline (deviceId) {
   return request({
     url: `/camera/${deviceId}/online`,
     method: 'GET'
   })
 }
 
-// 获取授权码
-export function authCode (query) {
-  const { deviceId } = query
-  return request({
-    url: `/deviceStream/${deviceId}/authCode`,
-    method: 'GET'
-  })
-}
-
 // 直播流详情
-export function detail (stream) {
+export function getStreamDetail (stream) {
   return request({
     url: `/${stream}/detail`,
     method: 'GET'

src/api/device.js

@@ -445,3 +445,9 @@ export function updateRecordConfig (data, config) {
   })
 }
 
+export function authCode (stream) {
+  return request({
+    url: `/deviceStream/${stream}/authCode`,
+    method: 'GET'
+  })
+}

src/components/external/DevicePlayer/index.vue

@@ -34,8 +34,13 @@
       class="l-flex--row c-footer"
     >
       <div class="l-flex__fill c-sibling-item u-ellipsis">{{ device.name }}</div>
-      <template v-if="online">
+      <template v-if="recordConfig">
+        <i
+          v-if="loadingQuality"
+          class="c-sibling-item el-icon-loading"
+        />
         <div
+          v-else
           class="l-flex__none c-sibling-item o-quality-menu has-active u-pointer"
           @click.stop="toggleQualityMenu"
         >
@@ -44,25 +49,15 @@
             class="o-quality-menu__list"
           >
             <div
+              v-for="item in qualities"
+              :key="item.value"
               class="o-quality-menu__item u-pointer"
-              @click="changeQuality('fff')"
-            >
-              标清
-            </div>
-            <div
-              class="o-quality-menu__item u-pointer"
-              @click="changeQuality('ff')"
+              @click="changeQuality(item)"
             >
-              高清
-            </div>
-            <div
-              class="o-quality-menu__item u-pointer"
-              @click="changeQuality('')"
-            >
-              原画
+              {{ item.label }}
             </div>
           </div>
-          {{ qualityValue }}
+          {{ quality.label }}
         </div>
         <i
           class="c-sibling-item el-icon-full-screen has-active u-pointer"
@@ -74,10 +69,36 @@
 </template>
 
 <script>
-import { authCode } from '@/api/camera'
+import {
+  authCode,
+  getRecordConfig,
+  addRecordConfig,
+  updateRecordConfig
+} from '@/api/device'
 import { GATEWAY } from '@/constant'
 import playerMixin from '../player'
 
+const Quality = {
+  fff: {
+    videoWidth: 640,
+    videoHeight: 360,
+    videoBitRate: 36 * 1024,
+    frameRate: 1
+  },
+  ff: {
+    videoWidth: 1280,
+    videoHeight: 720,
+    videoBitRate: 100 * 1024,
+    frameRate: 10
+  },
+  f: {
+    videoWidth: 1920,
+    videoHeight: 1080,
+    videoBitRate: 1024 * 1024,
+    frameRate: 20
+  }
+}
+
 export default {
   name: 'DevicePlayer',
   mixins: [playerMixin],
@@ -89,23 +110,20 @@ export default {
   },
   data () {
     return {
+      qualities: [
+        { value: 'fff', label: '标清' },
+        { value: 'ff', label: '高清' },
+        { value: 'f', label: '超清' }
+      ],
+      loadingQuality: false,
       showQualityMenu: false,
-      quality: ''
+      quality: null,
+      recordConfig: null
     }
   },
   computed: {
     online () {
       return this.device.activate === 2 && this.device.onlineStatus === 1
-    },
-    qualityValue () {
-      switch (this.quality) {
-        case 'fff':
-          return '标清'
-        case 'ff':
-          return '高清'
-        default:
-          return '原画'
-      }
     }
   },
   watch: {
@@ -115,6 +133,8 @@ export default {
       } else {
         this.hideQualityMenu()
         this.destroyPlayer()
+        this.recordConfig = null
+        this.$playerInfo = null
       }
     }
   },
@@ -128,6 +148,45 @@ export default {
     this.hideQualityMenu()
   },
   methods: {
+    getRecordConfig () {
+      this.loadingQuality = true
+      getRecordConfig(this.device.id, { custom: true }).finally(() => {
+        this.loadingQuality = false
+      }).then(
+        ({ data }) => {
+          if (data) {
+            const { frameRate } = data
+            const key = Object.keys(Quality).find(key => Quality[key].frameRate === frameRate) || 'fff'
+            this.quality = this.qualities.find(({ value }) => value === key) || this.qualities[0]
+            this.recordConfig = data
+            this.createPlayer()
+          } else {
+            this.setRecordConfig(this.qualities[0])
+          }
+        },
+        () => {
+          this.destroyPlayer()
+        }
+      )
+    },
+    setRecordConfig (quality) {
+      this.loadingQuality = true
+      ;(this.recordConfig ? updateRecordConfig : addRecordConfig)({
+        deviceId: this.device.id,
+        ...Quality[quality.value]
+      }, { custom: true }).then(
+        ({ data }) => {
+          this.quality = quality
+          this.recordConfig = data
+          this.createPlayer()
+        },
+        () => {
+          this.destroyPlayer()
+        }
+      ).finally(() => {
+        this.loadingQuality = false
+      })
+    },
     hideQualityMenu () {
       if (this.showQualityMenu) {
         this.showQualityMenu = false
@@ -143,25 +202,20 @@ export default {
       }
     },
     changeQuality (quality) {
-      if (this.quality !== quality) {
-        this.quality = quality
-        if (this.$player) {
-          this.destroyPlayer()
-          this.createPlayer()
-        }
+      if (this.quality.value !== quality.value) {
+        this.$playerInfo = null
+        this.setRecordConfig(quality)
+      } else if (this.needReset) {
+        this.createPlayer()
       }
     },
     getAuthCode () {
-      if (this.loading) {
-        return
-      }
-      this.loading = true
       this.$playerInfo = null
-      authCode({ deviceId: this.device.id }).then(
+      authCode(this.recordConfig.stream).then(
         ({ data }) => {
           if (this.$timer !== null) {
             this.$playerInfo = data
-            this.createPlayer(this.$playerInfo)
+            this.createPlayer()
           }
         },
         () => {
@@ -170,6 +224,15 @@ export default {
       )
     },
     createPlayer () {
+      if (this.$timer === null) {
+        return
+      }
+      this.loading = true
+      clearTimeout(this.$timer)
+      if (!this.recordConfig) {
+        this.getRecordConfig()
+        return
+      }
       if (!this.$playerInfo) {
         this.getAuthCode()
         return
@@ -179,8 +242,8 @@ export default {
         this.getAuthCode()
         return
       }
-      const quality = this.quality ? `_${this.quality}` : ''
-      this.playUrl(`${GATEWAY}/live/${this.device.id}${quality}.flv?authorization=${token}&timestamp=${timestamp}&expire=${expire}`)
+      this.destroyPlayer()
+      this.playUrl(`${GATEWAY}/live/${this.recordConfig.stream}.flv?authorization=${token}&timestamp=${timestamp}&expire=${expire}`)
     }
   }
 }

src/views/realm/device/Group.vue

@@ -22,13 +22,9 @@ import {
   activateDevice,
   deactivateDevice
 } from '@/api/device'
-import RecordConfigDialog from './settings/components/RecordConfigDialog'
 
 export default {
   name: 'GroupDeviceManagement',
-  components: {
-    RecordConfigDialog
-  },
   data () {
     return {
       schema: {
@@ -76,9 +72,8 @@ export default {
                   : '未激活'
               }
           }, on: this.onTagClick },
-          { type: 'invoke', width: 160, render: [
-            { label: '查看', render ({ empty }) { return !empty }, on: this.onViewDevice },
-            { label: '推流配置', render ({ isMaster }) { return isMaster }, on: this.onRecordConfig }
+          { type: 'invoke', render: [
+            { label: '查看', render ({ empty }) { return !empty }, on: this.onViewDevice }
           ] }
         ]
       }
@@ -165,9 +160,6 @@ export default {
           this.reloadSubDevices(data.parent)
         }
       })
-    },
-    onRecordConfig (device) {
-      this.$refs.recordConfigDialog.show(device)
     }
   }
 }

src/views/realm/device/settings/components/DeviceNormalConfig.vue

@@ -1,11 +1,5 @@
 <template>
   <div class="l-settings">
-    <button
-      class="o-button"
-      @click="onRecordConfig"
-    >
-      推流配置
-    </button>
     <button
       class="o-button"
       @click="onContentProtectionConfig"
@@ -18,13 +12,11 @@
 </template>
 
 <script>
-import RecordConfigDialog from './RecordConfigDialog'
 import ContentProtectionConfigDialog from './ContentProtectionConfigDialog'
 
 export default {
   name: 'DeviceNormalConfig',
   components: {
-    RecordConfigDialog,
     ContentProtectionConfigDialog
   },
   props: {
@@ -34,9 +26,6 @@ export default {
     }
   },
   methods: {
-    onRecordConfig () {
-      this.$refs.recordConfigDialog.show(this.device)
-    },
     onContentProtectionConfig () {
       this.$refs.contentProtectionConfigDialog.show(this.device)
     }