feat: player supports retry

src/components/external/DevicePlayer/index.vue

@@ -151,11 +151,9 @@ export default {
   },
   methods: {
     onVideoEnded () {
-      console.log('Device onVideoEnded')
-      this.destroyPlayer()
       this.recordConfig = null
       this.$playerInfo = null
-      this.createPlayer()
+      this.onVideoError('Device Playback Ended')
     },
     getRecordConfig () {
       this.loadingQuality = true

src/components/external/camera/CameraDetail/index.vue

@@ -201,11 +201,10 @@ export default {
   },
   methods: {
     onVideoEnded () {
-      console.log('Camera Detail onVideoEnded')
       this.videoSettings = null
       this.infoData = null
       this.getAvailableParam()
-      this.onRefresh()
+      this.onVideoError('Camera Detail Ended')
     },
     close () {
       this.destroyPlayer()

src/components/external/camera/CameraPlayer/index.vue

@@ -79,9 +79,7 @@ export default {
   },
   methods: {
     onVideoEnded () {
-      console.log('Camera onVideoEnded')
-      this.destroyPlayer()
-      this.createPlayer()
+      this.onVideoError('Camera Playback Ended')
     },
     createPlayer () {
       this.playUrl(`${GATEWAY_CAMERA}/${this.camera.identifier}?authorization=${this.token}`)

src/components/external/player.js

@@ -64,10 +64,7 @@ export default {
             hasVideo: true,
             url
           })
-          player.on(mpegtsjs.Events.ERROR, e => {
-            console.log('mpegtsjs', mpegtsjs.Events.ERROR, e)
-            this.destroyPlayer()
-          })
+          player.on(mpegtsjs.Events.ERROR, this.onVideoError)
           // player.on(mpegtsjs.Events.RECOVERED_EARLY_EOF, e => {
           //   console.log('mpegtsjs', mpegtsjs.Events.RECOVERED_EARLY_EOF, e)
           // })
@@ -191,11 +188,15 @@ export default {
       clearTimeout(this.$timer)
       this.$timer = setTimeout(() => {
         if (this.loading || this.waiting) {
-          this.destroyPlayer()
-          this.$message({
-            type: 'warning',
-            message: '暂未获取到视频流'
-          })
+          if (this.controls) {
+            this.destroyPlayer()
+            this.$message({
+              type: 'warning',
+              message: '暂未获取到视频流'
+            })
+          } else {
+            this.onVideoError('No Streaming')
+          }
         }
       }, 10000)
     },
@@ -209,6 +210,7 @@ export default {
     onVideoError (e) {
       console.log('onVideoError', e)
       this.destroyPlayer()
+      this.createPlayer()
     },
     onVideoEnded () {
       console.log('onVideoEnd')

src/views/device/detail/components/external/Camera/index.vue

@@ -74,6 +74,7 @@
         v-if="detailing"
         :camera="targetCamera"
         autoplay
+        controls
         @close="onClose"
       />
     </el-dialog>

src/views/external/camera/index.vue

@@ -24,23 +24,6 @@
       :schema="schema"
       size="large"
     >
-      <!-- <template #header="{ totalCount }">
-        <div class="l-flex--row">
-          <button
-            class="c-sibling-item o-button"
-            @click="onAdd"
-          >
-            <i class="o-button__icon el-icon-circle-plus-outline" />新增
-          </button>
-          <button
-            v-if="totalCount"
-            class="c-sibling-item o-button o-botton--white"
-            @click="onAll"
-          >
-            <i class="o-button__icon el-icon-menu" />全部
-          </button>
-        </div>
-      </template> -->
       <grid-table-item v-slot="item">
         <camera-player
           v-if="isActivated"
@@ -161,7 +144,8 @@ export default {
         condition: { name: '' },
         list: this.getCameras,
         buttons: [
-          { type: 'add', on: this.onAdd }
+          { type: 'add', on: this.onAdd }/* ,
+          { label: '全部', icon: 'el-icon-menu', on: this.onAll } */
         ],
         filters: [
           { key: 'searchname', type: 'search', placeholder: '设备名称' }