对接海康设备-vue

海康官方Demo

海康开放平台

对接海康综合安防管理摄像头

说明：官方Demo是原js代码，自己改改就能用，非常简单，下面这个是改成vue的

浏览器需要装的插件↓↓↓↓

https://download.csdn.net/download/qq_39654518/86723796

首先要在index.html页面引入相关插件，建议在这个页面引入，其他页面引入可能无效

    <!-- 海康摄像头 --><script src="./static/plugins/hik/jquery-1.12.4.min.js"></script><script src="./static/plugins/hik/jsencrypt.min.js"></script><script src="./static/plugins/hik/jsWebControl-1.0.0.min.js"></script>

项目发布打包需要的配置(否则发布后可能找不到资源)：

      // 海康摄像头window.SITE_CONFIG.cdnUrl + '/static/plugins/hik/jquery-1.12.4.min.js',window.SITE_CONFIG.cdnUrl + '/static/plugins/hik/jsencrypt.min.js',window.SITE_CONFIG.cdnUrl + '/static/plugins/hik/jsWebControl-1.0.0.min.js',

看回放vue页面：

<template><el-dialog title="测试" :close-on-click-modal="false":visible.sync="visible":modal="false":show-close="false"width="1040px"><!-- 用于播放的容器 --><div id="playWnd" class="playWnd"></div><span slot="footer" class="dialog-footer"><el-button type="primary" @click="close()">关闭</el-button><el-button type="primary" @click="startPlayback">重新连接</el-button></span></el-dialog>
</template>
<script>
export default {data () {return {visible: false,initCount: 0,pubKey: '',oWebControl: '',cameraIndexCode: '',          // 设备编码enforcementStartTime: '',     // 开始时间enforcementEndTime: ''        // 结束时间}},activated () {},methods: {// 创建WebControl实例与启动插件initPlugin (cameraIndexCode, enforcementStartTime, enforcementEndTime) {   // vue弹框调这个方法进来，，传入 【摄像头code，回放开始时间，结束时间】this.visible = truevar that = thisthat.cameraIndexCode = cameraIndexCodethat.enforcementStartTime = enforcementStartTimethat.enforcementEndTime = enforcementEndTime// eslint-disable-next-linethat.oWebControl = new WebControl({szPluginContainer: 'playWnd',           // 指定容器idiServicePortStart: 15900,               // 指定起止端口号，建议使用该值iServicePortEnd: 15909,cbConnectSuccess: function () {         // 创建成功// 实例创建成功后需要启动服务that.oWebControl.JS_StartService('window', {dllPath: './VideoPluginConnect.dll'}).then(function () {that.oWebControl.JS_SetWindowControlCallback({// 设置消息回调cbIntegrationCallBack: that.cbIntegrationCallBack})that.oWebControl.JS_CreateWnd('playWnd', 1000, 600).then(function () {       // JS_CreateWnd创建视频播放窗口，宽高可设定that.init()                 // 创建播放实例成功后初始化})},function () {})},cbConnectError: function () {          // 创建失败that.oWebControl = nulldocument.getElementById('playWnd').innerHTML = '插件未启动，正在尝试启动，请稍候...'// eslint-disable-next-lineWebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序that.initCount++if (that.initCount < 3) {setTimeout(function () {that.initPlugin()}, 3000)} else {document.getElementById('playWnd').innerHTML = '插件启动失败，请检查插件是否安装！<a href="下载地址自己搞个文件外链">下载插件</a>'}},cbConnectClose: function () {that.oWebControl = null}})},// 推送消息cbIntegrationCallBack (oData) {console.log(JSON.stringify(oData.responseMsg))},// 初始化init () {var that = this// 获取海康平台 配置中心this.$http({url: '*****',                         // 请求服务器，动态获取海康配置，，或者下面的配置直接写死，进行测试  appkey secret  ip  portmethod: 'POST',data: this.$http.adornData({})}).then(({data}) => {if (data && data.code === '200') {// 创建 播放器this.getPubKey(function () {// 请自行修改以下变量值var appkey = data.data.appKey                          // 综合安防管理平台提供的appkey，必填var secret = that.setEncrypt(data.data.appSecret)      // 综合安防管理平台提供的secret，必填var ip = data.data.inIp                                // 综合安防管理平台IP地址，必填var playMode = 1                                       // 初始播放模式：0-预览，1-回放var port = parseInt(data.data.port)                    // 综合安防管理平台端口，若启用HTTPS协议，默认443var snapDir = 'C:\\SnapDir'                            // 抓图存储路径var videoDir = 'C:\\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' // 自定义工具条按钮// var reconnectTimes = 2                                // 重连次数，回放异常情况下有效// var reconnectTime = 4                                 // 每次重连的重连间隔 >= reconnectTime// 请自行修改以上变量值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                    // 自定义工具条按钮// reconnectTimes：reconnectTimes,      // 重连次数// reconnectDuration：reconnectTime     // 重连间隔})}).then(function (oData) {console.log(oData)that.oWebControl.JS_Resize(1000, 600)          // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题that.startPlayback()                           // 开始播放})})}})},// 获取公钥getPubKey (callback) {var that = thisthat.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 that = this// eslint-disable-next-linevar encrypt = new JSEncrypt()encrypt.setPublicKey(that.pubKey)return encrypt.encrypt(value)},// 录像回放功能startPlayback () {var that = thisif (that.cameraIndexCode == null) {if (this.oWebControl != null) {that.oWebControl.JS_HideWnd()                                         // 先让窗口隐藏，规避插件窗口滞后于浏览器消失问题that.oWebControl.JS_Disconnect().then(function () {}, function () {})}document.getElementById('playWnd').innerHTML = '该设备无回放数据'return}// new Date('2022/09/21 12:00:00').getTime()    测试用时间var cameraIndexCode = that.cameraIndexCode                           // 获取输入的监控点编号值，必填var startTimeStamp = new Date(that.enforcementStartTime.replace('-', '/').replace('-', '/')).getTime()      // 回放开始时间戳，必填var endTimeStamp = new Date(that.enforcementEndTime.replace('-', '/').replace('-', '/')).getTime()          // 回放结束时间戳，必填var recordLocation = 1                                        // 录像存储位置：0-中心存储，1-设备存储var transMode = 1                                             // 传输协议：0-UDP，1-TCPvar gpuMode = 0                                               // 是否启用GPU硬解，0-不启用，1-启用var wndId = -1                                                // 播放窗口序号（在2x2以上布局下可指定播放窗口）console.log('params', {cameraIndexCode: cameraIndexCode,   // 监控点编号startTimeStamp: startTimeStamp,     // 录像查询开始时间戳，单位：秒endTimeStamp: endTimeStamp,         // 录像结束开始时间戳，单位：秒recordLocation: recordLocation,     // 录像存储类型：0-中心存储，1-设备存储transMode: transMode,               // 传输协议：0-UDP，1-TCPgpuMode: gpuMode,                   // 是否启用GPU硬解，0-不启用，1-启用wndId: wndId                        // 可指定播放窗口})that.oWebControl.JS_RequestInterface({funcName: 'startPlayback',argument: JSON.stringify({cameraIndexCode: cameraIndexCode,                               // 监控点编号startTimeStamp: Math.floor(startTimeStamp / 1000).toString(),   // 录像查询开始时间戳，单位：秒endTimeStamp: Math.floor(endTimeStamp / 1000).toString(),       // 录像结束开始时间戳，单位：秒recordLocation: recordLocation,                                 // 录像存储类型：0-中心存储，1-设备存储transMode: transMode,                                           // 传输协议：0-UDP，1-TCPgpuMode: gpuMode,                                               // 是否启用GPU硬解，0-不启用，1-启用wndId: wndId                                                    // 可指定播放窗口})})},// 停止回放stopAllPlayback () {this.oWebControl.JS_RequestInterface({funcName: 'stopAllPlayback'})},// 关闭弹框close () {this.visible = falseif (this.oWebControl != null) {this.oWebControl.JS_HideWnd()                                         // 先让窗口隐藏，规避插件窗口滞后于浏览器消失问题this.oWebControl.JS_Disconnect().then(function () {}, function () {})}}}
}
</script>
<style scoped>
.playWnd {width: 1000px;                   /*播放容器的宽和高设定*/height: 600px;
}
</style>

直播 vue页面：

<template><el-dialog title="设备直播" :close-on-click-modal="false":visible.sync="visible":modal="false":show-close="false"width="1040px"><div id="playWnd2" class="playWnd2"></div><span slot="footer" class="dialog-footer"><el-button type="primary" @click="close()">关闭</el-button><el-button type="primary" @click="startPlayback">重新连接</el-button></span></el-dialog>
</template>
<script>
export default {data () {return {visible: false,initCount: 0,pubKey: '',oWebControl: '',cameraIndexCode: ''      // 设备code}},activated () {},methods: {// 创建WebControl实例与启动插件initPlugin (cameraIndexCode) {        // 弹框进来掉这个方法，传入 设备codethis.visible = truevar that = thisthis.cameraIndexCode = cameraIndexCode// eslint-disable-next-linethat.oWebControl = new WebControl({szPluginContainer: 'playWnd2',           // 指定容器idiServicePortStart: 15900,               // 指定起止端口号，建议使用该值iServicePortEnd: 15909,szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11',   // 用于IE10使用ActiveX的clsidcbConnectSuccess: function () {         // 创建成功// 实例创建成功后需要启动服务that.oWebControl.JS_StartService('window', {dllPath: './VideoPluginConnect.dll'}).then(function () {that.oWebControl.JS_SetWindowControlCallback({// 设置消息回调cbIntegrationCallBack: that.cbIntegrationCallBack})that.oWebControl.JS_CreateWnd('playWnd2', 1000, 600).then(function () {       // JS_CreateWnd创建视频播放窗口，宽高可设定that.init()                 // 创建播放实例成功后初始化})},function () {})},cbConnectError: function () {          // 创建失败that.oWebControl = nulldocument.getElementById('playWnd2').innerHTML = '插件未启动，正在尝试启动，请稍候...'// eslint-disable-next-lineWebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序that.initCount++if (that.initCount < 3) {setTimeout(function () {that.initPlugin()}, 3000)} else {document.getElementById('playWnd2').innerHTML = '插件启动失败，请检查插件是否安装！'}},cbConnectClose: function () {that.oWebControl = null}})},// 推送消息cbIntegrationCallBack (oData) {console.log(JSON.stringify(oData.responseMsg))},// 初始化init () {var that = this// 获取海康平台 配置中心this.$http({url: '*****',                         // 请求服务器，动态获取海康配置，，或者下面的配置直接写死，进行测试  appkey secret  ip  portmethod: 'POST',data: this.$http.adornData({})}).then(({data}) => {if (data && data.code === '200') {// 创建 播放器this.getPubKey(function () {// 请自行修改以下变量值var appkey = data.data.appKey                          // 综合安防管理平台提供的appkey，必填var secret = that.setEncrypt(data.data.appSecret)      // 综合安防管理平台提供的secret，必填var ip = data.data.inIp                                // 综合安防管理平台IP地址，必填var playMode = 0                                       // 初始播放模式：0-预览，1-回放var port = parseInt(data.data.port)                    // 综合安防管理平台端口，若启用HTTPS协议，默认443var snapDir = 'C:\\SnapDir'                            // 抓图存储路径var videoDir = 'C:\\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' // 自定义工具条按钮// var reconnectTimes = 2                                // 重连次数，回放异常情况下有效// var reconnectTime = 4                                 // 每次重连的重连间隔 >= reconnectTime// 请自行修改以上变量值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                    // 自定义工具条按钮// reconnectTimes：reconnectTimes,      // 重连次数// reconnectDuration：reconnectTime     // 重连间隔})}).then(function (oData) {console.log(oData)that.oWebControl.JS_Resize(1000, 600)          // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题that.startPlayback()                           // 开始播放})})}})},// 获取公钥getPubKey (callback) {var that = thisthat.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 that = this// eslint-disable-next-linevar encrypt = new JSEncrypt()encrypt.setPublicKey(that.pubKey)return encrypt.encrypt(value)},// 直播功能startPlayback () {var that = thisif (that.cameraIndexCode == null) {that.oWebControl.JS_HideWnd()                                         // 先让窗口隐藏，规避插件窗口滞后于浏览器消失问题that.oWebControl.JS_Disconnect().then(function () {}, function () {})document.getElementById('playWnd2').innerText = '该设备无直播数据'return}var cameraIndexCode = that.cameraIndexCode               // 获取输入的监控点编号值，必填var streamMode = 0                                       // 主子码流标识：0-主码流，1-子码流var transMode = 1                                        // 传输协议：0-UDP，1-TCPvar gpuMode = 0                                          // 是否启用GPU硬解，0-不启用，1-启用var wndId = -1                                           // 播放窗口序号（在2x2以上布局下可指定播放窗口）console.log('params', {cameraIndexCode: cameraIndexCode,   // 监控点编号streamMode: streamMode,             // 录像存储类型：0-中心存储，1-设备存储transMode: transMode,               // 传输协议：0-UDP，1-TCPgpuMode: gpuMode,                   // 是否启用GPU硬解，0-不启用，1-启用wndId: wndId                        // 可指定播放窗口})that.oWebControl.JS_RequestInterface({funcName: 'startPreview',argument: JSON.stringify({cameraIndexCode: cameraIndexCode,                // 监控点编号streamMode: streamMode,                         // 主子码流标识transMode: transMode,                           // 传输协议gpuMode: gpuMode,                               // 是否开启GPU硬解wndId: wndId                                     // 可指定播放窗口})})},// 停止播放stopAllPlayback () {this.oWebControl.JS_RequestInterface({funcName: 'stopAllPlayback'})},// 关闭弹框close () {this.visible = falseif (this.oWebControl != null) {this.oWebControl.JS_HideWnd()                                         // 先让窗口隐藏，规避插件窗口滞后于浏览器消失问题this.oWebControl.JS_Disconnect().then(function () {}, function () {})}}}
}
</script>
<style scoped>
.playWnd2 {width: 1000px;                   /*播放容器的宽和高设定*/height: 600px;
}
</style>

对接海康设备-vue相关推荐

关于对接海康设备的坑
首先千万不要信息他们那边对接人的话,要调用哪个接口自己连接一下设备,打个debug看一下报警参数lCommand 通过这个参数去海康的开发手册去搜索一下,注意:需要把这个参数转换为16进制再去搜,还有 ...
海康设备注册一直失败的问题
今天用JAVA对接海康设备,但是注册一直失败,ip.端口.用户名.密码都是正确的,一直百思不得其解,后来一番查询与排错,终于找到了原因,是因为没有初始化设备初始化设备的代码(红框里的部分): if ...
海康设备对接sdk错误码汇总 v6.0
海康设备对接sdk错误码汇总 v6.0
LiveGBS流媒体平台GB/T28181功能-作为上级平台对接海康大华华为宇视等下级平台监控摄像机NVR硬件执法仪等GB28181设备
LiveGBS作为上级平台对接海康大华华为宇视等下级平台监控摄像机NVR硬件执法仪等GB28181设备 1.背景说明 2.部署国标平台 2.1.安装使用说明 2.2.服务器网络环境 2.3.信令服务配 ...
php对接海康视频教程_EasyNVR无插件互联网直播平台对接海康摄像头如何通过SDK将视频在前端网页播放...
原标题:EasyNVR无插件互联网直播平台对接海康摄像头如何通过SDK将视频在前端网页播放市场上常见的海康.大华.宇视等网络摄像头只要支持RTSP协议,都可以接入到EasyNVR中,今天主要给大家分 ...
国标服务器GBServerPlatform对接海康摄像头的操作说明
这篇文章讲解一下QuickGBLink开发的国标服务器如何对接海康IPC. (GBT28181国标平台软件下载地址:https://github.com/QuickGBLink88/GB28181_S ...
国标服务器GBServerPlatform对接海康NVR的操作说明
这一篇文章介绍QuickGBLink开发的国标服务器如何对接海康NVR(网络硬盘录像机),主要讲解相关的操作步骤. (GBT28181平台软件下载地址:https://github.com/Quick ...
LiveGBS流媒体平台国标GB/T28181作为上级平台对接海康大华华为宇视等下级平台硬件NVR监控摄像机
LiveGBS流媒体平台国标GB/T28181作为上级平台对接海康.大华.华为.宇视等下级平台NVR硬件监控摄像机 1.背景说明 2.部署国标平台 2.1.安装使用说明 2.2.服务器网络环境 2.3 ...
LiveGBS国标GB/T28181国标视频流媒体平台如何对接海康大华宇视等监控摄像头报警消息报警订阅国标报警信息
LiveGBS国标GB/T28181国标视频平台如何对接海康大华宇视等监控摄像头报警硬件NVR报警消息 1.配置开启报警订阅 1.1.国标设备编辑 1.2.配置订阅周期 1.3.选择开启报警订阅 2. ...

对接海康设备-vue

对接海康设备-vue相关推荐

最新文章

热门文章