监控添加16窗口

public/dahua/demo.html

@@ -113,6 +113,8 @@
     <script type="text/javascript" src="/dahua/lib/WSPlayer/WSPlayer.js"></script>
     <script type="module">
         //获取参数real
+        let SelectedNum = 0
+        let luNum = 1
         let isReal = window.location.href.indexOf('real') !== -1 ? true : false;
         if (isReal) {
             document.getElementsByClassName('record-container')[0].style.display = 'none';
@@ -135,9 +137,15 @@
             console.log('接收到消息：', event.data);
             if (event.data === 'reload') {
                 location.reload()
+            } else if (event.data.type === 'clear') {
+                SelectedNum = {playIndex: 0}
             } else if (event.data.type === 'startVideo') {
                 cameraInfo = event.data.data;
-                playReal()
+                if (luNum == 1) {
+                    playReal()
+                } else {
+                    playReal(cameraInfo)
+                }
             }
             else if (event.data.type === 'playRecord') {
                 recordInfo = event.data.data;
@@ -182,8 +190,8 @@
         var realPlayer = new PlayerManager({
             el: "ws-real-player", /** 实时预览容器id，创建多个播放器，传入不同的容器id即可 **/
             type: 'real', /** real - 实时预览  record - 录像回放 **/
-            maxNum: 25,  /** 一个播放器上限能播放的路数，可根据实际情况设置，支持 1 4 9 16 25 **/
+            maxNum: 16,  /** 一个播放器上限能播放的路数，可根据实际情况设置，支持 1 4 9 16 25 **/
-            num: 1,   /** 初始化，页面显示的路数 **/
+            num: 16,   /** 初始化，页面显示的路数 **/
             showControl: true, /** 是否显示工具栏，默认显示 **/
             prefixUrl: 'dahua/lib', /** 解码库所在位置的前缀 **/
             receiveMessageFromWSPlayer: (methods, data, err) => { /* 回调函数，可以在以下回调函数里面做监听 */
@@ -203,7 +211,7 @@
                         console.log(data.selectIndex) // 窗口序号，从 0
                         break;
                     case "realSuccess": // 实时预览成功
-                        window.parent.postMessage({type: 'realSuccess'}, '*')
+                        window.parent.postMessage({ type: 'realSuccess' }, '*')
                         console.log("实时预览成功")
                         break;
                     case "realError": // 实时预览失败
@@ -216,9 +224,11 @@
                         console.log("对讲失败");
                         break;
                     case 'selectWindowChanged': // 选中的窗口发生改变
+                        SelectedNum = data
                         console.log(data, "返回窗口信息")
                         break;
                     case 'windowNumChanged': // 播放器显示的路数发生改变
+                        luNum = data
                         console.log(data, "返回显示的窗口数量")
                         break;
                     case 'closeVideo': // 视频关闭回调
@@ -238,21 +248,22 @@
         })
 
         // 流地址方式播放实时预览
-        function playReal() {
+        function playReal(newVideo) {
+            let info = newVideo || cameraInfo;
             let wsURL = `ws://59.47.183.182:9100`
-            let rtspURL = `${cameraInfo.url}?token=${cameraInfo.token}`.replace(/\$/g, "%24").replace(/&/g, "%26");
+            let rtspURL = `${info.url}?token=${info.token}`.replace(/\$/g, "%24").replace(/&/g, "%26");
             let streamType = 1
-            let channelId = cameraInfo.channelId
+            let channelId = info.channelId
             console.log('params :>> ', {
                 wsURL,
                 rtspURL,
                 streamType,
-                channelId
+                channelId,
             });
             realPlayer.realByUrl({
                 rtspURL, // 必传
                 wsURL, // 必传
-                selectIndex: 0, // 必传, 播放窗口号
+                selectIndex: SelectedNum.playIndex, // 必传, 播放窗口号
                 channelId, // 必传, 通道id
                 streamType, // 必传, 码流类型，
                 playerAdapter: 'stretching', // 选传, selfAdaption 自适应 | stretching 拉伸
@@ -324,6 +335,7 @@
                         // }))
                         break;
                     case 'selectWindowChanged': // 选中的窗口发生改变
+
                         console.log(data, "返回窗口信息")
                         break;
                     case 'windowNumChanged': // 播放器显示的路数发生改变

src/views/large-screen/video.vue

@@ -9,17 +9,33 @@ const state = reactive({
   isShow: false
 })
 const switchCamera = (index) => {
-  state.currentCameraIndex = index;
+  if (index == 0 || !index) {
-  startVideo();
+    let video = document.getElementById('video')
+    video.contentWindow.postMessage({
+      type: 'clear',
+    }, '*')
+    for (let i = 1; i <= 16; i++) {
+      setTimeout(()=>{
+        state.currentCameraIndex = i;
+        startVideo();
+        if(i == 16) state.currentCameraIndex = 0;
+      },300)
+    }
+    
+  } else {
+    state.currentCameraIndex = index;
+    startVideo();
+  }
+
 }
 const startVideo = () => {
   let index = state.currentCameraIndex;
-  let channelCode = state.cameraList[index].units && state.cameraList[index].units[0].channels[0].channelCode;
+  let channelCode = state.cameraList[index] && state.cameraList[index].units && state.cameraList[index].units[0].channels[0].channelCode;
   if (!channelCode) {
-    ElMessage({
+    // ElMessage({
-      message: '设备异常',
+    //   message: '设备异常',
-      type: 'error'
+    //   type: 'error'
-    })
+    // })
     return;
   }
   getRtspUrl({
@@ -107,20 +123,25 @@ onMounted(async () => {
     "pageNum": 1,
     "pageSize": 100,
   }).then((res) => {
-    state.cameraList = res.data.pageData
+    state.cameraList = [{
-    const index = state.cameraList.findIndex(item => item.isOnline == 1);
+      deviceName: '全部',
-    state.currentCameraIndex = index
+      isOnline: '00'
+    }, ...res.data.pageData]
+    // const index = state.cameraList.findIndex(item => item.isOnline == 1);
+    // state.currentCameraIndex = index
   }).catch((err) => {
   });
   // 监听子页面的消息
   window.addEventListener('message', (event) => {
     console.log('event :>> ', event.data);
     if (event.data.type === 'startVideo') {
-      startVideo();
+      switchCamera();
+      state.isShow = true
     } else if (event.data.type === 'playRecord') {
       playRecord(event.data.date);
     } else if (event.data.type == "realSuccess") {
-      state.isShow = true
+
+
     }
   });
 })
@@ -139,8 +160,10 @@ defineExpose({
         <div style="width:4.375rem;margin-right: 1.25rem;text-align: center;position: relative;">
           <texttooltip :content="camera.deviceName" :class="state.currentCameraIndex === index ? 'wid202' : 'wid201'"
             refName=" tooltipOverd"></texttooltip>
-          <el-tag style="scale: 0.7;position: absolute;top:-1.25rem;right:-.9375rem;border-radius: 1.25rem;"
+          <el-tag v-if="camera.isOnline != '00'"
-            :type="camera.isOnline == 1 ? 'success' : 'danger'">{{ camera.isOnline == 1 ? '在线' : '离线' }}</el-tag>
+            style="scale: 0.7;position: absolute;top:-1.25rem;right:-.9375rem;border-radius: 1.25rem;"
+            :type="camera.isOnline == 1 ? 'success' : 'danger'">{{ camera.isOnline == 1 ? '在线' :
+          '离线' }}</el-tag>
         </div>
       </div>
       <!-- <template v-for="(camera, index) in state.cameraList" :key="index">
@@ -154,7 +177,8 @@ defineExpose({
       <iframe v-if="state.cameraList.length > 0" id="video" src="/dahua/demo.html?real=true"
         style="width:100%;height:100%;" frameborder="0"></iframe>
     </div>
-    <div  v-show="!state.isShow" element-loading-background="black" element-loading-text="正在加载中..." v-loading="!state.isShow"  class="camera-display">
+    <div v-show="!state.isShow" element-loading-background="black" element-loading-text="正在加载中..."
+      v-loading="!state.isShow" class="camera-display">
     </div>
   </div>
 </template>