对摄像头间歇性变暗及摄像头配置传参问题进行修改-提交

src/components/vent/camera/LivePlayerWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="videoEl" style="width: 100%; height: 100%">
+  <div ref="videoEl" class="live-player-wrapper" style="width: 100%; height: 100%">
     <live-player ref="player" :video-url="src" live stretch autoplay muted controls style="width: 100%; height: 100%" @error="handleError" />
   </div>
 </template>
@@ -57,5 +57,19 @@
 </script>
 
 <style scoped>
-  /* 添加scoped样式避免影响其他组件 */
+  /* 断流重连时避免 video.js 黑色 poster/modal 突然压暗画面 */
+  .live-player-wrapper :deep(.vjs-modal-dialog),
+  .live-player-wrapper :deep(.vjs-loading-spinner),
+  .live-player-wrapper :deep(.vjs-big-play-button),
+  .live-player-wrapper :deep(.vjs-poster) {
+    display: none !important;
+    opacity: 0 !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+  }
+
+  .live-player-wrapper :deep(video),
+  .live-player-wrapper :deep(.video-js) {
+    opacity: 1 !important;
+  }
 </style>

src/design/vent/comment.less

@@ -237,6 +237,27 @@
     white-space: nowrap;
     text-overflow: ellipsis;
   }
+
+  // 避免断流/缓冲/重连时播放器遮罩突然压暗画面
+  .xgplayer-enter,
+  .xgplayer-loading,
+  .xgplayer-start,
+  .xgplayer-error,
+  .xgplayer-poster,
+  .xgplayer-replay,
+  .vjs-modal-dialog,
+  .vjs-loading-spinner,
+  .vjs-big-play-button,
+  .vjs-poster {
+    display: none !important;
+    opacity: 0 !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+  }
+
+  video {
+    opacity: 1 !important;
+  }
 }
 
 #LivePlayerBox {
@@ -263,6 +284,29 @@
     //     background-size: cover;
     //   }
   }
