视频 修改

ruoyi-ui/package.json

@@ -73,6 +73,7 @@
     "lodash": "^4.17.21",
     "mathjs": "^11.7.0",
     "moment": "^2.29.1",
+    "mpegts.js": "^1.7.3",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",

ruoyi-ui/src/views/JiHeExpressway/components/Video/flv-stream.js

@@ -0,0 +1,41 @@
+import flvJs from "flv.js";
+import { getCameraStream } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+
+/**
+ *
+ * @param {HTMLElement} container 容器
+ * @param {{camId?: string; url?: string}?} options {camId: 相机ID; url: 直播地址}
+ * @returns
+ */
+export async function openVideoStream(container, { camId, url } = {}) {
+  if (camId) {
+    const { code, data } = await getCameraStream(camId).catch(() => ({}));
+
+    if (code != 200) return;
+
+    url = data.liveUrl;
+  }
+
+  if (!url) return;
+
+  const flvPlayer = flvJs.createPlayer({
+    type: "flv",
+    url: url,
+    isLive: true,
+    hasVideo: true,
+    hasAudio: true,
+  });
+
+  console.log(
+    "%c [ flvPlayer ]-26-「videoStream.js」",
+    "font-size:15px; background:#b2b540; color:#f6f984;",
+    flvPlayer
+  );
+
+  flvPlayer.attachMediaElement(container);
+
+  flvPlayer.load();
+  flvPlayer.play();
+
+  return flvPlayer;
+}

ruoyi-ui/src/views/JiHeExpressway/components/Video/videoStream.js

@@ -1,4 +1,4 @@
-import flvJs from "flv.js";
+import mpegts from "mpegts.js";
 import { getCameraStream } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
 
 /**
@@ -18,7 +18,9 @@ export async function openVideoStream(container, { camId, url } = {}) {
 
   if (!url) return;
 
-  const flvPlayer = flvJs.createPlayer({
+  console.log(mpegts.getFeatureList().mseLivePlayback);
+
+  const player = mpegts.createPlayer({
     type: "flv",
     url: url,
     isLive: true,
@@ -26,16 +28,10 @@ export async function openVideoStream(container, { camId, url } = {}) {
     hasAudio: true,
   });
 
-  console.log(
+  player.attachMediaElement(container);
-    "%c [ flvPlayer ]-26-「videoStream.js」",
-    "font-size:15px; background:#b2b540; color:#f6f984;",
-    flvPlayer
-  );
-
-  flvPlayer.attachMediaElement(container);
 
-  flvPlayer.load();
+  player.load();
-  flvPlayer.play();
+  player.play();
 
-  return flvPlayer;
+  return player;
 }