浏览代码

视频摄像头预览--海康

彭宇 2 年之前
父节点
当前提交
91e9bf792e

文件差异内容过多而无法显示
+ 74 - 0
public/hk/jquery-1.12.4.min.js


文件差异内容过多而无法显示
+ 1 - 0
public/hk/jsWebControl-1.0.0.min.js


文件差异内容过多而无法显示
+ 1 - 0
public/hk/jsencrypt.min.js


+ 7 - 1
public/index.html

@@ -197,12 +197,18 @@
   </head>
   <body>
 <!--  <link rel="stylesheet" href="./supermap/libs/plotting/leaflet/10.2.1/iclient-plot-leaflet.css">-->
-  <script type="text/javascript" include="leaflet,leaflet.sidebyside,iclient-leaflet,iclient-plot-leaflet,leaflet.draw,leaflet.markercluster" src="./supermap/dist/leaflet/include-leaflet.js"></script>
+  <script type="text/javascript" include="leaflet,leaflet.sidebyside,iclient-leaflet,iclient-plot-leaflet,leaflet.draw,leaflet.markercluster,leaflet.heat" src="./supermap/dist/leaflet/include-leaflet.js"></script>
   <script type="text/javascript" include="bootstrap,plottingPanel,fileupLoad,widgets.alert" src="./supermap/examples/js/include-web.js"></script>
 <!--  <script type="text/javascript" include="iclient-classic" src="./supermap/dist/classic/include-classic.js"></script>-->
 <!--  <script type="text/javascript" src="./supermap/libs/plotting/leaflet/10.2.1/iclient-plot-leaflet-es6.min.js"></script>-->
   <script type="text/javascript" include="PlotPanel,StylePanel,SMLInfosPanel,iPortalStylePanel" src="./supermap/examples/js/plottingPanel/PlottingPanel.Include.js"></script>
 
+
+<!--三个必要的js文件引入-->
+<script src="./hk/jquery-1.12.4.min.js"></script>
+<script src="./hk/jsencrypt.min.js"></script>            <!-- 用于RSA加密 -->
+<script src="./hk/jsWebControl-1.0.0.min.js"></script>   <!-- 用于前端与插件交互 -->
+
     <div id="app">
 	    <div id="loader-wrapper">
 		    <div id="loader"></div>

+ 17 - 0
src/api/haikang/haikang.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+// 查询摄像头
+export function getHaiKangVideoServer(param) {
+  return request({
+    url: '/center-monitor/HaiKangController/getHaiKangVideoServer',
+    method: 'get',
+    params: param
+  })
+}
+// 查询电视墙
+export function tvCameraList() {
+  return request({
+    url: '/center-environment/VisuForestMonitorCenterController/tvCameraList',
+    method: 'get',
+  })
+}

+ 12 - 0
src/assets/styles/base.scss

@@ -79,6 +79,18 @@ $date-state2: #e68d3f;
 $date-state3: #d6333b;
 
 
