feat(player): stability

src/components/service/external/DevicePlayer/index.vue

@@ -269,16 +269,17 @@ export default {
         this.getRecordConfig()
         return
       }
-      if (!this.$playerInfo) {
-        this.getAuthCode()
-        return
-      }
-      const { vhost = '__defaultVhost__', token, timestamp, expire } = this.$playerInfo
-      if (Number(timestamp) + Number(expire) * 1000 <= Date.now()) {
-        this.getAuthCode()
-        return
-      }
-      this.playUrl(`${GATEWAY}/live/${this.recordConfig.stream}.flv?vhost=${vhost}&authorization=${token}&timestamp=${timestamp}&expire=${expire}`)
+      // if (!this.$playerInfo) {
+      //   this.getAuthCode()
+      //   return
+      // }
+      // const { vhost = '__defaultVhost__', token, timestamp, expire } = this.$playerInfo
+      // if (Number(timestamp) + Number(expire) * 1000 <= Date.now()) {
+      //   this.getAuthCode()
+      //   return
+      // }
+      // this.playUrl(`${GATEWAY}/live/${this.recordConfig.stream}.flv?vhost=${vhost}&authorization=${token}&timestamp=${timestamp}&expire=${expire}`)
+      this.playUrl(`${GATEWAY}/live/${this.recordConfig.stream}.flv?vhost=__defaultVhost__`)
     }
   }
 }

src/components/service/external/player.js

