需要配置三个参数appkey,secret,ip,另外在index.html引入所需js
![image.png](https://i-blog.csdnimg.cn/blog_migrate/4351bf0b1d43cdef1e6cfd570463ab2d.png)
使用
<template>
<div class="player">
<div id="video" ref="vdo"></div>
</div>
</template>
<script>
import { initPlugin, initForPreview, startPreview, closeVideo } from '引入封装的js'
export default {
data() {
return {
videoGrid: '1x1',
videoContainer: 'video'
}
},
mounted() {
this.initVideo()
},
methods: {
initVideo(){
initPlugin(this.videoContainer, this.$refs.vdo.clientWidth, this.$refs.vdo.clientHeight, () => {
initForPreview({ mlayout: this.videoGrid }).then(() => {
startPreview('视频编号', '指定播放窗口')
})
})
}
},
beforeDestroy() {
closeVideo()
}
}
</script>
let initCount = 0
let pubKey = ''
var oWebControl = null
let width = 1000
let height = 600
let cId = ''
const initPlugin = (containerId, w, h, onSuccess, callback) => {
cId = containerId
width = w || 1000
height = h || 6000
oWebControl = new WebControl({
szPluginContainer: containerId,
iServicePortStart: 15900,
iServicePortEnd: 15909,
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11',
cbConnectSuccess: () => {
oWebControl
.JS_StartService('window', {
dllPath: './VideoPluginConnect.dll'
})
.then(
() => {
oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: callback
})
oWebControl.JS_CreateWnd(containerId, width, height).then(() => {
onSuccess()
})
},
() => {
}
)
},
cbConnectError: () => {
oWebControl = null
WebControl.JS_WakeUp('VideoWebPlugin://')
initCount++
if (initCount < 3) {
setTimeout(() => {
initPlugin(containerId, w, h, onSuccess)
}, 1000)
} else {
document.getElementById(cId).innerHTML = `<a style="color:white;" href="./static/VideoWebPlugin.exe" download="VideoWebPlugin.exe">插件启动失败,请下载插件并安装!</a>`
}
},
cbConnectClose: () => {
console.log('cbConnectClose')
oWebControl = null
}
})
}
const intPluginForPlayback = option => {
return getPubKey().then(() => {
initPlayPlugin({ mplayMode: 1, ...option })
})
}
const initPlayPlugin = option => {
const { mlayout, mplayMode } = option || { mlayout: '1x1', mplayMode: 0 }
let appkey = ''
let secret = setEncrypt('')
let ip = ''
let playMode = mplayMode || 0
let port = 443
let snapDir = 'D:\\SnapDir'
let videoDir = 'D:\\VideoDir'
let layout = mlayout || '1x1'
let enableHTTPS = 1
let encryptedFields = 'secret'
let showToolbar = 1
let showSmart = 1
let 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(() => {
oWebControl.JS_Resize(width, height)
return Promise.resolve()
})
}
const initForPreview = option => {
return getPubKey().then(() => {
initPlayPlugin(option)
})
}
const getPubKey = () => {
return oWebControl
.JS_RequestInterface({
funcName: 'getRSAPubKey',
argument: JSON.stringify({
keyLength: 1024
})
})
.then(oData => {
if (oData.responseMsg.data) {
pubKey = oData.responseMsg.data
return Promise.resolve()
}
})
}
const setEncrypt = value => {
let encrypt = new JSEncrypt()
encrypt.setPublicKey(pubKey)
return encrypt.encrypt(value)
}
window.onresize = function () {
if (oWebControl != null) {
oWebControl.JS_Resize(width, height)
setWndCover()
}
}
window.onscroll = function () {
if (oWebControl != null) {
oWebControl.JS_Resize(width, height)
setWndCover()
}
}
const setWndCover = (cw, ch) => {
cw && (width = cw)
ch && (height = ch)
const playDiv = document.getElementById(cId)
if (playDiv) {
if (oWebControl != null) {
oWebControl.JS_Resize(width, height)
}
let iWidth = window.innerWidth
let iHeight = window.innerHeight
let oDivRect = playDiv.getBoundingClientRect()
let iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0
let iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0
let iCoverRight = oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0
let iCoverBottom = oDivRect.bottom - iHeight > 0 ? Math.round(oDivRect.bottom - iHeight) : 0
iCoverLeft = iCoverLeft > width ? width : iCoverLeft
iCoverTop = iCoverTop > height ? height : iCoverTop
iCoverRight = iCoverRight > width ? width : iCoverRight
iCoverBottom = iCoverBottom > height ? height : iCoverBottom
oWebControl.JS_RepairPartWindow(0, 0, width, height)
if (iCoverLeft !== 0) {
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, height)
}
if (iCoverTop !== 0) {
oWebControl.JS_CuttingPartWindow(0, 0, width, iCoverTop)
}
if (iCoverRight !== 0) {
oWebControl.JS_CuttingPartWindow(width - iCoverRight, 0, iCoverRight, height)
}
if (iCoverBottom !== 0) {
oWebControl.JS_CuttingPartWindow(0, height - iCoverBottom, width, iCoverBottom)
}
}
}
const startPreview = (cameraIndexCode, wzId) => {
let streamMode = 1
let transMode = 1
let gpuMode = 0
let wndId = ''
if (undefined === wzId || '' === wzId || null === wzId) {
wndId = -1
} else {
wndId = wzId
}
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')
oWebControl.JS_RequestInterface({
funcName: 'startPreview',
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode,
streamMode: streamMode,
transMode: transMode,
gpuMode: gpuMode,
wndId: wndId
})
})
}
const startPlayback = cameraIndexCode => {
let startTimeStamp = new Date().getTime() - 24 * 3600000
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
})
})
}
const closeVideo = callback => {
if (oWebControl != null) {
oWebControl.JS_HideWnd()
return oWebControl.JS_Disconnect().then(
() => {
setTimeout(callback, 1000)
},
() => {
}
)
}
}
const capture = () => {
oWebControl.JS_RequestInterface({
argument: {
wndId: 1
},
funcName: 'snapShot'
})
return Promise.resolve()
}
export { initPlugin, initForPreview, intPluginForPlayback, startPreview, closeVideo, startPlayback, setWndCover, capture }