修改hls

ruoyi-ui/package.json

@@ -24,7 +24,7 @@
     "url": "https://gitee.com/y_project/RuoYi-Vue.git"
   },
   "dependencies": {
-    "@liveqing/liveplayer": "^2.7.40",
+    "@ezuikit/player-hls": "^0.1.5",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.30.3",
     "clipboard": "2.0.8",

ruoyi-ui/public/index.html

@@ -6,7 +6,6 @@
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <script type="text/javascript" src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script>
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 	  <style>

ruoyi-ui/src/components/EzvizHlsPlayer/index.vue

@@ -0,0 +1,166 @@
+<template>
+  <div :id="containerId" ref="containerRef" class="ezviz-hls-player" />
+</template>
+
+<script>
+import HlsPlayer from "@ezuikit/player-hls"
+
+let containerSeq = 0
+
+export default {
+  name: "EzvizHlsPlayer",
+  props: {
+    url: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    containerSeq += 1
+    return {
+      containerId: `ezviz-hls-player-${containerSeq}`,
+      player: null,
+      resizeObserver: null
+    }
+  },
+  computed: {
+    decoderStaticPath() {
+      const base = process.env.BASE_URL || "/"
+      return `${base}ezuikit-player-hls/`
+    }
+  },
+  watch: {
+    url(val) {
+      this.rebuildPlayer(val)
+    }
+  },
+  mounted() {
+    this.bindResizeObserver()
+    if (this.url) {
+      this.$nextTick(() => {
+        this.initPlayer(this.url)
+      })
+    }
+  },
+  beforeDestroy() {
+    this.unbindResizeObserver()
+    this.destroyPlayer()
+  },
+  methods: {
+    getContainerSize() {
+      const el = this.$refs.containerRef
+      if (!el) {
+        return { width: 0, height: 0 }
+      }
+      const parent = el.parentElement
+      const width = el.clientWidth || (parent && parent.clientWidth) || el.offsetWidth || 0
+      const height = el.clientHeight || (parent && parent.clientHeight) || el.offsetHeight || 0
+      return { width, height }
+    },
+    bindResizeObserver() {
+      if (typeof ResizeObserver === "undefined") {
+        return
+      }
+      this.resizeObserver = new ResizeObserver(() => {
+        this.syncPlayerSize()
+      })
+      this.$nextTick(() => {
+        const el = this.$refs.containerRef
+        if (el && el.parentElement) {
+          this.resizeObserver.observe(el.parentElement)
+        }
+      })
+    },
+    unbindResizeObserver() {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect()
+        this.resizeObserver = null
+      }
+    },
+    syncPlayerSize() {
+      if (!this.player || typeof this.player.resize !== "function") {
+        return
+      }
+      const { width, height } = this.getContainerSize()
+      if (width > 0 && height > 0) {
+        this.player.resize(width, height)
+      }
+    },
+    destroyPlayer() {
+      if (this.player) {
+        try {
+          this.player.destroy()
+        } catch (e) {
+          // ignore teardown errors
+        }
+        this.player = null
+      }
+      const el = this.$refs.containerRef
+      if (el) {
+        el.innerHTML = ""
+      }
+    },
+    rebuildPlayer(url) {
+      this.destroyPlayer()
+      if (url) {
+        this.$nextTick(() => {
+          this.initPlayer(url)
+        })
+      }
+    },
+    initPlayer(url, retryCount = 0) {
+      const text = url != null ? String(url).trim() : ""
+      if (!text) {
+        return
+      }
+      const el = document.getElementById(this.containerId)
+      if (!el) {
+        return
+      }
+      el.innerHTML = ""
+      const { width, height } = this.getContainerSize()
+      if (width <= 0 || height <= 0) {
+        if (retryCount < 8) {
+          requestAnimationFrame(() => {
+            this.initPlayer(url, retryCount + 1)
+          })
+        }
+        return
+      }
+      this.player = new HlsPlayer({
+        id: this.containerId,
+        url: text,
+        staticPath: '/',
+        isLive: true,
+        width,
+        height
+      })
+      this.player.play().catch(() => {
+        this.$emit("error")
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ezviz-hls-player {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #000;
+}
+
+.ezviz-hls-player ::v-deep .ezui-player-container,
+.ezviz-hls-player ::v-deep .ezui-hls-container {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.ezviz-hls-player ::v-deep canvas,
+.ezviz-hls-player ::v-deep video {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: contain;
+}
+</style>

ruoyi-ui/src/lang/bo/videoSurveillance.js

@@ -58,6 +58,7 @@ export default {
     confirmDelete: "ཐོ་གཞུང་འདི་སུབ་རྒྱུ་གཏན་ཁེལ་ལམ？",
     msgLiveNoMonitorId: "摄像头 ID མེད",
     msgLiveNoStream: "བརྙན་ཟློས་མེད",
+    msgLivePlayFail: "播放失败",
     viewMonitorId: "摄像头 ID",
     viewMonitorName: "བརྙན་ཟློས་མིང་།",
     viewOwner: "གཙོ་བོ།",

ruoyi-ui/src/lang/zh/videoSurveillance.js

@@ -58,6 +58,7 @@ export default {
     confirmDelete: "是否确认删除这条数据？",
     msgLiveNoMonitorId: "该监控点位缺少摄像头 ID，无法获取播放地址",
     msgLiveNoStream: "暂无直播流",
+    msgLivePlayFail: "直播播放失败，请稍后重试",
     viewMonitorId: "摄像头 ID",
     viewMonitorName: "监控名称",
     viewOwner: "所属主体",

ruoyi-ui/src/views/videoSurveillance/livestockMonitor/index.vue

@@ -232,18 +232,8 @@
       @close="closeLiveView"
     >
       <div v-loading="liveLoading" class="live-player-wrap">
-        <LivePlayer
-          :video-url="liveVideoUrl"
-          :video-title="liveVideoTitle"
-          :alt="vsT('msgLiveNoStream')"
-          live
-          fluent
-          :autoplay="!!liveVideoUrl"
-          stretch
-          aspect="16:9"
-          :controls="true"
-          :muted="true"
-        />
+        <EzvizHlsPlayer v-if="liveVideoUrl" :key="liveVideoUrl" :url="liveVideoUrl" @error="onLivePlayerError" />
+        <div v-else-if="!liveLoading" class="live-player-empty">{{ vsT("msgLiveNoStream") }}</div>
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="closeLiveView">{{ vsCommon("close") }}</el-button>
@@ -253,7 +243,7 @@
 </template>
 
 <script>
-import LivePlayer from "@liveqing/liveplayer"
+import EzvizHlsPlayer from "@/components/EzvizHlsPlayer/index.vue"
 import videoSurveillanceLocaleMixin from "@/mixins/videoSurveillanceLocaleMixin"
 import {
   listLivestockMonitor,
@@ -283,7 +273,7 @@ function createEmptyForm() {
 export default {
   name: "VideoSurveillanceLivestockMonitor",
   components: {
-    LivePlayer
+    EzvizHlsPlayer
   },
   mixins: [videoSurveillanceLocaleMixin],
   data() {
@@ -638,6 +628,9 @@ export default {
       this.liveOpen = false
       this.liveLoading = false
     },
+    onLivePlayerError() {
+      this.$modal.msgError(this.vsT("msgLivePlayFail"))
+    },
     handleSync() {
       this.runSyncWithLoading(() => syncLivestockMonitor())
         .then((res) => {
@@ -714,8 +707,20 @@ export default {
 
 .live-player-wrap {
   position: relative;
+  display: flex;
   width: 100%;
   height: 540px;
+  overflow: hidden;
   background: #000;
 }
+
+.live-player-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: #909399;
+  font-size: 14px;
+}
 </style>

ruoyi-ui/vue.config.js

@@ -79,11 +79,6 @@ module.exports = {
         minRatio: 0.8,                                 // 压缩比例，小于 80% 的文件不会被压缩
         deleteOriginalAssets: false                    // 压缩后删除原文件
       }),
-      new CopyPlugin([
-        { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},
-        { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},
-        { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'},
-      ])
     ],
   },
   chainWebpack(config) {