1. 下载海康威视插件
链接转发
2. 把插件放在public文件,并在index.html引入插件
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/beb829b094a94f64b173647808ab29a9.png)
<script type="text/javascript" src="haikang/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="haikang/jsencrypt.min.js"></script>
<script type="text/javascript" src="haikang/web-control_1.2.5.min.js"></script>
3. 在main.js文件配置appkey,secret,ip,port四个全局变量,方便后续修改
Vue.prototype.appKey = "xxx"
Vue.prototype.secret = 'xxx'
Vue.prototype.ipAddress = 'xxx'
Vue.prototype.port = 443
4. 创建组件
<template>
<div>
<div id="playWnd" class="playWnd"/>
</div>
</template>
<script>
import JSEncrypt from 'jsencrypt/bin/jsencrypt'
import { getAllUrlParams } from "@/utils/MtUtil"
var oWebControl = null
var initCount = 0
var pubKey = ''
export default {
name: 'VideoPlayer',
data() {
return {
swfWidth: window.innerWidth - 200,
swfHeight: window.innerHeight - 100,
playText: '',
mode: '',
code: '',
}
},
mounted() {
let params = getAllUrlParams()
this.mode = params.mode
this.code = params.code
this.initPlugin()
window.addEventListener('resize',
this.SetDocOffset
)
},
destroyed() {
this.destoryWnd()
window.removeEventListener('resize', this.SetDocOffset)
},
beforeDestroy() {
this.destoryWnd()
},
methods: {
frontDownload() {
var a = document.createElement('a')
a.href = process.env.BASE_URL + 'haikang/VideoWebPlugin.exe'
a.download = 'VideoWebPlugin.exe'
a.style.display = 'none'
document.body.appendChild(a)
a.click()
a.remove()
},
initPlugin() {
var that = this
oWebControl = new window.WebControl({
szPluginContainer: 'playWnd',
iServicePortStart: 15900,
iServicePortEnd: 15903,
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11',
cbConnectSuccess: function () {
oWebControl.JS_StartService('window', {
dllPath: './VideoPluginConnect.dll'
}).then(function () {
oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: that.cbIntegrationCallBack
})
oWebControl.JS_CreateWnd('playWnd', that.swfWidth, that.swfHeight).then(
function () {
that.init()
})
}, function () {
})
},
cbConnectError: function () {
oWebControl = null
that.$message.warning('插件未启动,正在尝试启动,请稍候...')
that.playText = '插件未启动,正在尝试启动,请稍候...'
window.WebControl.JS_WakeUp('VideoWebPlugin://')
initCount++
if (initCount < 3) {
setTimeout(function () {
that.initPlugin()
}, 3000)
} else {
that.$message.warning('插件启动失败,请检查插件是否安装!')
that.playText = '插件启动失败,请检查插件是否安装!'
if (initCount == 3) {
that.frontDownload()
}
}
},
cbConnectClose: () => {
console.log('cbConnectClose')
oWebControl = null
}
})
},
init() {
const that = this
this.getPubKey(() => {
var appkey = that.appKey
var secret = that.setEncrypt(that.secret)
var ip = that.ipAddress
var playMode = +that.mode
var port = that.port
var snapDir = 'D:\\SnapDir'
var videoDir = 'D:\\VideoDir'
var layout = '1x1'
var enableHTTPS = 1
var encryptedFields = 'secret'
var showToolbar = 1
var showSmart = 1
var buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769'
oWebControl.JS_RequestInterface({
funcName: 'init',
argument: JSON.stringify({
appkey: appkey,
secret: secret,
ip: ip,
playMode: playMode,
port: port,
snapDir: snapDir,
videoDir: videoDir,
layout: layout,
enableHTTPS: enableHTTPS,
encryptedFields: encryptedFields,
showToolbar: showToolbar,
showSmart: showSmart,
buttonIDs: buttonIDs
})
}).then(function (oData) {
oWebControl.JS_Resize(that.swfWidth, that.swfHeight)
if (that.mode == 0) {
that.startPreview(that.code)
} else {
that.startPlayback(that.code)
}
that.playText = ''
})
})
},
getPubKey(callback) {
oWebControl.JS_RequestInterface({
funcName: 'getRSAPubKey',
argument: JSON.stringify({
keyLength: 1024
})
}).then(function (oData) {
if (oData.responseMsg.data) {
pubKey = oData.responseMsg.data
callback()
}
})
},
setEncrypt(value) {
var encrypt = new JSEncrypt()
encrypt.setPublicKey(pubKey)
return encrypt.encrypt(value)
},
cbIntegrationCallBack(oData) {
const {
responseMsg: type,
responseMsg: msg
} = oData
if (type === 'error') {
console.log(type, msg, this.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'))
} else {
console.log(type, msg, this.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'))
}
},
startPreview(cameraCode) {
oWebControl.JS_ShowWnd()
var cameraIndexCode = cameraCode
var streamMode = 0
var transMode = 1
var gpuMode = 0
var wndId = -1
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
oWebControl.JS_RequestInterface({
funcName: 'startPreview',
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode,
streamMode: streamMode,
transMode: transMode,
gpuMode: gpuMode,
wndId: wndId
})
})
},
stopAllPreview() {
oWebControl.JS_RequestInterface({
funcName: 'stopAllPreview'
})
},
startPlayback(cameraCode) {
let cameraIndexCode = cameraCode
let startTimeStamp = new Date().getTime() - 24 * 60 * 60 * 1000
let endTimeStamp = new Date().getTime()
let recordLocation = 1
let transMode = 1
let gpuMode = 0
let wndId = -1
oWebControl.JS_RequestInterface({
funcName: 'startPlayback',
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode,
startTimeStamp: Math.floor(startTimeStamp / 1000).toString(),
endTimeStamp: Math.floor(endTimeStamp / 1000).toString(),
recordLocation: recordLocation,
transMode: transMode,
gpuMode: gpuMode,
wndId: wndId
})
})
},
stopAllPlayback() {
oWebControl.JS_RequestInterface({
funcName: 'stopAllPlayback'
})
},
SetDocOffset() {
if (oWebControl != null) {
oWebControl.JS_Resize(this.swfWidth, this.swfHeight)
}
},
destoryWnd() {
if (oWebControl != null) {
oWebControl.JS_HideWnd()
oWebControl.JS_RequestInterface({
funcName: 'destroyWnd'
})
oWebControl.JS_Disconnect()
}
},
dateFormat(oDate, fmt) {
var o = {
'M+': oDate.getMonth() + 1,
'd+': oDate.getDate(),
'h+': oDate.getHours(),
'm+': oDate.getMinutes(),
's+': oDate.getSeconds(),
'q+': Math.floor((oDate.getMonth() + 3) / 3),
'S': oDate.getMilliseconds()
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + '').substr(4 - RegExp.$1.length))
}
for (var k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k])
.length)))
}
}
return fmt
}
}
}
</script>
<style lang="scss" scoped>
.root-haikang-video {
.playWnd {
width: 100%;
height: 100%;
}
}
</style>