一.简介
1.运行环境
Win7 32/64 位操作系统：32 位 IE10（兼容 64 位 IE10，64 位 IE10 环境下浏览器会默认启动 32
位 IE）、32/64 位 IE11、32/64 位 Chrome45.0 及以上版本、32/64 位 Firefox52.0 及以上版本，Win10 32/64 位操作系统：32/64 位 IE11、32/64 位 Chrome45.0 及以上版本、32/64 位 Firefox51.0
2.约束说明
触摸屏 Windows 操作系统未经全面测试，不推荐使用非企业版 Windows 操作系统未经测试，请使用企业版 Windows 操作系统语音对讲只支持海康 SDK 协议、ehome 协议接入设备目前仅支持配合 DIV 标签使用，不支持基于 iframe 方式也不支持浏览器页面弹出页面的使用方
式IE、Chrome、Firefox 浏览器对接时不建议启动多个插件服务，一般情况下一个 Tab 页只启动一
个插件服务页面滚动的场景会存在插件窗口与 DIV 窗口未完全重叠情况，此场景请慎用
轮询功能未经全面测试，建议使用客户端模式低帧率（帧率低于 5FPS）情况下即时回放打开声音会出现声音慢出或少几秒情况
一.对比有无插件两种模式
我之前已经把无插件对接的方式做了一篇文字有兴趣的可以去看看。
有插件和无插件的区别：
1.无插件的模式可以在pc和移动端运行，插件模式不能在移动端播放，因为电脑需要装一个插件，没用这个插件浏览器无法播放。
2.插件模式相比无插件模式多了很多操作比如让摄像头旋转（前提是摄像头支持旋转）还有一些自带的操作。
二.示例
官方有一个包，里面有插件和几个demo我把下载地址放在最后了，我们这里展示的示例的vue的示例。
代码注解：
代码的注释还算全，然后需要注意一点的mounted和destroyed两个生命周期中对scroll和resize的监听。
注意：
这里的四个代码需要提供，都是必填
设备编码 //每一个监控设备都有一个编码
appKey //综合安防管理平台提供的appkey
secret //综合安防管理平台提供的secret
ip //综合安防管理平台IP地址
完整组件代码：
<template><div><!--视频窗口展示--><div :style="{width: width + 'px', height: height + 'px' }" :id="myId" class="playWnd"></div></div></template><script>export default {name: 'monitor',props: {//监控视频的宽度width: {type: Number,default: 390},//监控视频的高度height: {type: Number,default: 200},//监控视频的编码monitoringNumber: {type: String,required: true}},data() {return {myId: '',initCount: 0,pubKey: '',_oWebControl: null,my_appKey: 'xxxxxxxxx', //综合安防管理平台提供的appkeymy_secret: 'xxxxxxxxxxxxxxxxxx', //综合安防管理平台提供的secretmy_ip: 'xx.xxx.xx.xx' //综合安防管理平台IP地址}},methods: {UUID() {var d = new Date().getTime()if (window.performance && typeof window.performance.now === 'function') {d += performance.now() //use high-precision timer if available}var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {var r = (d + Math.random() * 16) % 16 | 0d = Math.floor(d / 16)return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16)})return uuid},// 初始化插件initPlugin(that) {let my_oWebControl = nullmy_oWebControl = new WebControl({szPluginContainer: that.myId, // 指定容器idiServicePortStart: 15900, // 指定起止端口号，建议使用该值iServicePortEnd: 15919,szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsidcbConnectSuccess: function () {console.log('cbConnectSuccess中的that', that)// 创建WebControl实例成功my_oWebControl.JS_StartService('window', {// WebControl实例创建成功后需要启动服务dllPath: './VideoPluginConnect.dll' // 值"./VideoPluginConnect.dll"写死}).then(function () {// 启动插件服务成功// my_oWebControl.JS_SetWindowControlCallback({// // 设置消息回调// cbIntegrationCallBack: cbIntegrationCallBack// })my_oWebControl.JS_CreateWnd(that.myId, that.width, that.height).then(function () {//JS_CreateWnd创建视频播放窗口，宽高可设定that._oWebControl = my_oWebControlthat.init(that) // 创建播放实例成功后初始化})},function () {// 启动插件服务失败})},cbConnectError: function () {// 创建WebControl实例失败my_oWebControl = null$(`#${that.myId}`).html('插件未启动，正在尝试启动，请稍候...')WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序that.initCount++if (that.initCount < 3) {setTimeout(function () {that.initPlugin(this)}, 3000)} else {$(`#${that.myId}`).html('插件启动失败，请检查插件是否安装！')alert('请打开 /upload/VideoWebPlugin.exe 下载插件')}},cbConnectClose: function (bNormalClose) {// 异常断开：bNormalClose = false// JS_Disconnect正常断开：bNormalClose = truethat._oWebControl = null}})},// 设置窗口控制回调setCallbacks() {// this._oWebControl.JS_SetWindowControlCallback({// cbIntegrationCallBack: cbIntegrationCallBack// })},// 推送消息cbIntegrationCallBack(oData) {console.log('推送消息')// showCBInfo(JSON.stringify(oData.responseMsg))},//初始化init(that) {this.getPubKey(function () {// 请自行修改以下变量值var appkey = that.my_appKey //综合安防管理平台提供的appkey，必填var secret = that.setEncrypt(that.my_secret) //综合安防管理平台提供的secret，必填var ip = that.my_ip //综合安防管理平台IP地址，必填var playMode = 0 //初始播放模式：0-预览，1-回放var port = 1443 //综合安防管理平台端口，若启用HTTPS协议，默认443var snapDir = 'D:\\SnapDir' //抓图存储路径var videoDir = 'D:\\VideoDir' //紧急录像或录像剪辑存储路径var layout = '1x1' //playMode指定模式的布局var enableHTTPS = 1 //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1var encryptedFields = 'secret' //加密字段，默认加密领域为secretvar 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网关提供的appkeysecret: secret, //API网关提供的secretip: 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(that.width, that.height) // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题that.preview()})}, this)},//获取公钥getPubKey(callback, that) {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.datacallback()}})},//RSA加密setEncrypt(value) {var encrypt = new JSEncrypt()encrypt.setPublicKey(this.pubKey)return encrypt.encrypt(value)},//监听resize事件，使插件窗口尺寸跟随DIV窗口变化windowResize() {if (this._oWebControl != null) {this._oWebControl.JS_Resize(this.width, this.height)this.setWndCover()}},//监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动windowScroll() {if (this._oWebControl != null) {this._oWebControl.JS_Resize(this.width, this.height)this.setWndCover()}},//设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口setWndCover() {var iWidth = $(window).width()var iHeight = $(window).height()var oDivRect = $(`#${this.myId}`).get(0).getBoundingClientRect()var iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0var iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0var iCoverRight = oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0var iCoverBottom = oDivRect.bottom - iHeight > 0 ? Math.round(oDivRect.bottom - iHeight) : 0iCoverLeft = iCoverLeft > this.width ? this.width : iCoverLeftiCoverTop = iCoverTop > this.height ? this.height : iCoverTopiCoverRight = iCoverRight > this.width ? this.width : iCoverRightiCoverBottom = iCoverBottom > this.height ? this.height : iCoverBottomthis._oWebControl.JS_RepairPartWindow(0, 0, this.width + 1, this.height) // 多1个像素点防止还原后边界缺失一个像素条if (iCoverLeft != 0) {this._oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, this.height)}if (iCoverTop != 0) {this._oWebControl.JS_CuttingPartWindow(0, 0, this.width + 1, iCoverTop) // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条}if (iCoverRight != 0) {this._oWebControl.JS_CuttingPartWindow(this.width - iCoverRight, 0, iCoverRight, this.height)}if (iCoverBottom != 0) {this._oWebControl.JS_CuttingPartWindow(0, this.height - iCoverBottom, this.width, iCoverBottom)}},//加载后预览preview() {console.log('preview', this.monitoringNumber)var cameraIndexCode = this.monitoringNumber //获取输入的监控点编号值，必填var streamMode = 1 //主子码流标识：0-主码流，1-子码流var transMode = 1 //传输协议：0-UDP，1-TCPvar 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 //可指定播放窗口})})},//清除控件clearControl() {if (this._oWebControl != null) {this._oWebControl.JS_HideWnd() // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题this._oWebControl.JS_Disconnect().then(function () {// 断开与插件服务连接成功},function () {// 断开与插件服务连接失败})}}},created() {this.myId = this.UUID()},mounted() {// 创建this.initPlugin(this)//监听滚动条window.addEventListener('scroll', this.windowScroll)//监听resizewindow.addEventListener('resize', this.windowResize)},destroyed() {// 销毁this.clearControl()window.removeEventListener('scroll', this.windowScroll)window.removeEventListener('resize', this.windowResize)}}</script>
父组件调用：
<monitor :monitoringNumber="设备编码"></monitor>
结束语：
准备好那四个代码然后代码cv过去就能用了。
插件以及官方文档和官方demo，我这个demo就是比较简单的告诉你怎么样让你在vue中跑起来，具体还有很多操作看与去看看文档。文档地址
