路宁新增模块视频摄像头bug修改-提交

public/js/config.js

@@ -4,7 +4,7 @@ const VUE_APP_URL = {
 }
 const History_Type = {
   // type: 'remote', // remote、vent  (remote 代表的是历史查询走的装备院的接口，vent是走的咱们的，目前神东的项目都用remote, 其他矿用vent)
-  type: 'vent', // remote、vent
+  type: 'remote', // remote、vent
   deviceType: []
 }
 

src/views/vent/monitorManager/camera/index.vue

@@ -202,7 +202,6 @@ async function getVideoAddrsSon(Id) {
   clearCamera();
   playerList.value = []
   let res = await getVentanalyCamera({ deviceid: Id })
-  console.log(res, 'xin---------------')
   if (res.records.length != 0) {
     const cameraList = <{ name: string, addr: string }[]>[]
     const cameras = res.records

src/views/vent/monitorManager/ceshi/index.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="container-ln">
         <customHeader>潞宁新增</customHeader>
-        <div class="video-ln">
+        <div class="video-ln" v-if="addrList.length > 0">
             <div v-for="(item, index) in addrList" :key="index" class="video-module">
-                <div class="player-name">{{ item.name }}</div>
+                <div class="player-name">{{ item.name + index }}</div>
                 <div style="padding-top:3px">
                     <template v-if="item.addr.startsWith('rtsp://')">
                         <video :id="`video${index}`" muted autoplay></video>
@@ -196,7 +196,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, onUnmounted, shallowRef } from 'vue'
+import { ref, reactive, onMounted, onUnmounted, shallowRef, nextTick } from 'vue'
 import customHeader from '/@/components/vent/customHeader.vue';
 import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
 import MonitorTable from '../comment/MonitorTable.vue';
@@ -292,7 +292,6 @@ async function getVideoAddrs() {
     ]
     for (let i = 0; i < videoList.length; i++) {
         const item = videoList[i];
-
         if (item['devicekind'] === 'toHKRtsp') {
             // 从海康平台接口获取视频流
             try {
@@ -300,15 +299,9 @@ async function getVideoAddrs() {
                 if (data) {
                     cameraList.push({ name: item['name'], addr: data['url'] });
                 }
-                // cameraList.push({
-                //   name: item['name'],
-                //   // addr: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8'
-                //   addr: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8',
-                // });
             } catch (error) {
 
             }
-
         } else {
             if (item['addr'].includes('0.0.0.0')) {
                 item['addr'] = item['addr'].replace('0.0.0.0', window.location.hostname)
@@ -317,6 +310,7 @@ async function getVideoAddrs() {
         }
     }
     addrList.value = cameraList
+    getVideo()
 }
 function goFullScreen(domId) {
     const videoDom = document.getElementById(domId) as HTMLVideoElement
@@ -347,86 +341,29 @@ function clearCamera() {
     playerList.value = []
 }
 function setNoRtspVideo(id, videoAddr) {
-    const fileExtension = videoAddr.split('.').pop();
-    if (fileExtension === 'flv') {
-        const player = new Player({
-            lang: 'zh',
-            id: id,
-            url: videoAddr,
-            width: 589,
-            height: 330,
-            poster: '/src/assets/images/vent/noSinge.png',
-            plugins: [FlvPlugin],
-            fluid: true,
-            autoplay: true,
-            isLive: true,
-            playsinline: true,
-            screenShot: true,
-            whitelist: [''],
-            ignores: ['time'],
-            closeVideoClick: true,
-            customConfig: {
-                isClickPlayBack: false
-            },
-            flv: {
-                retryCount: 3, // 重试 3 次，默认值
-                retryDelay: 1000, // 每次重试间隔 1 秒，默认值
-                loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
-                fetchOptions: {
-                    // 该参数会透传给 fetch，默认值为 undefined
-                    mode: 'cors'
-                },
-                targetLatency: 10, // 直播目标延迟，默认 10 秒
-                maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
-                disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
-                maxJumpDistance: 10,
-            }
-        });
-        playerList.value.push(player)
-    }
-    if (fileExtension === 'm3u8') {
-        let player
-        if (document.createElement('video').canPlayType('application/vnd.apple.mpegurl')) {
-            // 原生支持 hls 播放
-            player = new Player({
+    nextTick(() => {
+        const fileExtension = videoAddr.split('.').pop();
+        if (fileExtension === 'flv') {
+            const player = new Player({
                 lang: 'zh',
                 id: id,
                 url: videoAddr,
                 width: 589,
                 height: 330,
-                isLive: true,
-                autoplay: true,
-                autoplayMuted: true,
-                cors: true,
                 poster: '/src/assets/images/vent/noSinge.png',
-                hls: {
-                    retryCount: 3, // 重试 3 次，默认值
-                    retryDelay: 1000, // 每次重试间隔 1 秒，默认值
-                    loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
-                    fetchOptions: {
-                        // 该参数会透传给 fetch，默认值为 undefined
-                        mode: 'cors'
-                    },
-                    targetLatency: 10, // 直播目标延迟，默认 10 秒
-                    maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
-                    disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
-                    maxJumpDistance: 10,
-                }
-
-            })
-        } else if (HlsPlugin.isSupported()) { // 第一步
-            player = new Player({
-                lang: 'zh',
-                id: id,
-                url: videoAddr,
-                width: 589,
-                height: 330,
-                isLive: true,
+                plugins: [FlvPlugin],
+                fluid: true,
                 autoplay: true,
-                autoplayMuted: true,
-                plugins: [HlsPlugin], // 第二步
-                poster: '/src/assets/images/vent/noSinge.png',
-                hls: {
+                isLive: true,
+                playsinline: true,
+                screenShot: true,
+                whitelist: [''],
+                ignores: ['time'],
+                closeVideoClick: true,
+                customConfig: {
+                    isClickPlayBack: false
+                },
+                flv: {
                     retryCount: 3, // 重试 3 次，默认值
                     retryDelay: 1000, // 每次重试间隔 1 秒，默认值
                     loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
@@ -439,17 +376,77 @@ function setNoRtspVideo(id, videoAddr) {
                     disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
                     maxJumpDistance: 10,
                 }
-            })
+            });
+            playerList.value.push(player)
         }
-        playerList.value.push(player)
-    }
+        if (fileExtension === 'm3u8') {
+            let player
+            if (document.createElement('video').canPlayType('application/vnd.apple.mpegurl')) {
+                // 原生支持 hls 播放
+                player = new Player({
+                    lang: 'zh',
+                    id: id,
+                    url: videoAddr,
+                    width: 589,
+                    height: 330,
+                    isLive: true,
+                    autoplay: true,
+                    autoplayMuted: true,
+                    cors: true,
+                    poster: '/src/assets/images/vent/noSinge.png',
+                    hls: {
+                        retryCount: 3, // 重试 3 次，默认值
+                        retryDelay: 1000, // 每次重试间隔 1 秒，默认值
+                        loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
+                        fetchOptions: {
+                            // 该参数会透传给 fetch，默认值为 undefined
+                            mode: 'cors'
+                        },
+                        targetLatency: 10, // 直播目标延迟，默认 10 秒
+                        maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
+                        disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
+                        maxJumpDistance: 10,
+                    }
+
+                })
+            } else if (HlsPlugin.isSupported()) { // 第一步
+                player = new Player({
+                    lang: 'zh',
+                    id: id,
+                    url: videoAddr,
+                    width: 589,
+                    height: 330,
+                    isLive: true,
+                    autoplay: true,
+                    autoplayMuted: true,
+                    plugins: [HlsPlugin], // 第二步
+                    poster: '/src/assets/images/vent/noSinge.png',
+                    hls: {
+                        retryCount: 3, // 重试 3 次，默认值
+                        retryDelay: 1000, // 每次重试间隔 1 秒，默认值
+                        loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
+                        fetchOptions: {
+                            // 该参数会透传给 fetch，默认值为 undefined
+                            mode: 'cors'
+                        },
+                        targetLatency: 10, // 直播目标延迟，默认 10 秒
+                        maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
+                        disconnectTime: 10, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
+                        maxJumpDistance: 10,
+                    }
+                })
+            }
+            playerList.value.push(player)
+        }
+    })
+
 }
 
 onMounted(() => {
     getVideoAddrs()
     getMonitor(true);
-    getVideo()
 })
+
 onUnmounted(() => {
     clearCamera()
     if (timer) {
@@ -481,10 +478,12 @@ onUnmounted(() => {
 
         .video-module {
             position: relative;
-            width: 45%;
-            height: 100%;
+            width: 626px;
+            height: 370px;
+            padding: 17px 18px;
             background: url('/@/assets/images/vent/camera_bg.png');
             background-size: 100% 100%;
+            margin: 10px;
 
             .player-name {
                 font-size: 14px;