迁移大屏UI库和应用

project/dvui/components/AiMonitor/AiMonitor.vue

@@ -0,0 +1,48 @@
+<template>
+  <section class="AiMonitor">
+    <template v-if="type=='cmcc'">
+      <iframe :src="src" allow="autoplay *; microphone *; fullscreen *" allowfullscreen allowtransparency
+              allowusermedia frameBorder="no"/>
+    </template>
+    <hikversion-monitor v-else-if="type=='hik'" :src="src"/>
+    <dhVideo v-else-if="type=='dahua'" :src="src"/>
+    <slwVideo v-else-if="type=='slw'" :src="src"/>
+  </section>
+</template>
+
+<script>
+import HikversionMonitor from "./hikversionMonitor";
+import dhVideo from "./dhVideo";
+import slwVideo from "./slwVideo";
+
+export default {
+  name: "AiMonitor",
+  components: {HikversionMonitor, dhVideo, slwVideo},
+  props: {
+    /**
+     * 视频源
+     */
+    src: {default: ""},
+    /**
+     * 组件类型
+     * cmcc 中移物联,hik 海康威视
+     * @values cmcc,hik
+     */
+    type: {default: "cmcc"},
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiMonitor {
+  width: 100%;
+  height: 100%;
+  min-width: 100px;
+  min-height: 60px;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

project/dvui/components/AiMonitor/dhVideo.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="dh-video">
+    <video :id="id" autoplay class="video-js vjs-default-skin" style="width: 100%; height: 100%;" controls>
+      <source :src="src">
+    </video>
+  </div>
+</template>
+
+<script>
+  import videojs from 'video.js'
+  import 'videojs-contrib-hls'
+  import 'video.js/dist/video-js.css'
+
+  export default {
+    props: ['src'],
+
+    data () {
+      return {
+        id: `video-${new Date().getTime()}`
+      }
+    },
+
+    watch: {
+      src: {
+        handler(val) {
+          if (val) {
+            this.$nextTick(() => {
+              videojs(this.id, {
+                autoplay: true
+              }, function () { console.log('videojs播放器初始化成功') })
+            })
+          }
+        },
+        immediate: true,
+        deep: true
+      }
+    },
+
+    mounted () {
+      if (this.src) {
+        this.$nextTick(() => {
+           videojs(this.id, {
+            autoplay: true
+          }, function () { console.log('videojs播放器初始化成功') })
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .dh-video {
+    width: 100%; 
+    height: 100%;
+    .video-js {
+      width: 100%!important;
+      height: 100%!important;
+    }
+
+    ::v-deep .video-js {
+      width: 100%!important;
+      height: 100%!important;
+
+      .vjs-big-play-button {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    & > div {
+      width: 100%!important;
+      height: 100%!important;
+    }
+  }
+</style>

project/dvui/components/AiMonitor/hikversionMonitor.vue

@@ -0,0 +1,169 @@
+<template>
+  <section class="hikversionMonitor">
+    <div id="monitorIns">
+      <el-link v-if="needSetupPlugin" href="https://cdn.cunwuyun.cn/wsr/lib/VideoWebPlugin.exe" type="primary">
+        请检查是否安装视频插件,如果没有请点击下载视频插件并安装
+      </el-link>
+      <div v-else>视频插件未启动，正在尝试启动，请稍候...</div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "hikversionMonitor",
+  props: {
+    src: {default: ""},
+    list: {default: () => []}
+  },
+  data() {
+    return {
+      monitorIns: null,
+      initCount: 0
+    }
+  },
+  computed: {
+    needSetupPlugin() {
+      return this.initCount >= 3
+    }
+  },
+  methods: {
+    getMonitorWidth() {
+      let {width} = document.querySelector("#monitorIns")?.getBoundingClientRect()
+      return width
+    },
+    getMonitorHeight() {
+      let {height} = document.querySelector("#monitorIns")?.getBoundingClientRect()
+      return height
+    },
+    initSDK() {
+      this.$nextTick(() => {
+        let width = this.getMonitorWidth(), height = this.getMonitorHeight()
+        if (width) {
+          this.monitorIns = new WebControl({
+            szPluginContainer: "monitorIns",                       // 指定容器id
+            iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
+            iServicePortEnd: 15909,
+            szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   // 用于IE10使用ActiveX的clsid
+            cbConnectSuccess: () => {                     // 创建WebControl实例成功
+              this.monitorIns.JS_StartService("window", {         // WebControl实例创建成功后需要启动服务
+                dllPath: "./VideoPluginConnect.dll"         // 值"./VideoPluginConnect.dll"写死
+              }).then(() => {                           // 启动插件服务成功
+                this.monitorIns.JS_CreateWnd("monitorIns", width, height).then(() => { //JS_CreateWnd创建视频播放窗口，宽高可设定
+                  this.monitorIns.JS_RequestInterface({
+                    funcName: "getRSAPubKey",
+                    argument: JSON.stringify({
+                      keyLength: 1024
+                    })
+                  }).then((oData) => {
+                    if (oData.responseMsg.data) {
+                      let encrypt = new JSEncrypt();
+                      encrypt.setPublicKey(oData.responseMsg.data);
+                      let secret = encrypt.encrypt("JSqHo9JUgPLQxfCIjsmQ");
+                      this.monitorIns.JS_RequestInterface({
+                        funcName: "init",
+                        argument: JSON.stringify({
+                          appkey: "23335895",                                                    //API网关提供的appkey
+                          secret,                                                                //API网关提供的secret
+                          ip: "124.128.246.74",                                                  //API网关IP地址
+                          playMode: 0,                                                           //初始播放模式：0-预览，1-回放
+                          port: 1443,                                                            //端口
+                          snapDir: ".",                                                          //抓图存储路径
+                          videoDir: ".",                                                         //紧急录像或录像剪辑存储路径
+                          layout: "1x1",                                                         //布局
+                          enableHTTPS: 1,                                                        //是否启用HTTPS协议
+                          encryptedFields: "secret",                                             //加密字段
+                          showToolbar: 1,                                                        //是否显示工具栏
+                          showSmart: 1,                                                          //是否显示智能信息
+                          buttonIDs: "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"  //自定义工具条按钮
+                        })
+                      }).then(() => {
+                        this.monitorIns.JS_Resize(width, height);  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+                        this.startPreview()
+                      })
+                    }
+                  })
+                });
+              }, (...args) => {
+                // 启动插件服务失败
+                console.log(args)
+              })
+            },
+            cbConnectError: () => {
+              this.monitorIns = null
+              WebControl.JS_WakeUp("VideoWebPlugin://");
+              this.initCount++
+              if (!this.needSetupPlugin) {
+                setTimeout(() => {
+                  this.initSDK()
+                }, 3000)
+              }
+            }
+          })
+        }
+      })
+    },
+    startPreview() {
+      const layout = len =>
+          len <= 1 ? '1x1' :
+              len == 2 ? '1x2' :
+                  len == 3 ? '1+2' :
+                      len == 4 ? '2x2' :
+                          len < 6 ? '1+5' :
+                              len == 7 ? '3+4' :
+                                  len == 8 ? '1+7' :
+                                      len == 9 ? '3x3' :
+                                          len == 10 ? '1+9' :
+                                              len <= 16 ? '4x4' : '4x6'
+      let list = this.src?.split(",")
+      this.monitorIns?.JS_RequestInterface({
+        funcName: "setLayout",
+        argument: JSON.stringify({layout: layout(list.length)})
+      }).then(() => {
+        this.monitorIns?.JS_RequestInterface({
+          funcName: "startMultiPreviewByCameraIndexCode",
+          argument: JSON.stringify({
+            list: list.map((cameraIndexCode, i) => ({
+              cameraIndexCode,       //监控点编号
+              streamMode: 0,                          //主子码流标识
+              transMode: 1,                           //传输协议
+              gpuMode: 0,                             //是否开启GPU硬解
+              wndId: i + 1                              //可指定播放窗口
+            }))
+          })
+        })
+      })
+
+    },
+  },
+  watch: {
+    src(v) {
+      v && this.monitorIns?.JS_RequestInterface({funcName: "stopAllPreview"}).then(() => this.startPreview())
+    }
+  },
+  mounted() {
+    this.$injectLib("https://cdn.cunwuyun.cn/wsr/lib/jsencrypt.min.js")
+    this.$injectLib("https://cdn.cunwuyun.cn/wsr/lib/jsWebControl-1.0.0.min.js", () => {
+      this.initSDK()
+    })
+  },
+  beforeDestroy() {
+    this.monitorIns?.JS_DestroyWnd()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.hikversionMonitor {
+  color: #fff;
+  height: 100%;
+
+  #monitorIns {
+    height: 100%;
+    background: #000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>

project/dvui/components/AiMonitor/slwVideo.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="slw">
+    <iframe
+      v-if="isShow"
+      :id="id"
+      allow="autoplay *; microphone *; fullscreen *" allowfullscreen allowtransparency key="" allowusermedia frameBorder="no"
+      style="width: 100%; height: 100%;"
+      :src="`https://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>

project/dvui/components/AiMonitor/tms/README.md

@@ -0,0 +1,2 @@
+# jessibuca-mobile-demo
+ jessibuca mobile demo

project/dvui/components/AiMonitor/tms/index.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Document</title>
+  <style>
+    * {
+      margin: 0;
+    }
+
+    html,
+    body {
+      width: 100%;
+      height: 100%;
+    }
+
+    #container {
+      width: 100%;
+      height: 100%;
+      background-color: #000;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="container"></div>
+  <script src="index.js"></script>
+
+  <script>
+    var search = document.location.search
+
+    if (!search && search.split('url=').length < 2) {
+
+    } else {
+      var url = search.split('url=')[1]
+      var player = new window.Jessibuca({
+        container: document.getElementById("container"),
+        decoder: "./index.js",
+        isResize: false,
+        supportDblclickFullscreen: true,
+        forceNoOffscreen: true,
+        keepScreenOn: true,
+        isNotMute: true,
+        loadingText: '加载中...',
+        operateBtns: {
+          fullscreen: true,
+          screenshot: true,
+          play: true,
+          audio: true,
+          record: true
+        }
+      });
+
+      if (player.hasLoaded()) {
+        player.play(url)
+      } else {
+        player.on('load', function () {
+          player.play(url)
+        })
+      }
+
+      player.on('fullscreen', function (e) {
+        window.parent.postMessage(e, '*')
+      })
+    }
+  </script>
+</body>
+
+</html>