@@ -47,7 +47,7 @@ export default {
       }
     },
     isPlaying () {
-      return !(this.loading || this.needReset || this.waiting || this.controls && this.paused)
+      return !(this.loading || this.needReset || !this.keep && this.waiting || this.controls && this.paused)
     }
   },
   created () {
@@ -77,12 +77,14 @@ export default {
     },
     onVideoStatisticsInfo (res) {
       console.log('STATISTICS_INFO', this.$lastDecodedFrames, '->', res.decodedFrames)
-      if (res.decodedFrames && this.$lastDecodedFrames === res.decodedFrames) {
+      if (this.$lastDecodedFrames === res.decodedFrames) {
         if (this.$lastDecodedFramesTimestamp) {
           const delta = Date.now() - this.$lastDecodedFramesTimestamp
-          console.log('STATISTICS_INFO', 'same frame', delta)
-          if (delta >= 5000) {
-            this.onVideoError('视频流未更新', delta)
+          const time = this.waiting ? 5000 : 10000
+          console.log('frozen', delta, '->', time)
+          if (delta >= time) {
+            this.releasePlayer()
+            this.initPlayer()
           }
         } else {
           this.$lastDecodedFramesTimestamp = Date.now()
@@ -92,43 +94,63 @@ export default {
         this.$lastDecodedFramesTimestamp = 0
       }
     },
+    releasePlayer () {
+      this.$lastDecodedFrames = null
+      this.$lastDecodedFramesTimestamp = 0
+      const player = this.$player
+      if (player) {
+        console.log('releasePlayer')
+        this.$player = null
+        player.pause()
+        player.unload()
+        player.detachMediaElement()
+        player.destroy()
+      }
+    },
+    initPlayer () {
+      console.log('initPlayer')
+      try {
+        const player = mpegtsjs.createPlayer({
+          type: 'flv',
+          isLive: true,
+          hasAudio: false,
+          hasVideo: true,
+          url: this.$videoUrl
+        }, {
+          enableWorker: true,
+          stashInitialSize: 128
+        })
+        player.on(mpegtsjs.Events.ERROR, this.onVideoError)
+        // player.on(mpegtsjs.Events.RECOVERED_EARLY_EOF, e => {
+        //   console.log('mpegtsjs', mpegtsjs.Events.RECOVERED_EARLY_EOF, e)
+        // })
+        // player.on(mpegtsjs.Events.MEDIA_INFO, e => {
+        //   console.log('mpegtsjs', mpegtsjs.Events.MEDIA_INFO, e)
+        // })
+        // player.on(mpegtsjs.Events.METADATA_ARRIVED, e => {
+        //   console.log('mpegtsjs', mpegtsjs.Events.METADATA_ARRIVED, e)
+        // })
+        // player.on(mpegtsjs.Events.SCRIPTDATA_ARRIVED, e => {
+        //   console.log('mpegtsjs', mpegtsjs.Events.SCRIPTDATA_ARRIVED, e)
+        // })
+        player.on(mpegtsjs.Events.STATISTICS_INFO, this.onVideoStatisticsInfo)
+        this.$player = player
+        const videoElm = this.$refs.video
+        player.attachMediaElement(videoElm)
+        videoElm.removeEventListener('progress', this.onVideoProgress)
+        videoElm.addEventListener('progress', this.onVideoProgress)
+        player.load()
+      } catch (error) {
+        console.log('连接异常', error)
+        this.onVideoDestroyByError('连接异常')
+      }
+    },
     playUrl (url) {
       if (mpegtsjs.isSupported()) {
         this.loading = true
         this.needReset = false
-        try {
-          const player = mpegtsjs.createPlayer({
-            type: 'flv',
-            isLive: true,
-            hasAudio: false,
-            hasVideo: true,
-            url
-          })
-          player.on(mpegtsjs.Events.ERROR, this.onVideoError)
-          // player.on(mpegtsjs.Events.RECOVERED_EARLY_EOF, e => {
-          //   console.log('mpegtsjs', mpegtsjs.Events.RECOVERED_EARLY_EOF, e)
-          // })
-          // player.on(mpegtsjs.Events.MEDIA_INFO, e => {
-          //   console.log('mpegtsjs', mpegtsjs.Events.MEDIA_INFO, e)
-          // })
-          // player.on(mpegtsjs.Events.METADATA_ARRIVED, e => {
-          //   console.log('mpegtsjs', mpegtsjs.Events.METADATA_ARRIVED, e)
-          // })
-          // player.on(mpegtsjs.Events.SCRIPTDATA_ARRIVED, e => {
-          //   console.log('mpegtsjs', mpegtsjs.Events.SCRIPTDATA_ARRIVED, e)
-          // })
-          player.on(mpegtsjs.Events.STATISTICS_INFO, this.onVideoStatisticsInfo)
-          this.$player = player
-          this.onVideoWaiting()
-          const videoElm = this.$refs.video
-          player.attachMediaElement(videoElm)
-          videoElm.removeEventListener('progress', this.onVideoProgress)
-          videoElm.addEventListener('progress', this.onVideoProgress)
-          player.load()
-        } catch (error) {
-          console.log('连接异常', error)
-          this.onVideoDestroyByError('连接异常')
-        }
+        this.$videoUrl = url
+        this.initPlayer()
       } else {
         this.destroyPlayer()
         this.$message({
@@ -143,15 +165,7 @@ export default {
       this.loading = false
       this.waiting = false
       this.paused = true
-      this.$lastDecodedFrames = null
-      const player = this.$player
-      if (player) {
-        this.$player = null
-        player.pause()
-        player.unload()
-        player.detachMediaElement()
-        player.destroy()
-      }
+      this.releasePlayer()
     },
     onFullScreen () {
       if (this.$listeners.fullscreen) {
@@ -223,34 +237,15 @@ export default {
     onVideoPause () {
       console.log('onVideoPause')
       this.paused = true
-      if (this.waiting) {
-        this.waiting = false
-        clearTimeout(this.$timer)
-      }
+      this.waiting = false
     },
     onVideoWaiting () {
-      if (this.keep) {
-        return
-      }
       console.log('onVideoWaiting')
       this.waiting = true
-      clearTimeout(this.$timer)
-      this.$timer = setTimeout(() => {
-        if (this.loading || this.waiting) {
-          this.onVideoDestroyByError(
-            this.loading
-              ? '暂未获取到视频流，请稍后重试'
-              : '数据量太小无法继续播放，请稍后重试'
-          )
-        }
-      }, 120000)
     },
     onVideoPlaying () {
       console.log('onVideoPlaying')
-      if (this.waiting) {
-        this.waiting = false
-        clearTimeout(this.$timer)
-      }
+      this.waiting = false
     },
     onVideoError (e) {
       console.log('onVideoError', e)