海康威视实现单个监控全屏（退出全屏），其他监控隐藏

1.核心思想

1. JS_SetWindowControlCallback 设置的消息回调中监听窗口全屏事件
2. 监听到窗口全屏事件时调 JS_HideWnd 插件窗口隐藏接口对除接收到全屏事件的插件窗口外的其它窗口隐藏
3. 监听到窗口退出全屏事件时调 JS_ShowWnd 插件窗口显示窗口对接收到退出全屏事件的插件窗口外的其它窗口显示

2.文件结构

3.核心代码

3.1 步骤一 

子页面demo_embedded_for_iframe.html设置监控操作消息回调

// ② （可选） 设置消息回调 JS_SetWindowControlCallback
        oWebControl.JS_SetWindowControlCallback({
          // cbIntegrationCallBack: console.log,
          cbIntegrationCallBack: function(oData) { // oData 是封装的视频 web 插件回调消息的消息体
            if (oData.responseMsg.type === 5) {
              // 进入全屏/退出全屏消息
              console.log('全屏', oData);
              const msg = oData.responseMsg.msg;
              if (msg.result === 1024) {
                // 进入全屏
                // oWebControl.JS_HideWnd();
                  window.parent.postMessage({
                      action: 'fullScreen',
                      msg: '全屏',
                      cameraIndexCode: myCameraIndexCode,
                  });
              } else {
                // 0x0401(1025)- 退出全屏。
                // oWebControl.JS_ShowWnd();
                  window.parent.postMessage({
                      action: 'exitFullScreen',
                      msg: '退出全屏',
                      cameraIndexCode: myCameraIndexCode,
                  });
              }

            }
          }
        });

3.2 步骤二

VideoFrame.vue文件内 接收子页面的消息并处理，每个父页面进行全屏监控的内码和退出全屏监控的内码监听，对除接收到全屏事件（退出全屏事件）的插件窗口外的其它子页面发送窗口隐藏（窗口显示）信号；

<template>
  <div class="video-frame">
    <iframe
      frameborder="0"
      ref="iframeEle"
    />
  </div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex';
