视频监控

src/project/shandong10086/AppIntelligentSecurity/SlwVideo.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="slw">
+    <iframe v-if="isShow" :id="id" style="width: 100%; height: 100%;" :src="`http://cdn.cunwuyun.cn/jssdk/slw/index.html?url=${src}`"></iframe>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['src'],
+
+    name: 'slwVideo',
+
+    data () {
+      return {
+        isShow: true,
+        id: `video-${new Date().getTime()}`
+      }
+    },
+
+    watch: {
+      src: {
+        handler (val) {
+          if (val) {
+            this.isShow = false
+
+            this.$nextTick(() => {
+              this.isShow = true
+            })
+          }
+        },
+        immediate: true,
+        deep: true
+      }
+    },
+
+    mounted () {
+      window.addEventListener('message', e => {
+        if (e.data.type && e.data.name === 'fullscreen') {
+          this.requestFullScreen(document.getElementById(this.id))
+        }
+
+        if (!e.data.type && e.data.name === 'fullscreen') {
+          this.exitFullscreen()
+        }
+      }, false)
+    },
+
+    methods: {
+      exitFullscreen () {
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen()
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen()
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen()
+        }
+      },
+
+      requestFullScreen (element) {
+        var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
+        if (requestMethod) {
+          requestMethod.call(element);
+        } else if (typeof window.ActiveXObject !== 'undefined') {
+          var wscript = new ActiveXObject('WScript.Shell')
+          if (wscript !== null) {
+            wscript.SendKeys('{F11}')
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .slw {
+    width: 100%;
+    height: 100%;
+
+    iframe {
+      border: none;
+    }
+  }
+</style>