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; }