海康官方Demo
对接海康综合安防管理摄像头
说明:官方Demo是原js代码,自己改改就能用,非常简单,下面这个是改成vue的
首先要在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 = true
var that = this
that.cameraIndexCode = cameraIndexCode
that.enforcementStartTime = enforcementStartTime
that.enforcementEndTime = enforcementEndTime
// eslint-disable-next-line
that.oWebControl = new WebControl({
szPluginContainer: 'playWnd', // 指定容器id
iServicePortStart: 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 = null
document.getElementById('playWnd').innerHTML = '插件未启动,正在尝试启动,请稍候...'
// eslint-disable-next-line
WebControl.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 port
method: '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协议,默认443
var snapDir = 'C:\\SnapDir' // 抓图存储路径
var videoDir = 'C:\\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' // 自定义工具条按钮
// var reconnectTimes = 2 // 重连次数,回放异常情况下有效
// var reconnectTime = 4 // 每次重连的重连间隔 >= reconnectTime
// 请自行修改以上变量值
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 // 自定义工具条按钮
// 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 = 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 that = this
// eslint-disable-next-line
var encrypt = new JSEncrypt()
encrypt.setPublicKey(that.pubKey)
return encrypt.encrypt(value)
},
// 录像回放功能
startPlayback () {
var that = this
if (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-TCP
var 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-TCP
gpuMode: 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-TCP
gpuMode: gpuMode, // 是否启用GPU硬解,0-不启用,1-启用
wndId: wndId // 可指定播放窗口
})
})
},
// 停止回放
stopAllPlayback () {
this.oWebControl.JS_RequestInterface({
funcName: 'stopAllPlayback'
})
},
// 关闭弹框
close () {
this.visible = false
if (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) { // 弹框进来掉这个方法,传入 设备code
this.visible = true
var that = this
this.cameraIndexCode = cameraIndexCode
// eslint-disable-next-line
that.oWebControl = new WebControl({
szPluginContainer: 'playWnd2', // 指定容器id
iServicePortStart: 15900, // 指定起止端口号,建议使用该值
iServicePortEnd: 15909,
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
cbConnectSuccess: 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 = null
document.getElementById('playWnd2').innerHTML = '插件未启动,正在尝试启动,请稍候...'
// eslint-disable-next-line
WebControl.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 port
method: '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协议,默认443
var snapDir = 'C:\\SnapDir' // 抓图存储路径
var videoDir = 'C:\\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' // 自定义工具条按钮
// var reconnectTimes = 2 // 重连次数,回放异常情况下有效
// var reconnectTime = 4 // 每次重连的重连间隔 >= reconnectTime
// 请自行修改以上变量值
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 // 自定义工具条按钮
// 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 = 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 that = this
// eslint-disable-next-line
var encrypt = new JSEncrypt()
encrypt.setPublicKey(that.pubKey)
return encrypt.encrypt(value)
},
// 直播功能
startPlayback () {
var that = this
if (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-TCP
var gpuMode = 0 // 是否启用GPU硬解,0-不启用,1-启用
var wndId = -1 // 播放窗口序号(在2x2以上布局下可指定播放窗口)
console.log('params', {
cameraIndexCode: cameraIndexCode, // 监控点编号
streamMode: streamMode, // 录像存储类型:0-中心存储,1-设备存储
transMode: transMode, // 传输协议:0-UDP,1-TCP
gpuMode: 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 = false
if (this.oWebControl != null) {
this.oWebControl.JS_HideWnd() // 先让窗口隐藏,规避插件窗口滞后于浏览器消失问题
this.oWebControl.JS_Disconnect().then(function () {}, function () {})
}
}
}
}
</script>
<style scoped>
.playWnd2 {
width: 1000px; /*播放容器的宽和高设定*/
height: 600px;
}
</style>