事件详情预览摄像头

src/views/eventdetailsdialog.vue

@@ -69,7 +69,7 @@
 								<supermapDialog ref="supermapDialog" style="position: absolute; top:0;left: 0;"
 									:mapDiv="'forestWarmSuperMap'"
 									:mapSite="{zoom:12,doubleClickZoom:false,dragging:false,scrollWheelZoom:false}"
-									:codes="['9fa5']" :isSideBySide="false" :isdynamicPlotting="true" />
+									:codes="['9fa5']" :isSideBySide="false" :isdynamicPlotting="true" @preview="preview"/>
 								<!-- 地图end -->
 							</div>
 
@@ -871,6 +871,13 @@
 		<el-dialog title="视频预览" :visible.sync="showTcPlayer" width="40%" customClass="customWidthMp4">
 			<TcPlayer ref="TcPlayer" :playVideo="playVideo" :widthHeigt="[100,100]"></TcPlayer>
 		</el-dialog>
+    <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>
 
@@ -897,6 +904,9 @@
 	import {
 		treeselectAll as deptTreeselect
 	} from '@/api/system/dept'
+  import {
+    getHaiKangVideoServer
+  } from '@/api/haikang/haikang'
 
 	export default {
 		dicts: ['task_source'],
@@ -915,6 +925,13 @@
 		},
 		data() {
 			return {
+        //海康
+        cameraTitle: '',
+        cameraVisible: false,
+        initCount: 0,
+        pubKey: '',
+        oWebControl: null,
+
 				playVideo: '', //视频预览地址
 				showTcPlayer: false, //视频预览弹窗
 				regionalFlagOpen: false, //区域标记
@@ -1701,8 +1718,8 @@
 							lat: 43.02,
 							icon: 'camera',
 							bindPopupHtml: '',
-							click: '',
-							parameter: '',
+              click: 'preview',
+              parameter: res.data.centermonitorTCamera.cameraCode,
 							keepBindPopup: false,
 							isAggregation: false,
 							radius: 0
@@ -1852,9 +1869,218 @@
 				console.log(latlng)
 				this.regionalFlagObj.array = latlng
 				this.$modal.msgSuccess('获取坐标成功！')
-			}
+			},
+      /** ----------------------------------摄像头预览开始------------------------------------- */
+      alertLogin: function() {
+        this.$modal.msg('登录中....')
+      },
+      alertLoginSuccess: function() {
+        this.$modal.msgSuccess('登录成功！')
+      },
+      alertLoginFailed: function() {
+        this.$modal.msgError('登陆失败！')
+      },
+      alertReinstall: function() {
+        this.$modal.msgWarning('请重新安装客户端')
+      },
+      cancelEventLocationShow() {
+        if (this.oWebControl != null) {
+          this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+          this.oWebControl.JS_Disconnect().then(function() {  // 断开与插件服务连接成功
+            },
+            function() {  // 断开与插件服务连接失败
+            })
+        }
+      },
+      /** 预览按钮操作 */
+      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) {
+          this.$Message.info('正在登陆客户端，请稍等......')
+          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 lang="scss" scoped>