+//视频摄像头预览弹层样式
+.videoCustomWidth {
+  width: 1070px !important;
+  height: 700px !important;
+}
+//电视墙视频摄像头预览弹层样式
+.TVWallCustomWidth {
+  width: 1150px !important;
+  height: 700px !important;
+}
+
+
 //公共
 body {
   height: 100%;

文件差异内容过多而无法显示
+ 656 - 594
src/components/TVWall.vue


+ 221 - 41
src/views/monitor.vue

@@ -73,7 +73,7 @@
       <!-- 右侧 -->
       <div class="rightbar" :class="indentright" ref="right">
         <div class="forthis">
-          <dv-border-box-13 :color="['#0e7957', '#0da24c']" backgroundColor="#09140e" style="padding-bottom: 1rem;">
+          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
             <div class="this-title">
               <span>列表</span>
@@ -118,6 +118,13 @@
     </div>
     <eventLocation ref="eventLocation"></eventLocation>
     <TVWall ref="TVWall"></TVWall>
+    <el-dialog :title="cameraTitle" :visible.sync="cameraVisible" v-if="cameraVisible" customClass="videoCustomWidth"
+               @close="cancelEventLocationShow()">
+      <div style="width:1020px;height:625px;position:relative;">
+        <!--视频窗口展示---海康-->
+        <div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -138,7 +145,10 @@ import TVWall from '@/components/TVWall.vue' //电视墙弹窗
 import {
   getDahuaVideoServer
 } from '@/api/dahua/dahua'
-import DHWs from '@/dahua/lib/DHWs'
+import {
+  getHaiKangVideoServer
+} from '@/api/haikang/haikang'
+// import DHWs from '@/dahua/lib/DHWs'
 
 /** ----------------------------------摄像头预览结束------------------------------------- */
   // import echarts from 'echarts'
@@ -154,8 +164,8 @@ export default {
   },
   created() {
     /** ----------------------------------摄像头预览开始------------------------------------- */
-    const DHWsInstance = DHWs.getInstance()
-    this.ws = DHWsInstance
+    // const DHWsInstance = DHWs.getInstance()
+    // this.ws = DHWsInstance
     /** ----------------------------------摄像头预览结束------------------------------------- */
 
     /** ----------------------------------底部按钮公用组件开始------------------------------------- */
@@ -165,20 +175,26 @@ export default {
     /** ----------------------------------底部按钮公用组件结束------------------------------------- */
   },
   mounted() {
-    this.selectDeviceType()
+    this.selectDeviceType(-1)
     this.selectKeyAreaList()
   },
   data() {
     return {
-      iconCurrentIndex1: '',
-      listCurrentIndex1: '',
-      listCurrentIndex2: '',
-      listCurrentIndex3: '',
+      iconCurrentIndex1: '-1',
+      listCurrentIndex1: '-1',
+      listCurrentIndex2: '-1',
       /** ----------------------------------摄像头预览开始------------------------------------- */
+      //大华
       activePanel: 'key1',
       isLogin: false,
       cameraParams: [],
       ws: null,
+      //海康
+      cameraTitle: '',
+      cameraVisible: false,
+      initCount: 0,
+      pubKey: '',
+      oWebControl: null,
       /** ----------------------------------摄像头预览结束------------------------------------- */
       visuForestCloudMapDeviceBOList: [],
       visuForestCloudCameraBOList: [],
@@ -403,8 +419,7 @@ export default {
               markersMap.isAggregation = true
             }
             if (res.data.visuForestCloudCameraBOList[i].channelCode != null) {
-              markersMap.parameter = res.data.visuForestCloudCameraBOList[i].channelCode.split(
-                ',')
+              markersMap.parameter = res.data.visuForestCloudCameraBOList[i].cameraCode
             } else {
               markersMap.parameter = []
             }
@@ -484,7 +499,7 @@ export default {
               markersMap.isAggregation = true
             }
             if (res.data[i].channelCode != null) {
-              markersMap.parameter = res.data[i].channelCode.split(',')
+              markersMap.parameter = res.data[i].cameraCode
             } else {
               markersMap.parameter = []
             }
@@ -563,36 +578,56 @@ export default {
     alertReinstall: function() {
       this.$modal.msgWarning('请重新安装客户端')
     },
+    cancelEventLocationShow() {
+      if (this.oWebControl != null) {
+        this.oWebControl.JS_HideWnd()   // 先让窗口隐藏,规避可能的插件窗口滞后于浏览器消失问题
+        this.oWebControl.JS_Disconnect().then(function() {  // 断开与插件服务连接成功
+          },
+          function() {  // 断开与插件服务连接失败
+          })
+      }
+    },
     /** 预览按钮操作 */
-    preview(channelCode) {
-      getDahuaVideoServer().then(newResponse => {
-        this.ws.detectConnectQt().then(res => {
-          if (res) { // 连接客户端成功
-            this.alertLogin()
-            this.ws.login({
-              loginIp: newResponse.loginIp,
-              loginPort: newResponse.loginPort,
-              userName: newResponse.userName,
-              userPwd: newResponse.userPwd,
-              token: '',
-              https: 1
-            })
-            this.ws.on('loginState', (res) => {
-              this.isLogin = res
-              console.log('---res-----', res)
-              if (res) {
-                this.alertLoginSuccess()
-                this.activePanel = 'key2'
-                this.realTimeVideoDialog(channelCode)
-              } else {
-                this.alertLoginFailed()
-              }
-            })
-          } else { // 连接客户端失败
-            this.alertReinstall()
-          }
-        })
+    preview(cameraCode) {
+      let that = this
+      // getDahuaVideoServer().then(newResponse => {
+      //   console.log(newResponse)
+      //   this.ws.detectConnectQt().then(res => {
+      //     if (res) { // 连接客户端成功
+      //       this.alertLogin()
+      //       this.ws.login({
+      //         loginIp: newResponse.loginIp,
+      //         loginPort: newResponse.loginPort,
+      //         userName: newResponse.userName,
+      //         userPwd: newResponse.userPwd,
+      //         token: '',
+      //         https: 1
+      //       })
+      //       this.ws.on('loginState', (res) => {
+      //         this.isLogin = res
+      //         console.log('---res-----', res)
+      //         if (res) {
+      //           this.alertLoginSuccess()
+      //           this.activePanel = 'key2'
+      //           this.realTimeVideoDialog(channelCode)
+      //         } else {
+      //           this.alertLoginFailed()
+      //         }
+      //       })
+      //     } else { // 连接客户端失败
+      //       this.alertReinstall()
+      //     }
+      //   })
+      // })
+      that.cameraVisible = true
+      getHaiKangVideoServer({cameraCode:cameraCode}).then(newResponse => {
+        that.cameraTitle = '摄像头-'+newResponse.data.cameraName
+        that.initPlugin(newResponse.data.appkey,newResponse.data.loginIp,newResponse.data.secret,newResponse.data.loginPort)
+        setTimeout(function() {
+          that.playhk(newResponse.data.channelCode)
+        }, 5000)
       })
+
     },
     realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
       if (!this.isLogin) {
@@ -600,14 +635,159 @@ export default {
         return false
       }
       this.ws.openVideo(cameraParams)
-    }
+    },
     /** ----------------------------------摄像头预览结束------------------------------------- */
 
+
+    /** ----------------------------------海康摄像头预览开始------------------------------------- */
+    // 创建播放实例
+    initPlugin(newappkey,newloginIp,newsecret,newloginPort) {
+      let that=this
+      that.oWebControl = new WebControl({
+        szPluginContainer: 'playWnd',                       // 指定容器id
+        iServicePortStart: 15900,                           // 指定起止端口号,建议使用该值
+        iServicePortEnd: 15909,
+        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11',   // 用于IE10使用ActiveX的clsid
+        cbConnectSuccess: function() {                     // 创建WebControl实例成功
+          that.oWebControl.JS_StartService('window', {         // WebControl实例创建成功后需要启动服务
+            dllPath: './VideoPluginConnect.dll'         // 值"./VideoPluginConnect.dll"写死
+          }).then(function() {                           // 启动插件服务成功
+            that.oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
+              cbIntegrationCallBack: cbIntegrationCallBack
+            })
+
+            that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(function() { //JS_CreateWnd创建视频播放窗口,宽高可设定
+              that.init(newappkey,newloginIp,newsecret,newloginPort)  // 创建播放实例成功后初始化
+            })
+          }, function() { // 启动插件服务失败
+          })
+        },
+        cbConnectError: function() { // 创建WebControl实例失败
+          that.oWebControl = null
+          $('#playWnd').html('插件未启动,正在尝试启动,请稍候...')
+          WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数,采用wakeup来启动程序
+          initCount++
+          if (initCount < 3) {
+            setTimeout(function() {
+              that.initPlugin(newappkey,newloginIp,newsecret,newloginPort)
+            }, 3000)
+          } else {
+            $('#playWnd').html('插件启动失败,请检查插件是否安装!')
+          }
+        },
+        cbConnectClose: function(bNormalClose) {
+          // 异常断开:bNormalClose = false
+          // JS_Disconnect正常断开:bNormalClose = true
+          console.log('cbConnectClose')
+          that.oWebControl = null
+        }
+      })
+    },
+    //播放海康摄像头
+    playhk(channelCode) {
+      var cameraIndexCode = channelCode     //获取输入的监控点编号值,必填
+      var streamMode = 0                                     //主子码流标识:0-主码流,1-子码流
+      var transMode = 1                                      //传输协议:0-UDP,1-TCP
+      var gpuMode = 0                                        //是否启用GPU硬解,0-不启用,1-启用
+      var wndId = -1                                         //播放窗口序号(在2x2以上布局下可指定播放窗口)
+
+      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
+      cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')
+
+      this.oWebControl.JS_RequestInterface({
+        funcName: 'startPreview',
+        argument: JSON.stringify({
+          cameraIndexCode: cameraIndexCode,                //监控点编号
+          streamMode: streamMode,                         //主子码流标识
+          transMode: transMode,                           //传输协议
+          gpuMode: gpuMode,                               //是否开启GPU硬解
+          wndId: wndId                                     //可指定播放窗口
+        })
+      })
+    },
+    //初始化
+    init(newappkey,newloginIp,newsecret,newloginPort) {
+      let that = this
+      that.getPubKey(function() {
+        ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
+        var appkey = newappkey                           //综合安防管理平台提供的appkey,必填
+        var secret = that.setEncrypt(newsecret)   //综合安防管理平台提供的secret,必填
+        var ip = newloginIp                           //综合安防管理平台IP地址,必填
+        var playMode = 0                                  //初始播放模式:0-预览,1-回放
+        var port = Number(newloginPort)                                    //综合安防管理平台端口,若启用HTTPS协议,默认443
+        var snapDir = 'D:\\SnapDir'                       //抓图存储路径
+        var videoDir = 'D:\\VideoDir'                     //紧急录像或录像剪辑存储路径
+        var layout = '1x1'                                //playMode指定模式的布局
+        var enableHTTPS = 1                               //是否启用HTTPS协议与综合安防管理平台交互,这里总是填1
+        var encryptedFields = 'secret'					   //加密字段,默认加密领域为secret
+        var showToolbar = 1                               //是否显示工具栏,0-不显示,非0-显示
+        var showSmart = 1                                 //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示
+        var buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769'  //自定义工具条按钮
+        ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////
+
+        that.oWebControl.JS_RequestInterface({
+          funcName: 'init',
+          argument: JSON.stringify({
+            appkey: appkey,                            //API网关提供的appkey
+            secret: secret,                            //API网关提供的secret
+            ip: ip,                                    //API网关IP地址
+            playMode: playMode,                        //播放模式(决定显示预览还是回放界面)
+            port: port,                                //端口
+            snapDir: snapDir,                          //抓图存储路径
+            videoDir: videoDir,                        //紧急录像或录像剪辑存储路径
+            layout: layout,                            //布局
+            enableHTTPS: enableHTTPS,                  //是否启用HTTPS协议
+            encryptedFields: encryptedFields,          //加密字段
+            showToolbar: showToolbar,                  //是否显示工具栏
+            showSmart: showSmart,                      //是否显示智能信息
+            buttonIDs: buttonIDs                       //自定义工具条按钮
+          })
+        }).then(function(oData) {
+          that.oWebControl.JS_Resize(1020, 600)  // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
+        })
+      })
+    },
+    //获取公钥
+    getPubKey(callback) {
+      let that = this
+      that.oWebControl.JS_RequestInterface({
+        funcName: 'getRSAPubKey',
+        argument: JSON.stringify({
+          keyLength: 1024
+        })
+      }).then(function(oData) {
+        console.log(oData)
+        if (oData.responseMsg.data) {
+          that.pubKey = oData.responseMsg.data
+          callback()
+        }
+      })
+    },
+//RSA加密
+    setEncrypt(value) {
+      var encrypt = new JSEncrypt()
+      encrypt.setPublicKey(this.pubKey)
+      return encrypt.encrypt(value)
+    },
+    /** ----------------------------------海康摄像头预览结束------------------------------------- */
+
   }
 }
+
+// 推送消息
+function cbIntegrationCallBack(oData) {
+  console.log(JSON.stringify(oData.responseMsg))
+}
 </script>
 
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 @import '@/assets/styles/base.scss';
+
+.playWnd {
+  margin: 4px 0 0 8px;
+  width: 1020px; /*播放容器的宽和高设定*/
+  height: 600px;
+  border: 1px solid red;
+}
 </style>