+
+  // 避免断流/缓冲/重连时播放器遮罩突然压暗画面
+  .xgplayer-enter,
+  .xgplayer-loading,
+  .xgplayer-start,
+  .xgplayer-error,
+  .xgplayer-poster,
+  .xgplayer-replay,
+  .vjs-modal-dialog,
+  .vjs-loading-spinner,
+  .vjs-big-play-button,
+  .vjs-poster {
+    display: none !important;
+    opacity: 0 !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+  }
+
+  video,
+  .xgplayer,
+  .video-js {
+    opacity: 1 !important;
+  }
 }
 
 @keyframes breathe {

src/hooks/system/useCamera.ts

@@ -128,7 +128,7 @@ export function useCamera() {
                   videoDom.volume = 0;
                   videoDom.setAttribute('class', 'rtspVideo');
                   videoDom.setAttribute('muted', 'muted');
-                  videoDom.setAttribute('poster', '/src/assets/images/vent/noSinge.png');
+                  // 不设置 poster，避免断流重连时暗色封面闪现压暗画面
                   videoDom.autoplay = true;
 
                   try {
@@ -201,7 +201,7 @@ export function useCamera() {
                 url: videoParent[1].addr,
                 width: 294,
                 height: 188,
-                poster: '/src/assets/images/vent/noSinge.png',
+                poster: '',
                 plugins: [FlvPlugin],
                 fluid: true,
                 autoplay: true,
@@ -209,7 +209,7 @@ export function useCamera() {
                 playsinline: true,
                 screenShot: true,
                 whitelist: [''],
-                ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
+                ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate', 'poster', 'start', 'enter', 'loading', 'error', 'replay'],
                 closeVideoClick: true,
                 customConfig: {
                   isClickPlayBack: false,
@@ -247,8 +247,8 @@ export function useCamera() {
                   autoplay: true,
                   autoplayMuted: true,
                   cors: true,
-                  ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
-                  poster: '/src/assets/images/vent/noSinge.png',
+                  ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate', 'poster', 'start', 'enter', 'loading', 'error', 'replay'],
+                  poster: '',
                   defaultPlaybackRate: videoParent[1].cameraRate || 1,
                   controlsList: ['nodownload', 'nofullscreen', 'noremoteplayback'],
                   hls: {
@@ -276,9 +276,9 @@ export function useCamera() {
                   isLive: true,
                   autoplay: true,
                   autoplayMuted: true,
-                  ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
+                  ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate', 'poster', 'start', 'enter', 'loading', 'error', 'replay'],
                   plugins: [HlsPlugin], // 第二步
-                  poster: '/src/assets/images/vent/noSinge.png',
+                  poster: '',
                   defaultPlaybackRate: videoParent[1].cameraRate || 1,
                   controlsList: ['nodownload', 'nofullscreen', 'noremoteplayback'],
                   hls: {
@@ -374,7 +374,7 @@ export function useCamera() {
         url: cameraUrl,
         width: option.width,
         height: option.height,
-        poster: '/src/assets/images/vent/noSinge.png',
+        poster: '',
         plugins: [FlvPlugin],
         fluid: true,
         autoplay: true,
@@ -382,7 +382,7 @@ export function useCamera() {
         playsinline: true,
         screenShot: true,
         whitelist: [''],
-        ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
+        ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate', 'poster', 'start', 'enter', 'loading', 'error', 'replay'],
         closeVideoClick: true,
         customConfig: {
           isClickPlayBack: false,
@@ -419,8 +419,8 @@ export function useCamera() {
           autoplay: true,
           autoplayMuted: true,
           cors: true,
-          ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
-          poster: '/src/assets/images/vent/noSinge.png',
+          ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate', 'poster', 'start', 'enter', 'loading', 'error', 'replay'],
+          poster: '',
           defaultPlaybackRate: cameraRate || 1,
           controlsList: ['nodownload', 'nofullscreen', 'noremoteplayback'],
           hls: {
@@ -448,9 +448,9 @@ export function useCamera() {
           isLive: true,
           autoplay: true,
           autoplayMuted: true,
-          ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
+          ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate', 'poster', 'start', 'enter', 'loading', 'error', 'replay'],
           plugins: [HlsPlugin], // 第二步
-          poster: '/src/assets/images/vent/noSinge.png',
+          poster: '',
           defaultPlaybackRate: cameraRate || 1,
           controlsList: ['nodownload', 'nofullscreen', 'noremoteplayback'],
           hls: {

src/hooks/system/useCameraPianation.ts

@@ -133,7 +133,7 @@ export function useCamera() {
                   videoDom.volume = 0;
                   videoDom.setAttribute('class', 'rtspVideo');
                   videoDom.setAttribute('muted', 'muted');
-                  videoDom.setAttribute('poster', '/src/assets/images/vent/noSinge.png');
+                  // 不设置 poster，避免断流重连时暗色封面闪现压暗画面
                   videoDom.autoplay = true;
 
                   try {
@@ -206,7 +206,7 @@ export function useCamera() {
                 url: videoParent[1].addr,
                 width: 294,
                 height: 188,
-                poster: '/src/assets/images/vent/noSinge.png',
+                poster: '',
                 plugins: [FlvPlugin],
                 fluid: true,
                 autoplay: true,
@@ -214,7 +214,7 @@ export function useCamera() {
                 playsinline: true,
                 screenShot: true,
                 whitelist: [''],
-                ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
+                ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate', 'poster', 'start', 'enter', 'loading', 'error', 'replay'],
                 closeVideoClick: true,
                 customConfig: {
                   isClickPlayBack: false,
@@ -252,8 +252,8 @@ export function useCamera() {
                   autoplay: true,
                   autoplayMuted: true,
                   cors: true,
-                  ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
-                  poster: '/src/assets/images/vent/noSinge.png',
+                  ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate', 'poster', 'start', 'enter', 'loading', 'error', 'replay'],
+                  poster: '',
                   defaultPlaybackRate: videoParent[1].cameraRate || 1,
                   controlsList: ['nodownload', 'nofullscreen', 'noremoteplayback'],
                   hls: {
@@ -281,9 +281,9 @@ export function useCamera() {
                   isLive: true,
                   autoplay: true,
                   autoplayMuted: true,
-                  ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
+                  ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate', 'poster', 'start', 'enter', 'loading', 'error', 'replay'],
                   plugins: [HlsPlugin], // 第二步
-                  poster: '/src/assets/images/vent/noSinge.png',
+                  poster: '',
                   defaultPlaybackRate: videoParent[1].cameraRate || 1,
                   controlsList: ['nodownload', 'nofullscreen', 'noremoteplayback'],
                   hls: {
@@ -379,7 +379,7 @@ export function useCamera() {
         url: cameraUrl,
         width: option.width,
         height: option.height,
-        poster: '/src/assets/images/vent/noSinge.png',
+        poster: '',
         plugins: [FlvPlugin],
         fluid: true,
         autoplay: true,
@@ -387,7 +387,7 @@ export function useCamera() {
         playsinline: true,
         screenShot: true,
         whitelist: [''],
-        ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
+        ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate', 'poster', 'start', 'enter', 'loading', 'error', 'replay'],
         closeVideoClick: true,
         customConfig: {
           isClickPlayBack: false,
@@ -424,8 +424,8 @@ export function useCamera() {
           autoplay: true,
           autoplayMuted: true,
           cors: true,
-          ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
-          poster: '/src/assets/images/vent/noSinge.png',
+          ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate', 'poster', 'start', 'enter', 'loading', 'error', 'replay'],
+          poster: '',
           defaultPlaybackRate: cameraRate || 1,
           controlsList: ['nodownload', 'nofullscreen', 'noremoteplayback'],
           hls: {
@@ -453,9 +453,9 @@ export function useCamera() {
           isLive: true,
           autoplay: true,
           autoplayMuted: true,
-          ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate'],
+          ignores: ['time', 'progress', 'play', 'i18n', 'volume', 'fullscreen', 'screenShot', 'playbackRate', 'poster', 'start', 'enter', 'loading', 'error', 'replay'],
           plugins: [HlsPlugin], // 第二步
-          poster: '/src/assets/images/vent/noSinge.png',
+          poster: '',
           defaultPlaybackRate: cameraRate || 1,
           controlsList: ['nodownload', 'nofullscreen', 'noremoteplayback'],
           hls: {

src/utils/ventutil.ts

@@ -141,7 +141,7 @@ export function deviceCameraInit(cameraAddrs, player: HTMLElement, webRtcServerL
                 videoDom.volume = 0;
                 videoDom.setAttribute('class', 'rtspVideo');
                 videoDom.setAttribute('muted', 'muted');
-                videoDom.setAttribute('poster', '/src/assets/images/vent/noSinge.png');
+                // 不设置 poster，避免断流重连时暗色封面闪现压暗画面
                 videoDom.autoplay = true;
                 videoParentDom.appendChild(videoDom);
                 cameraNameDom = document.createElement('div');
@@ -218,7 +218,7 @@ export function deviceCameraInit(cameraAddrs, player: HTMLElement, webRtcServerL
               videoUrl: videoParentDom[1].addr,
               videoTitle: videoParentDom[1].name,
               alt: '无信号',
-              poster: '/src/assets/images/vent/noSinge.png',
+              poster: '',
             }),
             videoDom
           );
@@ -232,7 +232,7 @@ export function deviceCameraInit(cameraAddrs, player: HTMLElement, webRtcServerL
               videoUrl: videoParentDom[1].addr,
               videoTitle: videoParentDom[1].name,
               alt: '无信号',
-              poster: '/src/assets/images/vent/noSinge.png',
+              poster: '',
             }),
             videoDom
           );

src/views/vent/deviceManager/comment/cameraTabel/camera.data.ts

@@ -1,7 +1,7 @@
 import { BasicColumn } from '/@/components/Table';
 
-const MANUFACTURER_HIKVISION = 'rtsp://admin:admin123@192.168.0.64:554/Streaming/Channels/1';
-const MANUFACTURER_DAHUA = 'http://0.0.0.0:8080/live/';
+const MANUFACTURER_HIKVISION = 'haikang';
+const MANUFACTURER_DAHUA = 'dahua';
 
 const manufacturerOptions = [
   {