类型：开发

描述：

package-lock.json

@@ -15,6 +15,7 @@
         "hls.js": "^1.5.18",
         "jssip": "^3.10.1",
         "lodash": "^4.17.21",
+        "mpegts.js": "^1.8.0",
         "pinia": "^2.2.6",
         "pinia-plugin-persistedstate": "^4.2.0",
         "pubsub-js": "^1.9.5",
@@ -3201,6 +3202,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
+      "license": "MIT"
+    },
     "node_modules/esbuild": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz",
@@ -4272,6 +4279,16 @@
         "ufo": "^1.5.4"
       }
     },
+    "node_modules/mpegts.js": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/mpegts.js/-/mpegts.js-1.8.0.tgz",
+      "integrity": "sha512-ZtujqtmTjWgcDDkoOnLvrOKUTO/MKgLHM432zGDI8oPaJ0S+ebPxg1nEpDpLw6I7KmV/GZgUIrfbWi3qqEircg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "es6-promise": "^4.2.5",
+        "webworkify-webpack": "github:xqq/webworkify-webpack"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -6143,6 +6160,11 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/webworkify-webpack": {
+      "version": "2.1.5",
+      "resolved": "git+ssh://git@github.com/xqq/webworkify-webpack.git#24d1e719b4a6cac37a518b2bb10fe124527ef4ef",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -16,6 +16,7 @@
     "hls.js": "^1.5.18",
     "jssip": "^3.10.1",
     "lodash": "^4.17.21",
+    "mpegts.js": "^1.8.0",
     "pinia": "^2.2.6",
     "pinia-plugin-persistedstate": "^4.2.0",
     "pubsub-js": "^1.9.5",

src/views/monitor/components/box-2.vue

@@ -528,7 +528,7 @@
 	  if(val==3){
 		  params.businessVideoDisplayPosition = ''
 	  }else{
-		 params.businessVideoDisplayPosition = navList.value[current.value].dictValue
+      params.businessVideoDisplayPosition = navList.value[current.value]
 	  }
 
       let res = await getVideoListApi(params)
@@ -536,46 +536,10 @@
       if (res.data.length > 0) {
 
         videoList.value = res.data
-		// console.log(videoList.value,'1111111111111111111111')
-		// postVideoRemain()
         nextTick(() => {
           videoList.value.forEach(async (x, index) => {
-            const video = document.getElementById(`monitorVideo${index}`)
-            const hls = new Hls({
-              maxBufferLength: 10, // 最大缓冲长度（秒）
-              maxMaxBufferLength: 15, // 缓冲区长度的上限
-              maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-            })
-            hls.loadSource(x.hlsUrl)
-            hls.attachMedia(video)
-            hls.on(Hls.Events.MANIFEST_PARSED, () => {
-              video.play()
-            })
-			 hls.on(Hls.Events.ERROR, (event, data) => {
-				 // console.error('HLS 播放器遇到错误:', data);
-				 // hls.startLoad();
-				 // initVideo()
-				   // 根据错误类型进行处理
-				  if (data.fatal) {
-					switch (data.type) {
-					  case Hls.ErrorTypes.NETWORK_ERROR:
-						console.log('网络错误，尝试重新加载');
-						hls.startLoad();
-						break;
-					  case Hls.ErrorTypes.MEDIA_ERROR:
-						console.log('媒体错误，尝试修复');
-						hls.recoverMediaError();
-						break;
-					  default:
-						console.log('无法恢复的错误，销毁播放器');
-
-						// hls.destroy();
-						break;
-					}
-				  }
-			 })
-
-            hlsRefs.push(hls)
+            const videoElement = document.getElementById(`monitorVideo${index}`)
+            createPlayer(x.cameraIndexCode,videoElement);
           })
         })
       } else {