From 8d88218e7c117df5823d99d00456edb8b501d3c3 Mon Sep 17 00:00:00 2001
From: Joe <1712833832@qq.com>
Date: Wed, 17 Jan 2024 14:57:11 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=20=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/package.json                         |  1 +
 .../components/Video/flv-stream.js            | 41 +++++++++++++++++++
 .../components/Video/videoStream.js           | 20 ++++-----
 3 files changed, 50 insertions(+), 12 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/components/Video/flv-stream.js

diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index 4a4c3840..3a0fd127 100644
--- a/ruoyi-ui/package.json
+++ b/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",
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Video/flv-stream.js b/ruoyi-ui/src/views/JiHeExpressway/components/Video/flv-stream.js
new file mode 100644
index 00000000..5e6fc116
--- /dev/null
+++ b/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;
+}
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Video/videoStream.js b/ruoyi-ui/src/views/JiHeExpressway/components/Video/videoStream.js
index 5e6fc116..be75edd2 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Video/videoStream.js
+++ b/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(
-    "%c [ flvPlayer ]-26-「videoStream.js」",
-    "font-size:15px; background:#b2b540; color:#f6f984;",
-    flvPlayer
-  );
-
-  flvPlayer.attachMediaElement(container);
+  player.attachMediaElement(container);
 
-  flvPlayer.load();
-  flvPlayer.play();
+  player.load();
+  player.play();
 
-  return flvPlayer;
+  return player;
 }