export default {
  props: {
    cameraIndexCode: {
      type: String,
      default: '',
    },
  },
  watch: {
    cameraIndexCode() {
      const iframeWin = this.$refs.iframeEle;
      iframeWin.contentWindow.postMessage({
        action: 'updateCameraIndexCode',
        msg: '更新cameraIndexCode',
        cameraIndexCode: this.cameraIndexCode,
      }, '*');
    },
    fullScreenCameraIndexCode() {
      if (this.fullScreenCameraIndexCode) {
        if (this.fullScreenCameraIndexCode !== this.cameraIndexCode) {
          const iframeWin = this.$refs.iframeEle;
          iframeWin.contentWindow.postMessage({
            action: 'hideWin',
            msg: '隐藏窗口',
          }, '*');
        }
      }
    },
    exitFullScreenCameraIndexCode() {
      if (this.exitFullScreenCameraIndexCode) {
        if (this.exitFullScreenCameraIndexCode !== this.cameraIndexCode) {
          const iframeWin = this.$refs.iframeEle;
          iframeWin.contentWindow.postMessage({
            action: 'showWin',
            msg: '展示窗口',
          }, '*');
        }
      }
    },
  },
  computed: {
    ...mapGetters(['fullScreenCameraIndexCode', 'exitFullScreenCameraIndexCode']),
  },
  data() {
    return {
      scaleX: 1,
      scaleY: 1,
      videoUrl: '/video/demo_embedded_for_iframe.html',
    };
  },
  mounted() {
    // console.log(this);
    const onResize = this.onResize.bind(this); // onResize 绑定新函数 可以使用当前组件的属性和方法
    const changeVideoPos = this.changeVideoPos.bind(this);
    console.log(window);
    window.globalScale.add(onResize);
    window.addEventListener('message', changeVideoPos); // 接收来自子页面的消息，
    this.$once('hook:beforeDestroy', () => {
      window.globalScale.remove(onResize);
      window.removeEventListener('message', changeVideoPos);
    });
    this.setIframe();
  },

  methods: {
    ...mapMutations(['setFullScreenCameraIndexCode', 'setExitFullScreenCameraIndexCode']),
    setIframe() {
      // console.log(this.cameraIndexCode);
      const iframeWin = this.$refs.iframeEle;
      const { clientWidth, clientHeight } = iframeWin.parentNode;
      iframeWin.style.width = clientWidth * this.scaleX + 'px';
      iframeWin.style.height = clientHeight * this.scaleY + 'px';
      setTimeout(() => {
        iframeWin.src = this.videoUrl + '#' + this.cameraIndexCode;
      }, 1000);
    },
    onResize(scaleX = 1, scaleY = 1) {
      this.scaleX = scaleX;
      this.scaleY = scaleY;
    },
    changeVideoPos(e) {
      const iframeWin = this.$refs.iframeEle;
      // console.log(iframeWin);
      // console.log(iframeWin.getBoundingClientRect());
      if (e && e.data) {
        switch (e.data.action) {
          case 'updateInitParam':
            // 用iframe嵌套页面时，如果父页面要获取子页面里面的内容，可以使用contentWindow或者contentDocument
            // contentWindow这是个只读属性
            iframeWin.contentWindow.postMessage({
              action: 'updateInitParam',
              msg: '更新Pos',
              iframeClientPos: iframeWin.getBoundingClientRect(), // 方法返回元素的大小及其相对于视口的位置。
            });
            break;
          case 'fullScreen': {
            const fullScreenCameraIndexCode = e.data.cameraIndexCode;
            this.setFullScreenCameraIndexCode(fullScreenCameraIndexCode);
            this.setExitFullScreenCameraIndexCode('');
          }
            break;
          case 'exitFullScreen': {
            const fullScreenCameraIndexCode = e.data.cameraIndexCode;
            this.setExitFullScreenCameraIndexCode(fullScreenCameraIndexCode);
            this.setFullScreenCameraIndexCode('');
          }
            break;
          default:
            break;
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.video-frame {
  //height: 42.5rem;
  height: 31.5rem;
  position: relative;
  iframe {
    position: absolute;
    // outline: 5px solid red;
    width: 100%;
    height: 100%;
  }
}
</style>

vuex中

import Vue from 'vue';
import Vuex from 'vuex';
import digitCounty from './digitCounty';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    fullScreenCameraIndexCode: '', // 全屏监控的内码
    exitFullScreenCameraIndexCode: '',// 退出全屏监控的内码
  },
  mutations: {
    setFullScreenCameraIndexCode(state, msg) {
      state.fullScreenCameraIndexCode = msg;
    },
    setExitFullScreenCameraIndexCode(state, msg) {
      state.exitFullScreenCameraIndexCode = msg;
    },
  },
  getters: {
    fullScreenCameraIndexCode: (state) => state.fullScreenCameraIndexCode,
    exitFullScreenCameraIndexCode: (state) => state.exitFullScreenCameraIndexCode,
  },
  actions: {},
  modules: {
  },
});

3.3 步骤三

子页面demo_embedded_for_iframe.html中接收父页面发送的窗口隐藏（窗口显示）信号；并进行对应处理；

// 步骤1：监听父页面的消息
  window.addEventListener('message', function (e) {
    console.log(e);
    if (e && e.data) {
      switch (e.data.action) {
        case 'updateInitParam':
          var iframeClientPos = e.data.iframeClientPos;    // iframe相对视窗的位置
          // console.log(iframeClientPos);
          oWebControl.JS_SetDocOffset({
            left: iframeClientPos.left,
            top: iframeClientPos.top,
          });  // 更新插件窗口位置
          oWebControl.JS_Resize(divWidth, divHeight);
          // setWndCover();
          break;
        case 'updateCameraIndexCode':
          var cameraIndexCode = e.data.cameraIndexCode; // 获得更新后的cameraIndexCode
            myCameraIndexCode = cameraIndexCode;
          // initPlugin();
          updataCameraIndexCode(cameraIndexCode);
          break;
        case 'hideWin':
            oWebControl.JS_HideWnd();
          break;
        case 'showWin':
            oWebControl.JS_ShowWnd();
          break;
        default:
          break;
      }
    }
  });