强制观摩404重新请求打开接口播放

src/views/bigScreen/map/index.vue

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2024-01-09 23:08:15
  * @LastEditors: JC9527
- * @LastEditTime: 2024-08-15 11:05:25
+ * @LastEditTime: 2024-08-15 16:35:22
 -->
 <template>
   <div class="map-main">
@@ -622,6 +622,7 @@ export default {
       onIcon:null,
       offIcon:null,
       videoPoint:[],
+      videoUrl:"",
     };
   },
   methods: {
@@ -1366,24 +1367,28 @@ export default {
       }
     },
     // 播放监控视频
-    initVideoPlayer(videoUrl){
+    initVideoPlayer(){
       this.$nextTick(()=>{
         var videoDom = document.getElementById('flvvideo')
 
-        var player = flvjs.createPlayer({
+        this.player = flvjs.createPlayer({
           type: 'flv', // 媒体类型，默认是 flv,
           isLive: true, // 是否是直播流
           hasAudio: true, // 是否有音频
           hanVideo: true, // 是否有视频
-          url: videoUrl, // 流地址
+          url: this.videoUrl, // 流地址
         },{
           // 其他的配置项可以根据项目实际情况参考 api 去配置
           autoCleanupMinBackwardDuration: true, // 清除缓存 对 SourceBuffer 进行自动清理
         })
-        player.attachMediaElement(videoDom)
-        player.load()
-        player.play()
-        this.player = player;
+        this.player.attachMediaElement(videoDom)
+        try {
+          this.player.load();
+          this.player.play();
+          this.listenVideo();
+        } catch (error) {
+          console.log(error);
+        }
         // 视频卡顿导致流断了，那就重连
         // this.player.on(flvjs.Events.ERROR,(errType, errDetail)=>{
         //   // console.log(errType,'errTypeerrTypeerrType');
@@ -1393,7 +1398,6 @@ export default {
         //     this.initVideoPlayer(videoUrl)
         //   }
         // })
-        this.instantaneity(this.player,videoUrl)
       })
     },
     destroyVideos() {
@@ -1404,29 +1408,61 @@ export default {
       this.player.destroy();
       this.player = null;
     },
-    // 可能会有卡顿的情况 重新去拉流由于视频会延时 为保证实时性，我们可以跳帧
-    instantaneity(player,videoUrl){
-      this.timer = setInterval(() => {
-        if (player && player.buffered && player.buffered.length) {
-          let end = player.buffered.end(0);     // 获取当前buffered值
-          let diff = end - player.currentTime;  // 获取buffered与currentTime的差值
-          if (diff >= 3) {// 如果差值大于等于3s 手动跳帧 这里可根据自身需求来定
-            //单个视频
-            player.currentTime = end;//手动跳帧
-            player.currentTime = player.buffered.end(0);//手动跳帧
-
-            // 多个视频
-            clearInterval(this.timer)
-            // player.pause();
-            // player.unload();
-            // player.detachMediaElement();
-            // player.destroy();
-            // player= null;
-            //重新加载当前停止的视频流，根据个人的方法来配置
-            this.initVideoPlayer(videoUrl)
-          }
-        }
-      }, 2000); //2000毫秒执行一次
+    // 监听视频流是否断流或者卡顿
+    listenVideo() {
+      const that = this;
+      if(this.player) {
+        this.player.on(
+            flvjs.Events.ERROR,
+            (errorType, errorDetail, errorInfo) => {
+                // console.log("errorType", errorType);
+                // console.log("errorDetail", errorDetail);
+                // console.log("errorInfo", errorInfo);
+                if(errorInfo.code == 404) {
+                  setTimeout(()=>{
+                    videoSurveillance({
+                      ...that.videoCondition,
+                      destID:that.personInfo.info.userId,
+                      imei:that.personInfo.info.imei
+                    }).then((res) => {
+                      if (res.code == 200 && res.data.msg == "操作成功") {
+                        setTimeout(()=>{
+                          that.videoUrl = `http://10.236.2.28:54567/bjh-admin-server/jn/live/9999_${that.personInfo.info.userId}.flv`
+                          if(!that.showVideo) {
+                            videoSurveillance({destId:that.personInfo.info.userId,imei:that.personInfo.info.imei,msgType:0}).then(res=>{
+                              that.personInfo.info.userId = "";
+                              that.personInfo.info.imei = "";
+                            })
+                            that.destroyVideos();
+                          } else {
+                            that.initVideoPlayer();
+                          }
+                        },3000);
+                      }
+                    });
+                  },2000)
+                } else {
+                  // 视频出错后销毁重建
+                  that.destroyVideos();
+                  that.initVideoPlayer();
+                }
+            }
+        );
+        // 视频断流
+        this.player.on("statistics_info", function (res) {
+            if(that.lastDecodedFrames === 0){
+                that.lastDecodedFrames = res.decodedFrames
+                return
+            }
+            if(that.lastDecodedFrames != res.decodedFrames){
+                that.lastDecodedFrames = res.decodedFrames
+            }else{
+                that.lastDecodedFrames = 0
+                that.destroyVideos()
+                that.initVideoPlayer()
+            }
+        });
+      }
     },
     // 执法人员强制观摩
     watchClick(){
@@ -1436,7 +1472,8 @@ export default {
           if(res.code == 200 && res.data.msg == '操作成功') {
           // http://121.229.2.163:9291/live/9999   http://120.27.25.166:9305/live/9999_
             setTimeout(()=>{
-              this.initVideoPlayer(`http://10.236.2.28:54567/bjh-admin-server/jn/live/9999_${this.personInfo.info.userId}.flv`)
+              this.videoUrl = `http://10.236.2.28:54567/bjh-admin-server/jn/live/9999_${this.personInfo.info.userId}.flv`
+              this.initVideoPlayer()
             },3000)
           }
         })